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

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

Логотипы Internet Explorer

Но разработчики сталкиваются с тем, что клиенты настаивают на использовании кросс-браузерных решений с использованием расширенных возможностей 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" для других браузеров). Установки прозрачности наследуются элементами потомками, что может сбивать с толку при работе.

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

Данный элемент имеет синиий цвет фона (#0000FF), но с прозрачностью 40%, что делает его голубым при выводе

Тот же элемент без установок прозрачности.

Недостатки

  • Свойство 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.

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

Данный элемент имеет тень, которая выводится и в 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″ (вертикально).

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

Данный элемент имеет линейный градиент, который действует в Internet Explorer.

Недостатки

  • Ваш 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:

Данный параграф имеет фоновый цвет с прозрачностью 40%, заданный с помощью  RGBA


Параграф использует фильтр IE для имитации прозрачности RGBA (работает только  в  IE).

Недостатки

  • Свойство 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 пикселя снизу. При повороте элемента граница выводится сверху.

Данный элемент перевернут на  180 градусов.

Недостатки

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

Заключение

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

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
Перевел: Сергей Фастунов
Урок создан: 4 Октября 2010
Просмотров: 79315
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 5 Октября 2010 22:51
    Олександр
    Очень полезная инфа
  • 5 Октября 2010 23:12
    НеБот
    Круто!!! Спасибо!
  • 6 Октября 2010 00:02
    Vladimir
    Для border-radius, box-shadow и linear-gradient в IE6-8 есть еще http://css3pie.com/
  • 6 Октября 2010 12:05
    Dicky_forester
    добавлю в закладки!
  • 6 Октября 2010 12:21
    Денис
    Спасибо! быстро однако работаете, за 2 дня молодцы так держать.
  • 6 Октября 2010 12:42
    Debisheff
    работает только в Firefox IE, Chrome и Opera не очень каряво
  • 7 Октября 2010 18:01
    alex_X
    [quote]К сожалению, добавление тени к тексту в Internet Explorer не является таким уж простым процессом — даже с использованием фильтра. Для решения проблемы существует плагин jQuery, разработанный датским веб дизайнером Kilian Valkhof.[/quote] Да не работает это даже в IE8! [quote]посмотреть демонстрацию здесь. http: //www.impressivewebs.com/css3 - text-shadow-in-internet - explorer/[/quote] Win7, IE8 захожу - не работает!!! Нет тени!
  • 7 Октября 2010 19:20
    Erema
    Даже демоверсия по скруглению углов не работает ни в одном IE В чем причина?
  • 9 Октября 2010 13:02
    rubyx
    я про тоже. на IE сайт квадратный, жаловатся не сюда надо а на создателя IE браузеров, типа он не успевает за новой технологией или просто игнорирует её. :)
  • 9 Октября 2010 22:03
    alex_X
    Из моей практики 70-80% моих клиентов и знакомых, пока им не расскажешь о FireFox или Opera пользуют IE. Даже после моих убеждений из этих 80% слезают с IE только каждый третий... Билл постарался сделать так, что по умолчанию грузится только IE, что не надо думать, раз и в интернете, зачем им голову морочить? А, сайтец то заточен под Mozilla, и смотрится в IE не гуд, и тут же реакция - ФФ-у-У! И что, ходить и объяснять? Как решить проблему?
  • 9 Октября 2010 22:12
    alex_X
    Мне один говорит: "А, я хочу, чтобы здесь были буковки, как на уличной рекламе, с тенью типа, ", а сам сидит упорно на мелкомягком - он так привык, понимаете-ли.... И приходится эти буковки делать средствами CSS2 с абсолютным позиционированием, при этом куча заморочек цепляется, и все как снежный ком... ну это уже долго объяснять....
  • 14 Октября 2010 23:47
    Tixen
    А на что код [if IE]? ИМХО, проще создать два файла стилей: для ишака и для нормальных браузеров.
  • 16 Октября 2010 15:21
    alex_X
    мне кажется, цель данного урока уйти от двух файлов ССS и вот этого [if IE], ан.. не получается...
  • 5 Ноября 2010 00:50
    Грачья
    Отличная статья полезная. А идти объяснять не нужно. Надо написать в сайте системные требование или что то похоже: IE фу-фу, CSS 3 гуд Firefox и Safari гуд. Конечно это так для смешно все это нужно писать по серьезнее.
  • 5 Января 2011 15:28
    maksmib
    AlphaImageLoader по-умолчанию размещает картинку слева. Как ее можно выровнять по другому ?
  • 9 Сентября 2011 11:57
    bjikbjik
    Есть проблема, помогите пожалуйста, как сделать в IE градиент с закругленнымы углами? Либо работает градиент, либо углы.
  • 26 Сентября 2012 12:08
    Александра Голубева
    Подскажите, есть ли такая функция как "filter alpha" для других браузеров? Не хочу затачивать сайт только под ИЕ принципиально.
  • 13 Марта 2013 09:59
    ipssh
    прошу помогите сделать этот слайд http://ruseller.com/lessons.php?rub_id=2&id=1475 работающим в IE и Opera. Хорошие новjсти если удобно отправьте на ipssh@mail.ru
  • 19 Июня 2013 02:16
    Mazure
    Ребят, прошу очень помочь с данными свойствами для IE8 , может кто-то поподробнее объяснить как нужно их применять, потому что попробовал прописать в css файле сайта , проверил в ietester и ничего собственно не произошло..., напишите пожалуйста на почту, буду очень благодарен: mazur417@gmail.com
  • 3 Октября 2013 16:35
    Инь_Ян
    сделала все по уроку но скругленные края не работают:
    #leftTextBox{	height: 35%;
    font-size: 1.1em;
    background-color: #62C3D0;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    border: 1px solid #009EE3;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    behavior: url(border-radius.htc);
    position:relative;
    }
  • 19 Февраля 2014 23:57
    AsadPlay
    Спосиба Очень помог
^ Наверх ^