13 нояб. 2012 г.

Поддержка браузерами субпиксельных размеров

Согласно спецификации CSS2 размеры элементов в пикселях могут быть дробными, например #id {width: 100.5px;}. Некоторые браузеры не поддерживают субпиксельные размеры, усекая их до меньшего целого числа. Как написать feature test (во время загрузки страницы определить, поддерживает ли браузер субпиксельные размеры)?

Основная идея: попытаться разместить два элемента с нецелой шириной {width: 100.5px;} в ряд {float: left;} внутри контейнера с шириной 200px {width: 200px;}. Если браузер не поддерживает субпиксельные размеры, усекая их в меньшую сторону, то элементы в контейнер поместятся (100px + 100px = 200px), в противном случает второй элемент будет вытеснен из ряда в следующий (100.5px + 100.5px = 201px - шире чем 200px). На случай, если кто-нибудь решит округлять размеры, вторую проверку можно провести в контейнере {width: 201px;} (при округлении 101px + 101px = 202px - шире чем 201px). Вот тестовая страница.

Результаты:


  • IE6, IE7, Opera 12.02, Opera 12.10: 100.5px + 100.5px = 200px (два плавающих блока 100.5px помещаются в 200px)
  • IE8+, Firefox 15+, Chrome 22+: 100.5px + 100.5px > 200px


http://stackoverflow.com/questions/12604754/is-there-a-way-to-detect-if-the-browser-has-subpixel-precision/12709683#12709683

Комментариев нет:

Отправить комментарий