CSS3 для веб-дизайнеров - [12]
opacity: хак для IE
К счастью, >opacity поддерживается в Internet Explorer 9 Beta, но мы также можем сымитировать тот же результат в ранних версиях IE, воспользовавшись проприетарным свойством >filter от Microsoft.
Обычно я бы не стал предлагать использовать свойство >filter, потому что (в отличие от свойств с браузерными префиксами) оно не входит ни в один предложенный стандарт. Также использование >filter может повлечь за собой существенные проблемы производительности в зависимости от того, где и как часто оно используется. Это хак – но он решает проблему.
При условии, что вышесказанное понятно, и выделяя это свойство в отдельный стилевой файл или иначе аккуратно комментируя его, >filter можно воспринимать как приемлемый метод.
Вот как он работает:
>#footer-logos a img {
> border: none;
> opacity: 0.25;
> -ms-filter: "progid: DXImageTransform.Microsoft.>Alpha(Opacity=25)"; /* IE 8 hack */
> filter: alpha(opacity = 25);/* IE 5–7 hack */
> }
>#footer-logos a: hover img,
>#footer-logos a: focus img {
> opacity: 0.6;
> -ms-filter: "progid: DXImageTransform.Microsoft.>Alpha(Opacity=60)"; /* IE 8 hack */
> filter: alpha(opacity = 60);/* IE 5–7 hack */
> }
Синтаксис похож: значение opacity вставляется в альфа-фильтр IE. Обратите внимание: IE8 игнорирует свойство >filter и требует префиксное свойство >-ms-filter с некоторыми дополнительными некрасивыми значениями.
Воспользовавшись хаками, мы добились такого же результата в IE (рис. 3.20). Повторюсь – если решили использовать хаки, пользуйтесь ими с умом. Но реальность заключается в том, что, скорее всего, вам придется использовать хаки, если какой-либо ваш сайт показывает значительный трафик с IE (так обстоит ситуация с большинством сайтов).
>Рис. 3.20. Футер в IE7 показывает псевдосвойство opacity с использованием хака filter
>Добавим переход
Наконец, наложим переход на свойство >opacity, который сгладит изменение свойства и добавит немного приятной глазу анимации, дополняющей эффект.
Добавим знакомые строки >transition, на этот раз объявляя переход исключительно для свойства >opacity. Сделаем его быстрым (0,2 секунды) и выставим временную функцию ease-in-out.
>#footer-logos a img {
> opacity: 0.25;
> -ms-filter: "progid: DXImageTransform.Microsoft.>Alpha(Opacity=25)"; /* IE 8 hack */
> filter: alpha(opacity = 25); /* IE 5–7 hack */
> -webkit-transition: opacity 0.2s ease-in-out;
> -moz-transition: opacity 0.2s ease-in-out;
> -o-transition: opacity 0.2s ease-in-out;
> transition: opacity 0.2s ease-in-out;
> }
>#footer-logos a: hover img,
>#footer-logos a: focus img {
> opacity: 0.6;
> -ms-filter: "progid: DXImageTransform.Microsoft.>Alpha(Opacity=60)"; /* IE 8 hack */
> filter: alpha(opacity = 60); /* IE 5–7 hack */
> }
С использованием перехода мы получили простой метод использования opacity для создания гибкого взаимодействия в состоянии hover на основе лишь одного набора изображений.
Вперед, к новому hover
Ранее я упоминал, что такой подход повлиял на то, как я думаю о подготовке графики для сайтов. Мы можем пользоваться свойством >opacity, чтобы управлять тем, как графика выглядит в обычном состоянии, смешивая ее с фоном – и затем применять другие значения для состояний >:hover, >:focus и >:active. Мы также можем сочетать это изменение с CSS3-переходом для тех браузеров, в которых они поддерживаются.
Помните о свойстве >opacity в следующий раз, когда вы будете создавать отдельный вид картинок-ссылок в состоянии hover. Вы выиграете время, трафик и избавитесь от лишней сложности, которая может содержаться в других решениях.
Оформление состояния hover средствами CSS3 заключается прежде всего в добавлении простых стилей, которые расширяют взаимодействие, удивляя и восхищая пользователей – пользователей тех браузеров, в которых поддерживаются эти свойства. Если браузер не поддерживает созданное высококачественное взаимодействие, это нормально – посетитель сайта не узнает, что он упускает.
4. Преобразовывая содержимое
Как и CSS-переходы, CSS-трансформации были изначально разработаны командой WebKit, и затем их включили в два отдельных рабочих черновика W3C:
1. CSS 2D-преобразования (http://www.w3.org/tR/Css3-2d-transforms/);
2. CSS 3D-преобразования (http://www.w3.org/tR/Css3-3d-transforms/).
В этой книге мы поговорим исключительно о 2D-преобразованиях, так как прямо сейчас они больше всего пригодны для использования. Знанием о 3D-преобразованиях можно написать отдельную книгу, и они прекрасны, волшебны. Но у 2D-преобразований (как и у переходов) лучше обстоят дела с поддержкой браузерами: Safari 3.2, Chrome 3.2, Firefox 4.0, Opera 10.5.
Итак, что такое CSS-преобразования? W3C описывает их так:
CSS 2D-преобразования позволяют преобразовывать на плоскости элементы, отображенные посредством CSS9[9].
Здорово, все понятно. Лучший способ понять, что такое преобразования, – увидеть их в действии.
Давайте сначала посмотрим на простой пример: будем применять различные плоские преобразования к небольшой фотогалерее. Затем (в этой главе) мы воспользуемся теми же приемами на практике на сайте о Луне.
Масштабирование
Возьмем горизонтальный список из трех фотографий с небольшой рамкой, на которых запечатлена недавняя поездка на Мартас-Виньярд, небольшой остров у побережья Массачусетса (
