Кроссбраузерное внедрение CSS 3.0 + Internet Explorer

CSS 3.0 очень широко поддерживается современными браузерами: Firefox 3/6+,Opera 10.5+,Internet Explorer 9+, Google Chrome, Apple Safari (но, реализация многих свойств возможна в более старых и даже «специфических браузерах», даже в IE 8.0).

Например, как Вы можете увидеть: на главной странице нашего сайта IE 8.0 прекрасно справляется с объёмными тенями и с округлениями углов вокруг изображений. CSS 3.0 есть чем похвастаться!

Здесь Вам и: управление фоновой прозрачностью rgba, и объёмные тени различного рода мастей, и линейные и нелинейные градиенты, трансформация фона, вращение элементов, и, (наконец-то!) скругления острых углов. Кроме этого в набор средств CSS 3.0 добавили даже анимацию.

Внедрение CSS 3.0

Для каждого свойства css 3.0 дублируйте его значение с указанием префикса браузеров (дело в том, что индивидуальная поддержка CSS 3.0 закладывалась даже в ранние версии браузеров (например, Firefox 3.6, Opera 9.6), правда к именам свойств добавлялся префикс). Например, так будет выглядеть наиболее полная поддержка «закругления углов» border-radius:

.image-wrap{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-o-border-radius: 4px;
	-icab- border-radius: 4px;
	border-radius: 4px;
	behavior: url(http://[ваш сайт]/pie.htc);
}

Где:

• -moz- — префикс фильтров для Mozilla Firefox 3.6+;
• -o- — префикс фильтров для Opera 9.6+;
• -webkit- — префикс для Webkit браузеров, Chrome и Safari;
• -khtml- — для Konqueror и других браузеров;
• -icab- — аналог Safari от Apple;
• behavior — ограниченная поддержка некоторых css 3.0 свойств для Internet Explorer 7,8

Примечание автора: не применяйте behavior напрямую к селекторам элементов без явного указания id, класса (например: img {behavior: …} лучше не применять). Так же не применяйте ко всем элементам на странице или в контейнере (неверный подход: html *, *, div * {behavior: …}), это может привести к «подвисанию» страницы во время загрузки и краху браузера. Указывайте точные селекторы классов (например: .image-wrap,.image-wrap:hover{behavior:…}).

Если браузер притом или ином назначении селекторов CSS 3.0 ведёт себя неожиданно, придётся воспользоваться поиском. Встречаются ещё «особенности» реализации со стороны тех или иных браузеров, например, для полной поддержки border-radius: в Opera < 11 версии нужно присвоить элементу обязательно свойство border, отличное от значения по умолчанию.

А border-radius: для изображений работает очень глючно (в следующей статье мы рассмотрим решение этой проблемы «на лету» с помощью javascript: mootools, jquery, dom1).

Внедряем поддержку css 3.0 в Internet Explorer 7,8

Здесь можно добиться ограниченной поддержки css 3.0 с помощью решения css3pie. Перед началом работы с библиотекой внимательно прочтите документацию о работе css3pie, рассмотрите приведённые на сайте разработчиков примеры.

Скачайте это решение главной страницы сайта, воспользовавшись визуальным конструктором, и укажите селекторы стилей для нужных классов на странице (например, на нашем сайте обрабатываются классы изображений .image-wrap, .image-wrap:hover). С помощью условных комментариев, которые понимает исключительно IE, добавьте в шапку страницы:

<!--[if lte IE 8.0]>
<style type="text/css">
.image-wrap,.image-wrap:hover{
	behavior: url(http://[полный путь с адресом Вашего сайта к]/pie.htc);
	zoom: 1;
}
</style>
<![endif]-->

Примечание автора: в behavior: нужно указать полный путь к pie.htc с указанием адреса сайта, behavior работает медленнее javascript «аналога» библиотеки.

Теперь указанные для других браузеров селекторы во время загрузки страницы «заработают» в Internet Explorer (по крайней мере: скругление углов – (css: border-radius), тени – (css: box-shadow), «фоновые изображения для бордюров» — (css: border-image), линейный градиент – (css: linear-gradient), и ограниченная поддержка «полупрозрачного фона» с помощью RGBA (только для небольшого количества цветов в HEX формате (скорее всего из набора в 256 цветов, предназначенного для webа)).

CSS 3.0 RGBA для любой версии Internet Explorer

Примечание автора: приемлемым решением здесь является назначить изображение нужной прозрачности, подготовленное заранее в Adobe Photoshop фоном элемента.

Рассмотрим ещё несколько приёмов «реализации поддержки» набора свойств CSS 3.0 в Internet Explorer 7.8.» Прозрачность в Internet Explorer (css: opacity for IE):

selector{
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

Уровень прозрачности, в отличие от других браузеров, измеряется в процентах от 0 – полной прозрачности, до 100 – полностью непрозрачный элемент. Правда, существует один очень серьёзный bug, не советуем применять прозрачность к элементам, содержащим png изображения в своём фоне, или изображения (img тег) с расширением png.

И даже в Internet Explorer 8.0 существуют проблемы с применением дополнительной прозрачности к png изображениям. Полупрозрачные пиксели в этом случае становятся чёрными непрозрачными.

В этом случае за решением проблемы «чёрных полупрозрачных областей» советуем обратиться, например, к документации (простейшее решение), приведённой в этой статье, где подробно описан метод «исключения» чёрных областей на этапе подготовки, и решение на скорую руку при помощи JS.

Более универсальное решение «на лету при помощи javascript» вопроса о прозрачности в Internet Explorer находится здесь: DD_belatedPNG.

Тень вокруг текста в Internet Explorer (css 3.0: text-shadow for IE):

selector{
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=2)
}

Где:

Color: цвет, указанный в hex или именованным значением, strength: «толщина нажима тени», указывается в пикселях.

Но тень вокруг элемента выйдет слишком «резкая», советуем Вам поэкспериментировать в этом случае с другим фильтром blur (размытие) вместе с Glow.

selector{
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=2)
filter: progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='true')
}

Где:

pixelradius – радиус «размытия»

Вращение в Internet Explorer (css: transform for IE):

selector{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Где:

rotation: угол вращения. Допустимые значения: 1 — 90 градусов, 2 – 180 градусов, 3 — 270 градусов или 4 – 360 градусов.

Есть более гибкий вариант трансформации элемента с помощью фильтра Matrix:

selector{
filter:progid:DXImageTransform.Microsoft.Matrix(Dx, Dy, enabled="true", FilterType=("bilinear"|" nearest neighbor"), M11, M12, M21, M22, SizingMethod=("clip to original","auto expand"));
}

Где:

• Dx — сдвиг по оси X.
• Dy — сдвиг по оси Y.
• enabled=»true» — применить фильтр/отключить фильтр.
• FilterType: управляет результатами работы фильтра, bilinear – качество полученного изображения в результате работы фильтра лучше, используется со статическими эффектами, nearest neighbor – «по ближайшим пикселям», качество хуже, но получаемая картинка грузится быстрее, подходит для анимационных эффектов.
• SizingMethod — управляет масштабом элемента после применения фильтра. clip to original – элемент сохраняет свои первоначальные размеры, auto expand – после применения фильтров элемент будет отмасштабирован до новых размеров.
• M11=1.0 — M12=0.0 — M21=0.0 — M22=1.0 – здесь указываем скосы (вещественное значение, может принимать отрицательные величины)

Например, для поворота элемента на 15 градусов применение фильтра будет выглядеть так:

filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9659258262890683,
            M12=-0.2588190451025207,
            M21=0.2588190451025207,
            M22=0.9659258262890683,
            SizingMethod='auto expand');

Чтобы подобрать нужное значение для фильтра, можете воспользоваться сайтом. Итак, мы собрали наиболее полный кроссбраузерный вариант внедрения CSS 3.0 селекторов. В следующих статьях мы перейдём к применению многих возможностей css 3.0 на практике для стилизации изображений в материалах сайта.