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

2 комментария

Напомню, что в Опере до 11й версии сохранялся баг рендеринга тени для селекторов с псевдоклассом :hover. Он обходится с помощью присвоения исходному селектору аналогичной по всем параметрам тени за исключением цвета, который должен быть прозрачным:

.box{box-shadow:0 2px 10px rgba(0,0,0,0)}
.box:hover{box-shadow:0 2px 10px #5f5}
Спасибо за дополнение.

Чтобы оставлять комментарии, нужно или зарегистрироваться.