Кроссбраузерное внедрение 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 градусов, 2180 градусов, 3 - 270 градусов или 4360 градусов.

Есть более гибкий вариант трансформации элемента с помощью фильтра 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 на практике для стилизации изображений в материалах сайта.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика