Решения CSS3 для Internet Explorer

Вероятно, CSS3 является самым горячим трендом в сфере веб дизайна, который открывает для разработчика возможности использования большого количества решений на основе чистого CSS без задействования нестандартной разметки, внешних изображений и сложных процедур на JavaScript. К сожалению, Internet Explorer, даже в самых новых версиях, все еще не поддерживает большинство свойств и возможностей, которые вводятся в CSS3.

Но разработчики сталкиваются с тем, что клиенты настаивают на использовании кросс-браузерных решений с использованием расширенных возможностей CSS3, требуя их реализации даже в IE6.  В данной статье собраны вместе несколько опций, которые разработчик может принять во внимание при работе в описанных условиях, когда поддержка CSS3 требуется во всех версиях Internet Explorer (IE6, IE7 и IE8 — все они по прежнему используются существенным количеством посетителей сайтов).

Прозрачность

Вероятно, что все разработчики сбиты с толку тем, что Internet Explorer все еще не поддерживает данное очень популярное (хотя и проблематичное) свойство. Оно используется повсюду уже так давно, что все успели забыть, что в действительности - это свойство CSS3. Хотя IE не поддерживает свойство opacity, он предлагает схожие эффекты прозрачности с помощью его собственного свойства filter:.

Синтаксис

#myElement {
	opacity: .4; /* другие браузеры */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* данная строчка работает в IE6, IE7, и IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* данная строчка работает только в IE8 */
}

В действительности вам нужна только вторая строчка, которая работает во всех трех версиях Internet Explorer. Но если по каким-то причинам вам нужно использовать прозрачность только в IE8, вы можете задействовать третью строку, которую браузеры старших версий не распознают.

Значение прозрачности, которое устанавливается в конце каждой строки свойств для IE, работает также как и значение свойства opacity. Получая число от 0 до 100 (Свойство opacity использует двухпозиционное число в диапазоне от 0 до 1. Например, "44" для IE будет эквивалентно "0.44" для других браузеров). Установки прозрачности наследуются элементами потомками, что может сбивать с толку при работе.

Демонстрация

Недостатки

• Свойство filter используется только в продуктах Microsoft, то есть ваш CSS не пройдет проверку

• Как и в случае использования свойства opacity , значение свойства filter IE наследуется всеми элементами потомками

Скругленные углы

Свойство  border-radius (часто упоминаемом как скругление углов в CSS3) - другое популярное нововведение CSS3. Данное свойство позволяет разработчикам избегать чрезмерного кодирования на JavaScript или дополнительного позиционирования элементов для достижения данного замечательного эффекта.  Но IE не имеет никакой поддержки данного свойства.

Remiz Rahnas разработал файл HTC, который называется Скругленные углы CSS (его можно загрузить с Google Code). Решение может использоваться в таблицах стилей, предназначенных только для IE.

Это замечательный код не требует никакой поддержки с вашей стороны, если вам нужно только добиться закругления углов. Нужно только присоединить файл к своему CSS коду, и скрипт автоматически проанализирует код CSS, чтобы найти значения радиусов в свойствах border-radius.

Синтаксис

Код может выглядеть примерно так:

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

В идеальном случае нужно использовать свойство behavior только в таблицах стилей для IE, применяя такой же селектор в CSS, таким образом скрипт будет получать значения радиусов.

Демонстрация

Так как техника требует использования внешнего HTC файла, то демонстрацию можно посмотреть здесь (страницу по ссылке надо открывать в IE).

Недостатки

• Файл HTC имеет 142 строчки кода (минимизация или архивирование могут помочь, но не снимут проблему полностью)
• Свойство behavior делает ваш CSS недействительным
• Ваш сервер должен иметь возможность загружать файл HTC для использования данной техники
• Похоже, что IE8 имеет ту же проблему при использовании файла HTC с элементами со скругленными углами , которые имеют отрицательные значения свойства  z-index

Тени прямоугольников

Свойство box-shadow является еще одной полезной особенностью CSS3, которая  добавляет элементам натуральную тень. IE не поддерживает свойства box-shadow, но свойство filter предлагает достойную альтернативу.

Нужно отметить, что свойство  box-shadow было удалено из модуля границ и фонов CSS3, таким образом, в CSS3 имеется некоторая неопределенность с его будущим в настоящее время.

Синтаксис

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* для Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* для Safari и Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

В дополнение к свойствам для браузеров WebKit и Mozilla  вы можете установить фильтр, который работает во всех версиях Internet Explorer.

Демонстрация

Недостатки

• Установки фильтра для теней в IE не соответствуют в точности свойству box-shadow. Для достижения одинакового вида нужно будет проводить точные настройки значений, что может быть достаточно серьезной проблемой.
• Свойства фильтра не проходят проверку, как и свойства для WebKit и Mozilla. Таким образом данный недостаток присущ всем браузерам.

Тень текста

Добавление тени к текстовым надписям практикуется в дизайне полиграфии и веб страниц уже на протяжении многих лет. В веб дизайне обычно задача решается с помощью изображений и иногда с помощью дублирования текста со смещением. CSS3 предлагает разработчикам простой способ добавления теней к тексту с помощью простого и гибкого свойства text-shadow.

К сожалению, добавление тени к тексту в Internet Explorer не является таким уж простым процессом — даже с использованием фильтра. Для решения проблемы существует плагин  jQuery, разработанный датским веб дизайнером Kilian Valkhof.

Синтаксис

Сначала в CSS нужно установить свойство text-shadow:

.text-shadow {
	text-shadow: #aaa 1px 1px 1px;
}

Значения задают цвет тени, положение по горизонтальной оси, положение по вертикальной оси и степень размытия.

После подключения библиотеки jQuery и плагина к вашему документу можно вызывать плагин:

// включаем библиотеку jQuery
// включаем плагин

$(document).ready(function(){
	$(".text-shadow").textShadow();
});

Плагин позволяет также использовать параметры для изменения свойств CSS.

Демонстрация

Так как данная техника требует использования библиотеки jQuery и внешнего плагина, вы можете посмотреть демонстрацию здесь.

Недостатки

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

• Для того, чтобы тени выглядели очень похоже во всех браузерах, нужно будет установить специальные настройки только для IE во время разработки страницы
• Требует подключения библиотеки jQuery, то есть дополнительно 61-строки кода
• Версия тени в IE никогда не выглядит также, как и в других браузерах
• При использовании параметров для плагина, которые изменяют установки значений свойства в CSS, плагин работает некорректно, выводя корявые тени
• В отличие от версии CSS3 плагин не поддерживает множественные тени
• По каким-то причинам для того, чтобы все работало в IE8 нужно задать для элемента значение z-index

Градиенты

Создание градиентов для фона является отличной техникой CSS3, которая помогает сохранить время разработки. Хотя Internet Explorer не поддерживает градиенты CSS3, очень легко реализовать их с помощью определенного синтаксиса.

Синтаксис

Для определения градиента, который будет выглядеть одинаково во всех браузерах, включая все версии Internet Explorer, нужно использовать следующий код CSS (две последних строчки предназначены для IE):

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Для фильтра IE GradientType может иметь значения “1″ (горизонтально) или “0″ (вертикально).

Демонстрация

Недостатки

• Ваш CSS файл не пройдет проверку. Данное утверждение будет верно и для значений для браузеров WebKit и Mozilla
• Другой код нужен для IE8, что увеличивает время разработки
• Градиенты WebKit и Mozilla позволяют объявлять “стоп”, что не возможно для градиента IEы
• Фильтр IE не может определять "радиальный" градиент, который поддерживается в WebKit и Mozilla
• Для того, чтобы градиент был видимым в IE, элемент должен иметь шаблон (то есть для него должны быть установлены свойства, определяющие его графические параметры, например, высота и ширина )

Прозрачные цвета фона (RGBA)

CSS3 имеет еще один метод использования прозрачности, который затрагивает альфа канал для заданного цвета фона. Internet Explorer не поддерживает данное свойство, но его можно воспроизвести.

Синтаксис

Для совместимых с CSS3 браузеров синтаксис для установки альфа канала цвета фона выглядит следующим образом:

#rgba p {
	background: rgba(98, 135, 167, .4);
}

Правило CSS устанавливает для цвета фона значения RGB и дополнительно изменяет значение альфа на 0.4 . Для имитации в Internet Explorer можно использовать фильтр для создания градиента с одинаковыми начальным и конечным цветами, которые соответствуют значению прозрачности. Такое свойство может быть включено в таблицу стилей только для IE, которая будет аннулировать предыдущие установки.

#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Градиент выглядит одинаково в IE ид других браузерах, дублируя эффект прозрачности RGBA.\

Демонстрация

Первый пример работает в браузерах, которые поддерживают RGBA, а второй работает только в Internet Explorer:

Недостатки

• Свойство filter не проходит проверку
• Требуется дополнительная строка CSS для IE
• Элемент должен иметь шаблон

Составные фоны

Данная техника CSS может найти много практических применений, когда получит широкое распространение. В настоящий момент IE и Opera не поддерживают составные фоны. Интересный факт -  IE версии 5.5 имел возможность использовать составные фоны для одного и того же элемента с помощью фильтра.

Синтаксис

В Firefox, Safari, и Chrome для использования составных фонов служит следующее правило CSS:

#multi-bg {
	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

Для использования двух фонов на одном элементе в IE служит следующее правило:

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* только IE8 */
}

Демонстрация

Ниже приведенный элемент имеет составной фон, который выводится в Chrome, Safari и Firefox (в IE ничего не видно):

Ниже приведенный элемент имеет составной фон, который выводится в IE (в других браузерах выводится только один фон):

Недостатки

• CSS код  не проходит проверку
• Второе изображение, используемое в свойстве  filter , всегда выводится слева вверху и не повторяется. Таким образом метод очень ограничен в использовании
• Для того, чтобы поместить элемент в центр (так как в других браузерах) , нужно создать изображение с дополнительным белым пространством вокруг для имитации центрирования

Вращение элементов (трансформации CSS)

CSS3 имеет набор трансформации и анимаций, которые некоторым могут показаться неуместными для CSS. Тем не менее, существует способ имитации вращения элемента в Internet Explorer? хотя и в ограниченном виде.

Синтаксис

Вращение элемента на 180 градусов (переворот по вертикали):

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

Для такого действия в IE используется фильтр:

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

Параметр вращения может иметь следующие значения 1, 2, 3, или 4. Что соответствует соответствующему повороту на 90, 180, 270, или 360 градусов.

Демонстрация

Ниже приведенный элемент выводит текст вверх ногами с помощью свойства filter . Для более наглядной демонстрации элемент имеет темно серую границу шириной в 3 пикселя снизу. При повороте элемента граница выводится сверху.

Недостатки

• Таблица CSS не пройдет проверку.
• В то время как Mozilla и WebKit позволяют вращать с шагом в1 градус, фильтр IE позволяет использовать только 4 стадии вращения, что ограничивает его гибкость.

Заключение

Хотя IE не поддерживает CSS3, это не значит, что в нем нельзя реализовать подобные свойства.

Помните о том, что когда нужно изменять настройки CSS для IE, или приходится использовать JavaScript, jQuery или файл HTC, следует использовать условное комментирование. Таким образом браузерам не нужно будет делать лишних HTTP запросов.

Во многих случаях лучшим решением при работе с IE будет организация вывода  с ограниченным набором свойств. Выше приведенные методы помогут в том случае, если клиент настаивает на более точном кросс-браузерном воспроизведении своего ресурса.