CSS3. Кросс-браузерный box-shadow (upd. multishadow)

Хочу сразу сказать, что эта статья ни в коем-случае не пропагандирует добавление обсуждаемого эффекта во все ваши проекты. Скажу больше, я со свой колокольни считаю, что примеров ненужного и неудачного использования теней блоков в дизайне гораздо больше, чем удачных. Однако, если задача уже стоит, то требуется ее решение. Итак, тени блоков стандартными средствами CSS.



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

К счастью веб-разработчиков спецификация CSS3 включила в себя решение этой задачи стандартными средствами css. К сожалению, разработчики браузеров не спешили с имплементацией css3, из-за этого простого решения не предвидится.

Итак, мы имеем некую витрину (галерея тамбов или превью товара в электронном магазине). И по замыслу дизайнера предполагается тень вокруг элемента этой витрины.



Шаг 1. «Нормальные браузеры»


Хорошая новость:
в современных браузерах мы получили тот результат, который ожидали

Opera 10.5+, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+

Плохая новость:
Как я уже сказал, компании разработчики долго тянули кота за яйца и поначалу включили это свойство в свои браузеры в тестовом режиме с префиксом вендора. Исключение составляет Opera, поддерживающая box-shadow без префиксов с версии 10.5. Позаботимся о старых браузерах:


Мы добавили поддержку FF1-3.6, Saf3-4, iOS 1-3.2, Android <1.6

Шаг 2. «Наш гомосексуальный друг IE»
Ну для начала надо сказать, что box-shadow было реализовано только в ie9. Версии 6,7,8, которые по-прежнему занимают свое место под солнцем, не имели даже его тестовой реализации с префиксом вендора. Что же нам с ними делать.

Во-первых, если вы руководитель проекта подумайте, а нужен ли козе баян. У вас на руках официальная отмаза из дурдома, что эти браузеры это свойство не поддерживают. В разработческом мире есть два лидирующих воззрения на этот счет. Мнение первое — разбейся, но чтобы во всех браузерах все было одинаково. Мнение второе — какие-то элементы дизайна можно считать приятным бонусом для хороших браузеров. Я скорее сторонник второго. Кстати, обнаружил, что разработчики metalab, к которым я отношусь с пиететом, разделяют это точку зрения.
Вот тема для блога, которую они разработали.

Если вы смотрите это в нормальных браузерах, то видите тень от элемента.



Если вы смотрите в IE < 9, то тень отсутствует. Дизайн изменился, да, но не столь критично, данная деталь — бонус для хороших браузеров.


Ну, закончим нравоучение. По каким-то причинам вы все же решили реализовать эту тень для устаревших IE.

Вариант 1. Фильтры.

У IE есть такой сомнительный бонус как фильтры, в том числе имеется фильтр тени. Попробуем,
применить этот фильтр чтобы получить нужный нам эффект.



Результат противоречивый,тень есть, а счастья нет. Трудно будет доказать и заказчику и себе, что такая тень подходит.


В топку.

Вариант 2. IE-CSS3 компонент


Компонент использует для прорисовки тени VML (Vector Markup Language). С предыдущими версиями компонента иногда бывали проблемы — блок тени при загрузке болшого кол-ва элементов мог скакать или безобразничать при изменении размера окна браузера. Судя по всему сейчас это баг пофиксили, но лучше протестируйте если надумаете использовать. Конечный результат впечатлил не сильно, по мне так это те же грабли что с фильтром.


Есть и еще один минус этого решения. Согласно спецификации и реализации «хорошими браузерами» box-shadow позволяет добавлять несколько независимых теней.



Вот что отобразят нормальные браузеры:



А что реализовал компонент?



В топку.

Вариант 3. CSS3 PIE — компонент


Результат, на мой взгляд более удовлетворительный. В моем проекте это был бы однозначно победитель.


А что с множественной тенью?



Смотрим результат:



Yoohoo! Таким образом можно сказать, что CSS3 PIE является наиболее полноценным костылем реализации box-shadow в IE 6,7,8