Кто или что вводит "контрастные данные" на мой сайт (ночью) и как это остановить? - PullRequest
Новая
       184

Кто или что вводит "контрастные данные" на мой сайт (ночью) и как это остановить?

4 голосов
/ 07 августа 2020

Мне стало известно, что на веб-сайте, с которым я помогаю, иногда возникают проблемы с введением элементов span. Эти промежутки разрушат пробелы и затруднят чтение текста. Эти промежутки выглядят примерно так: 

<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>

Веб-сайт работает с / на WordPress, но это не похоже на причину, потому что затронутые сообщения выглядят нормально и не показывают никаких признаков этой разметки в сообщении. редактор или база данных.

Кроме того, кажется, что эти промежутки возникают только в ночное время. Я пытался закрепить это, но, как это часто бывает, я еще не мог проверить это, так как это больше не приходило мне в голову, даже ночью. Сейчас все в порядке, и ни один из этих интервалов отсутствует.

Я предполагаю, что это как-то связано с ночным режимом в браузерах (хотя поведение было одинаковым в Edge и Firefox) или ночной режим в Windows, но, с другой стороны, я еще не заметил этого ни на одной другой странице.

Итак, это несколько странно и сложно определить, но вы найти скопированные тексты, содержащие ту же разметку, , когда вы используете поисковую систему и выполняете поиск по запросу «диапазон контрастности данных». Так что, по крайней мере, я не единственный, у кого эта проблема.

Есть идеи, как решить эту проблему и выяснить, что ее вызывает?

1 Ответ

5 голосов
/ 11 августа 2020

Плагины браузера обычно получают разрешение на изменение исходного кода страницы во время выполнения. Я предполагаю, что виновником является кроссбраузерное расширение, такое как Night Eye или Dark Reader .

В общем, добавление <span> не должно мешать вашему макет, если ваш CSS не изменяет свойства диапазона от значений по умолчанию в браузере.

Вариант 1

Вы можете решить проблему, добавив CSS в контролировать внешний вид макета: 

span[data-contrast="auto"] {...}

Это выберет все промежутки, имеющие этот атрибут данных. Затем добавьте стиль, чтобы устранить проблемы с макетом, которые вы видите. Тем не менее, поскольку расширение добавляет код после рендеринга страницы, оно может переопределить все, что вы делаете.

Вариант 2

Лучшим решением было бы создать свой собственный темный режим. Большинство ночных режимов плагинов / ОС не испортят ваш код, если вы предоставите собственные параметры темы. «Темная» тема - это мобильная адаптивная версия 2020 года; вы должны указать это в своем коде или жить с последствиями, когда пользователи, разработчики браузеров и операционные системы принимают свои собственные решения.

Если вам нужна помощь в создании альтернативной темы, CSS Уловки есть хорошая запись .

...