Главная > Браузеры, CSS/Style Sheets > CSS3 решения для Internet Explorer

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


26 мая 2010, 19:05. Разместил: Mysterious Master
CSS3 – это, наверное, самая горячая тенденция в веб-дизайне на сегодняшний день, которая позволяет дизайнерам встраивать различные элементы и решения в свои проекты посредством простенького CSS и избегая применения несемантической разметки, дополнительных изображений, и сложных элементов javascript.
К несчастью, ни для кого не секрет, что Internet Explorer (даже самые свежие версии) до сих пор не поддерживает большую часть функций, которые включает в себя CSS3.

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

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

Но бывают случаи, когда заказчик настаивает на том, чтобы в проекте присутствовали кросс-браузерные решения, которые бы работали даже в IE6. Для таких случаев мы собрали подборку опций, которыми разработчики могут воспользоваться именно в тех случаях, когда требуется внедрить CSS3, но и тем временем сохранить функциональность в браузерах без поддержки (IE6, 7 и 8).

Opacity (Уровень плотности/Прозрачность)

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

Синтаксис

#myElement {
    opacity: .4; /* other browsers */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

Вам нужна, по сути, только вторая линия, которая работает во всех трех версиях Internet Explorer. Но если по каким-то причинам вам требуется применить эту функцию только в 8-й версии IE (не в 6 и 7), то вы можете применить только третью строку, которая не работает в более ранних версиях.

Значение прозрачности на конце строчки для каждого браузера работает по тому же принципу, что и значения уровня плотности, от 0 до 100 (правда, значение уровня плотности выставляется двумя цифрами от 0 до 1). Также следует отметить, что значения уровня прозрачности (даже при стандартном способе) будут наследоваться всеми дочерними элементами, так как для них не существует отдельных параметров настроек.

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

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

Побочные эффекты

* Параметры фильтра относятся только к Microsoft, так что ваш код CSS нельзя считать валидным
* Что касается значения уровня прозрачности, то в фильтре для Internet Explorer все дочерние элементы наследуют параметры.

Border-radius (Закругленные углы)

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

К счастью, существует как минимум одно решение, которое можно применить к разметке IE. Ремиз Ранас из HTML Remix создал HTC-файл под названием CSS Curved Corner, который можно скачать на Google Code.

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

Синтаксис

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

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

Оно работает довольно просто, как показано выше. Хотя, в идеале вы можете применить значение только в CSS для IE, используя тот же селектор в вашем CSS так, чтобы код понимал, откуда брать значение радиуса.

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

Так как этот способ требует отдельного файла HTC, вы можете посмотреть демо здесь.

Побочные эффекты

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

Box Shadow (Тень блоков)

Параметр box-shadow – это еще одна CSS3-функция, которая позволяет применить искривленные тени к элементам, которые используют параметры border-radius. IE не поддерживает box-shadow, но существует фильтр, который примерно заменяет эту функцию.

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

Синтаксис

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

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

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

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

Побочные эффекты

* Параметры для фильтра тени IE не совпадают с другими параметрами, так что, для того, чтобы приблизиться к такому эффекту, вам придется покопаться в значениях, чтобы прийти к нужному результату.
* Параметры фильтра не валидны, но и параметры браузеров семейств WebKit и Mozilla тоже, так что вряд ли вы столкнетесь с внешним несоответствием во всех браузерах.

Text Shadow (Тень текста)

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

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

Синтаксис

Для начала, в вашем CSS нужно выставить значение text-shadow:

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

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

После того, как вы внедрите библиотеку jQuery в документ, вы можете запустить плагин посредством jQuery:

// include jQuery library in your page
// include link to plugin in your page

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

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

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

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

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

Побочные эффекты

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

* Для того чтобы тень в IE выглядела так же, как и в других браузерах, вам придется применять различные настройки CSS для IE, что требует временных затрат на разработку и поддержание работы
* Также требуется добавить библиотеку jQuery, и файл плагина, который представляет собой 61 строчку кода (Gzip-сжатие может поспособствовать)
* Тень в IE никогда не будет выглядеть так же, как в других браузерах
* Когда вы применяете заменяющие параметры, плагин иногда генерирует лишнее, что может привести к отпугивающей огромной тени, из-за того, что старые параметры не были изменены
* В отличие от версии CSS3, плагин не поддерживает несколько теней сразу
* По некоторым причинам, ради работы в 8-й версии IE, вам придется задавать значения z-index

Gradients (градиенты)

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

Синтаксис

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

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

Для фильтров IE, GradientType можно выставить на '1' (горизонтальный) или '0' (вертикальный).

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

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

Побочные эффекты

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

* Ваш CSS-код не будет валидным, хотя это также относится к значениям браузеров семейства WebKit и Mozilla
* Для IE8 нужен другой код, что требует временных затрат
* Градиенты в WebKit и Mozilla позволяют объявлять ограничения; чего нельзя отнести к градиентам в IE, что понижает уровень гибкости
* Фильтр IE не позволяет объявлять радиальные градиенты, которые поддерживают браузеры WebKit и Mozilla
* Для того чтобы градиенты были видны в IE, элемент градиента должен иметь шаблон

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

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

Синтаксис

Вот код альфа канала фона для браузеров, совместимых с CSS3:

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

С кодом CSS, предоставленным выше, фоновый цвет будет установлен в RGB-значениях + опциональное значение «alpha» '.4'. Для отображения этого в IE, вы можете воспользоваться соответствующим фильтром для создания градации с теми же значениями начального и конечного цветов, а в поддержку со значением прозрачности. Это должно быть включено только в CSS для IE, который заменит предыдущие параметры.

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

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

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

Первый пример, из представленных ниже, будет работать во всех браузерах, которые поддерживают цвета RGBA. Второй пример будет работать только в IE.

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

Побочные эффекты

* Параметры фильтра не являются валидным кодом CSS
* В CSS-коде для IE требуется дополнительная строка кода
* Элементу нужна разметка

Примечания: Первоначально мы использовали метод с изображением PNG для достижения данного эффекта, но это работало только в IE7-8, а для IE6 требовался специальный хак. Затем мы попробовали другой метод, и поняли, что он работает лучше. Способ с PNG – это еще один способ, но с ним может возникнуть больше проблем, и у него гораздо больше побочных эффектов.

Multiple Backgrounds (Несколько фонов)

Еще один метод CSS3, который внес огромный вклад в развитие CSS. На данный момент эту функцию не поддерживают только Opera и IE. Но интересно то, что IE, вплоть до версии 5.5, поддерживает встраивание нескольких элементов в один элемент посредством фильтра.

Синтаксис

Вы можете продолжать применять хак для IE6, и увидите что изображение отображается дважды, что вам придется решать посредством добавления параметра background: none, а затем применять фильтр. Следуя тому же принципу, IE позволяет использовать 2 изображения в качестве фона одного элемента.

Для того чтобы применять несколько фоновых изображений в 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, используйте следующее в CSS, предназначенном для 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 only */
}

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

Блок, представленный ниже, отображает несколько изображений в Chrome, Firefox и Safari (правда, вы ничего не увидите в IE):

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

Следующий блок отображает несколько изображений в IE6-8 (но в других браузерах вы увидите только одно изображение):

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

Побочные эффекты

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

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

CSS3 предоставляет несколько функций по трансформации и анимации. Также существуют способы вращения элементов в IE, хотя такое и редко встречается.

Синтаксис

Для того чтобы повернуть элемент на 180 градусов (перевернуть вертикально), требуется следующий код CSS3:

#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 градусов перспективного вращения.

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

Элемент, отображенный ниже, отображается в перевернутом состоянии в Internet Explorer, так как он перевернут на 180 градусов посредством параметра фильтра. Для того чтобы продемонстрировать это более наглядно, мы применили 3 пикселя толщины для «нижней» границы, которая теперь отображается вверху элемента.

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

Побочные эффекты

* Ваш код CSS не будет валидным, хотя это касается также кода браузеров из WebKit и Mozilla
* Браузеры Webkit и Mozilla позволяют вам вращать элементы по конкретному градусу, а фильтр для IE имеет только 4 значения, что значительно сокращает гибкость

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

Заключение

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

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

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