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

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

Опытные разработчики понимаю, что CSS3 постепенно может быть добавлен в новые проекты. Это гарантирует, что содержимое будет доступно, в то время как не поддерживается браузером.

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

НЕПРОЗРАЧНОСТЬ/ТРАНСПАРЕНСИ

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

Синтаксис

#myElement {
	opacity: 0.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. Кроме того, как многие сталкивались при использовании прозрачности (даже при использовании стандартного метода), прозрачность будет наследоваться всеми дочерними элементами, для которых не существует простых способов.

Недостатки

- Свойство filter только бутафория, так что ваш CSS не будет действительным; - Как и в случае с opacity, filter в IE вызывает все дочерние элементы, чтобы наследовать прозрачность.

ЗАКРУГЛЕННЫЕ УГЛЫ

border-radius (чаше всего называют закругленными углами) является еще одним популярным аксессуаром в CSS3. Это свойство позволяет разработчикам не использование JavaScript или дополнительных элементов для достижения этого эффекта. Но опять же, Microsoft не желает сотрудничать, чтобы IE мог использовать это свойство.

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

Синтаксис

Вот, как Ваш код может выглядеть:

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

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

Недостатки

- HTC файл состоит из 142 строчеек; - свойство behavior сделает CSS код не действительным; - сервер должен уметь загружать файлы для HTC и использовать эту технологию; - возникают проблемы в некоторых случаях в IE8, файл HTC оказывает негативное воздействие на значение z-index.

ТЕНЬ КОНТЕЙНЕРА

Свойство box-shadow еще одно полезное, из тех, которые нам предоставляет CSS3. Но, к сожалению, не поддерживается в IE. Возможно заменить свойство box-shadow на filter.

Синтаксис

.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);
}

Недостатки

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

ТЕКСТОВАЯ ТЕНЬ

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

К сожалению, не очень просто добавить тень для текста в Internet Explorer, даже с использованием свойства filter. Чтобы справится с этой проблемой, Kilian Valkhof написал jQuery плагин, с помощью которого возможно добавить тень к тексту в Internet Explorer.

Синтаксис

Во-первых, в своем CSS коде необходимо задать свойство text-shadow.

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

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

Теперь необходимо подключить библиотеку jQuery и плагин к HTML документу. Плагин выглядит следующим образом:

//Подключаем jQuery
//Подключаем плагин
		
$(document).ready(function(){
	$(".text-shadow").textShadow();
});

Использование плагина позволяет создавать тень для текста в IE.

Существует также кросс-браузерный jQuery плагин.

Недостатки

- для того чтобы тени выглядели почти одинаковые, необходимо использовать различные настройки в таблице стилей для IE; - увеличивает количество HTTP запросов при добавлении jQuery и плагина; - в IE тень никогда не будет выглядеть точно также, как в других браузерах; - в отличие от CSS3 плагин не  поддерживает множественные тени; - чтобы заставить его работать в IE8, вы должны задать значение свойства z-index.

ГРАДИЕНТЫ

Еще одно свойство, которое позволяет экономить время, используя CSS3, является создание градиента в качестве фона. Хотя Internet Explorer не поддерживает это свойство, но его довольно легко реализовать с помощью собственного синтаксиса 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 по вертикали.

Недостатки

- необходим другой код для IE8, увеличивается время загрузки страницы; - не возможно ограничить гибкость градиента; - невозможно задавать тип градиента;

ПРОЗРАЧНОСТЬ ФОНОВОГО ЦВЕТА (RGBA)

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

Синтаксис

Для CSS3-совместимых браузеров, представлен синтаксис для установки alpha канала, для фона:

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

С учетом указанного выше CSS кода, цвет фона будет установлен с помощью RGB значений. Чтобы имитировать это в Internet Explorer, Вы можете использовать совместно фильтр, который создает градиент (с теми же начальными и конечными значениями цвета) и значение alpha прозрачности.

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

Недостатки

- создается дополнительная линия в CSS файле для IE; - свойство filter не действительно в CSS.

МНОГОЧИСЛЕННЫЙ ФОН

Это еще один метод CSS3, который при широкой поддержке может оказаться очень практичным дополнением. В настоящее время только 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*/
}

Недостатки

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

ЭЛЕМЕНТ ВРАЩЕНИЯ (CSS TRANFORMATIONS)

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

Синтаксис

Ниже представлен синтаксис, который позволяет поворот на 180 градусов:

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

Чтобы создать точно такой же поворот в Internet Explorer мы будем использовать фильтр:

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

Значение вращения может быть 1, 2, 3 или 4. Эти цифры соответствуют 90, 180, 270, и 360 градусов соответственно.

Недостатки

- код для Mozilla и WebKit позволяет изменять врацение увеличивая даже на 1 градус, а в фильтр для IE позволяет лишь 4 этапа, приводя к минимальной гибкости.

ЗАКЛЮЧЕНИЕ

Помните, что в любое время переопределить первоначальные настройки CSS для IE. Если Вы используете JavaScript JQuery, или файл HTC, убедитесь, что они вызываются только при использовании IE. Это гарантирует, что другие браузеры не будут делать лишних HTTP запросов.

На этом Все! Спасибо за внимание.