Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

CSS3 решения для Internet Explorer Категория: Веб-мастерство
Название: CSS3 решения для Internet Explorer
Дата добавления: 23-10-2012
Раз просмотрено: 624
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

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

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

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

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

Обратите внимание, что CSS3 свойства в примерах даны без вендорных префиксов для краткости и понятности, но не забывайте использовать все необходимые префиксы, при воплощении какого-либо способа в вашем рабочем проекте.

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

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

Синтаксис

#id {
	opacity: 0.4; /* Другие браузеры и IE9+ */
	filter: alpha(opacity=40); /* IE6+ */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* Только IE8 */
}

На самом деле, вам нужна только вторая линия, которая работает во всех версиях Internet Explorer. Но если по какой-то причине вам нужна прозрачность, которая применяется только в Internet Explorer 8, но не в его 6 или 7 версии, то вы можете использовать последнюю строку. Третья строка — это просто еще один способ сделать то же самое, но при помощи более запутанного синтаксиса.

Значение в конце каждой строки кода работает почти так же, как и в свойстве opacity, принимая число от 0 до 100 (свойство opacity принимает двузначное число от 0 до 1, таким образом «44» для фильтров Internet Explorer будет «0.44» для этого свойства). Кроме того, как многие уже убедились на опыте, при использовании прозрачности элементов, она будет унаследована всеми дочерними элементами.

Недостатки

Закругленные углы

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

К счастью, для решения этой проблемы было создано очень эффективное решение. Remiz Rahnas из HTML Remix создал HTC файл, который называется CSS Curved Corner, который можно загрузить с Google Code. Самое замечательное в этом решении является то, что оно не требует каких-либо дополнительных изменений, если вы регулируете радиус скругления углов. Вы просто подключаете этот файл в ваш CSS код, и скрипт будет автоматически анализировать его.

Синтаксис

#id {
	border-radius: 10px;
	behavior: url(border-radius.htc);
}

Все это работает довольно просто, как показано выше. В идеале, однако, лучше применять свойство behavior в отдельно таблице стилей специально для Internet Explorer.

Недостатки

Тень контейнера

Свойство box-shadow является еще одной полезной функцией CSS3, которая добавляет тень к контейнеру. Она даже может иметь закругленные края, если к элементу применено свойство border-radius. Internet Explorer не поддерживает это свойство, но у него есть фильтр, который предлагает похожее решение. Следует отметить, что свойство box-shadow было удалено из модуля CSS3 Backgrounds and Borders, так что его будущее в CSS3 кажется немного неясным.

Синтаксис

#id {
	box-shadow: 2px 2px 3px #969696;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

Недостатки

Тень текста

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

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

Синтаксис

Во-первых, в вашем CSS, вы должны установить свойство text-shadow и его параметры:

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

Эти значения задают цвет тени, положение по горизонтальной оси, положение по вертикальной оси, и степень размытия. После подключения библиотеки jQuery и нужного плагина в ваш документ, вы можете вызвать его с помощью такого кода:

// Подключите jQuery к странице
// Подключите плагин к странице

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

Несмотря на то, что существует другой, кросс-браузерный jQuery плагин, который также реализует возможности теней для текста, рекомендуется использовать плагин, рассмотренный выше, так как он использует значения, взятые из вашего CSS, а для другого плагина вам понадобится вручную вводить эти значения.

Недостатки

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

Градиенты

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

Синтаксис

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

#gradient {
	background-image: linear-gradient(top, #81a8cb, #4477a1);
	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 */
}

Для фильтров Internet Explorer, GradientType может быть установлен, как «1» (горизонтальный) или «0» (вертикальный).

Недостатки

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

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

Синтаксис

Вот синтаксис для установки альфа-канала, как фона элемента в браузерах, поддерживающих CSS3:

#rgba {
	background: rgba(98, 135, 167, 0.4);
}

С помощью указанного выше CSS кода, цвет фона будет установлен в заданные RGB значения, а также будет задана опциональная альфа-прозрачность значение в 0.4 единицы, что соответствует 40%. Для имитации этого эффекта в Internet Explorer, вы можете использовать проприетарное свойство фильтра для создания градиента с одинаковым начальным и конечным цветом, вместе со значением альфа-прозрачности. Это будет включено в таблицу стилей, предназначенную только для Internet Explorer.

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

Этот «градиент» будет выглядеть точно так же, как в Internet Explorer, так и в других браузерах, полностью дублируя эффект прозрачности RGBA.

Недостатки

Также, для достижения этого эффекта можно использовать метод с PNG изображением, но он работает только Internet Explorer версий 7 и 8, а для 6 версии требуется PNG-хак. Метод PNG является альтернативным вариантом, но является более проблемным и имеет больше недостатков.

Несколько фонов

Это другая CSS3 техника, которая, когда станет широко поддерживаемой, может оказаться очень практичным дополнением в CSS. В настоящее время, Internet Explorer и Опера являются единственными браузерами, которые не поддерживают эту функцию. Но вот что интересно, в Internet Explorer еще 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;
}

Чтобы применить два фона у одного и того же элемента в Internet Explorer, используйте следующие свойства в стилях для Internet Explorer:

#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 Tranformations)

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

Синтаксис

Чтобы повернуть элемент на 180 градусов (то есть, чтобы перевернуть его вертикально), вам необходимо это CSS3 решение:

#rotate {
	transform: rotate(180deg);
}

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

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

Значение для вращения может быть 1, 2, 3 или 4. Эти цифры составляют 90, 180, 270 или 360 градусов соответственно. Однако существует довольно сложный метод создания таких же гибких поворотов, как и в CSS3 свойстве. Этот метод реализован в проекте Пола Айриша «CSS3, Please».

Недостатки

Заключение

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

Так же, не забывайте, что если вы используете дополнительный JavaScript, jQuery, или HTC файлы, убедитесь, что они подключаются с использованием условных комментариев для Internet Explorer. Это будет гарантировать, что другие браузеры не будут осуществлять ненужные HTTP-запросы. Однако, в итоге можно сказать, что эти решения обеспечивают несколько вариантов для создания аналогичных свойств CSS3 в Internet Explorer, когда клиент хочет более точной кросс-браузерной поддержки.

Это интересно: «Необычные горизонтальные линии».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.