HTML/CSS Evangelist

Размышления на тему HTML верстки

В 99.9% случаев CSS свойство zoom используется верстальщиками для активации hasLayout в IE. Я хочу рассказать о том 0.01% проценте использования этого свойства.
В те времена, когда трава была зеленее, миром правил IE, а дизайнеры учились рисовать сайты- приходилось часто сталкиваться с неоднозначными дизайнерскими решениями.
Одним из этих решений — кастомные скроллбары, например такие:


Особенность работы свойства zoom в IE заключается в том, что оно применяется не только для содержимого контейнера, но и для скроллбара контейнера.
Чтобы получить контейнер со скролом достаточно указать атрибут overflow: auto и ограничить высоту|ширину. В результате получим что-то вроде:

Вторым шагом — попробуем применить свойство zoom:50%, содержимое блока уменшится в 2 раза:

Как видно из картинки — мы уже получили узкий скролл, правда, уменьшили высоту блока и текст внутри.
Исправить это можно двумя шагами:
1 — увеличим высоту средствами css.
2 — увеличим содержимое блока в 2 раза (ровно на столько, на сколько мы уменьшили блок-родитель), для этого все содержимое блока обворачиваем в еще один элемент и задаем ему свойство zoom:200%:

Комбинируя разные значения zoom можно получить скролбары не только маленького размера, но и большого:

Разумеется, это работает только в IE.