Субпиксельный рендеринг и обводки

Субпиксельный рендеринг и обводки

От автора: я был невероятно счастлив, что смог недавно выступить на первом Talk.CSS в Мельбурне, и после этого у меня был хороший разговор с одним из участников о проблемах субпиксельного рендеринга для тонких обводок CSS в разных браузерах.

Во время своего выступления я очень кратко затронул тему субпиксельного рендеринга при освещении свертывания полей. Если у вас есть полностью пустой блок, его поля вдоль направления блока будут объединяться друг с другом.

Вычисленные значения отступов

Однако добавление чего-либо в пустой блок, даже обводки или отступов, предотвратит это. В тот момент мне было любопытно, насколько низким может быть значение отступа, прежде чем браузер воспримет его как ничто, и я обнаружил, что для Firefox вы можете опуститься до 0.0083333323709666669px, но 0.0083333323709666668px еще воспринимается.

В Chrome, однако, я остановился на 0.015624999534338711824899004199096452794037759304047px. Не стесняйтесь, если хотите, дайте мне знать, как далеко вы можете зайти. Safari имел те же десятичные значения, поэтому я предполагаю, что и в Blink это не изменится.

После дальнейшей проверки DevTools для 3 браузеров, которые были у меня на ноутбуке (кто знает, работают ли браузеры в Windows по-другому?), я заметил интересные вещи относительно того, как DevTools выражает вычисленные значения.

Диаграмма блочной модели Firefox, кажется, правильно выражает эффект отступа. Хотя там, кажется, наблюдается некоторая магическая высота содержимого, когда отступы отображаются как ненулевое значение.

Попытка Firefox DevTools отобразить малые десятичные дроби

Субпиксельный рендеринг и обводки

Что касается Chrome и Safari, кажется, что диаграмма блочной модели не согласуется с тем, что мы видим в браузере, и что-то происходит с отображаемыми вычисленными значениями.

Блочная модель в Chrome выглядит запутанной

Субпиксельный рендеринг и обводки

Похоже, что вычисленные значения в Safari имеют некоторое округление

Субпиксельный рендеринг и обводки

О числах с плавающей запятой

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

IEEE 754, который является техническим стандартом для арифметики с плавающей запятой, определяет арифметические форматы, правила конвертации, правила округления, операции и обработку исключений. Я предполагаю, что браузеры соответствуют этому стандарту при работе с субпиксельным округлением, но не уверен.

О рендеринге обводки

Вернемся к обсуждению обводок. Для слайдов презентации я часто использую ique.js, а стиль таблицы по умолчанию использует обводку между строками таблицы в 1px. На определенных разрешениях, в разных браузерах, иногда граница не отображается.

Решением этой проблемы является использовать значение thin для свойства border-width.

Обводки были введены с CSS1 как часть блочной модели. Основные свойства, которые определяют, как выглядит обводка border-width, border-style и border-color. Все 3 свойства являются частью сокращенного свойства, используемого для установки свойств обводки для всех 4 сторон блока.

Для border-width, вы можете использовать значения ключевых слов, такие как thin, medium или thick, а также стандартные значения длины CSS. Суть этих значений ключевых слов в том, что спецификация не определяет, как именно браузеры должны их разрешать.

Длина, соответствующая значениям thin, medium и thick, не указана, но значения постоянны по всему документу и thin ≤ medium ≤ thick. А UA может, например, сделать толщину зависимой от среднего размера шрифта: один вариант может быть 1, 3 и 5px, если средний размер шрифта составляет 17px или меньше. Отрицательные значения <length> не допускаются.

Я не тестировал каждый браузер, только Chrome, Firefox и Safari, но все три из них действительно используют предложенные 1px, 3px и 5px соответственно.

Весьма вероятно, что причина использования thin для исчезающей обводки заключается в том, что каждый браузер разрешает ключевое слово способом, который соответствует вычислениям его собственного движка рендеринга. Так что, хотя thin и 1px должны давать тот же результат, использование thin является лучшим вариантом.

Заключение

Субпиксельное округление влияет на многие аспекты рендеринга в браузере, и было интересно почитать наблюдения Джона Резига о его тестовом примере, включающем размер дочернего элемента div в процентах.

Другая проблема с субпиксельным округлением была задокументирована инженерами в Symbiote, которые столкнулись со сложностями округления вычисленной высоты текста при использовании значений em или rem для свойства line-height.
Это похоже на давнюю проблему с рендерингом браузера, но, похоже, четкого решения нет. Если у кого-то есть понимание состояния субпиксельного рендеринга или если кто-то укажет мне нужных людей, я был бы очень признателен.

Автор: Chen Hui Jing

Источник: https://www.chenhuijing.com

Редакция: Команда webformyself.