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

заголовок>

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

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

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

Opacity/Transparency

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

Синтаксис

  #myElement {opacity: .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. Но если по какой-то причине вам нужно, чтобы параметр непрозрачности применялся только к IE8, а не к IE6/7, вы можете использовать последнюю строку, которую более старые версии не распознают. Третья строка — это просто еще один способ сделать то же самое, но с более запутанным синтаксисом.

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

Вы также можете быть заинтересованы в следующих связанных сообщениях:

  • Различия CSS в Internet Explorer 6, 7 и 8
  • Принципы кросс-браузерного кодирования CSS
  • Использование CSS3: старые браузеры и общие соображения
  • Как поддерживать Internet Explorer и при этом оставаться на переднем крае

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

Этот элемент имеет сплошной синий цвет фона (# 0000FF), но на 60% прозрачен, поэтому он выглядит светло-голубым во всех браузерах

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

Недостатки

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

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

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

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

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

Синтаксис

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

  .box-radius {border-radius: 15px;  поведение: url (border-radius.htc);}  

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

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

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

Недостатки

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

Box Shadow

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

Следует отметить, что поле -shadow было удалено из модуля CSS3 Backgrounds and Borders, поэтому его будущее в 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 не соответствуют параметрам других проприетарных свойств , поэтому для того, чтобы он выглядел одинаково, вы должны возиться со значениями, пока не получите их правильно, что может вызвать проблемы с обслуживанием.
  • Свойство filter не проверяется, но и WebKit и Mozilla, поэтому это недостаток всех браузеров.

Text Shadow

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

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

Синтаксис

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

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

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

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

 //включить библиотеку jQuery в ваш  page//включить ссылку на плагин на вашей странице $ (document) .ready (function () {$ (". text-shadow"). textShadow ();});  

Плагин также позволяет использовать параметры для переопределения CSS. Более подробную информацию о параметрах см. На исходной веб-странице автора плагина.

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

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

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

Недостатки

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

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

Gradients

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

Синтаксис

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

  #gradient {background-  изображение: -moz-linear-gradient (вверху, # 81a8cb, # 4477a1); /* Firefox 3.6 */background-image: -webkit-gradient (линейный, левый нижний, левый верхний, цветовой стоп (0, # 4477a1), цветовой стоп (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.

Недостатки

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

  • Ваш 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 плюс необязательное значение «альфа» «.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).

В этом абзаце есть фильтр только для IE, применяемый для имитации прозрачности RGBA (работает только в IE).

Недостатки

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

strong> Примечание. Первоначально я использовал метод изображения PNG для достижения этого эффекта, но, очевидно, он работал только частично в IE7 и IE8 и требовал взлома PNG для IE6, поэтому я попробовал метод, данный Лиамом. и Матиас в комментариях, и это, кажется, работает лучше. Другой вариант — это метод PNG, но он кажется более проблематичным и имеет больше недостатков.

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

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

Синтаксис

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

Чтобы использовать несколько фонов в Firefox, Safari и Chrome, вот CSS:

  # multi-bg {background: url (images/bg-image-1.gif) center center no-repeat, url (images/bg-image-2.gif) верхний левый повтор;  }  

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

  #  multi-bg {background: transparent url (images/bg-image-1.gif) верхний левый повтор;  фильтр: 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 , Firefox и Safari (вы ничего не увидите в IE):

В следующем поле показано несколько фонов в Internet Explorer 6-8 (в других браузерах вы увидите только один фон) :

Недостатки

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

Вращение элемента (преобразования CSS)

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

Синтаксис

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

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

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

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

Этот элемент повернут на 180 градусов в Internet Explorer.

Недостатки

  • Ваш CSS не будет проверяться, хотя это также верно для кода WebKit и Mozilla.
  • Хотя код Mozilla и WebKit позволяет изменять поворот на один градус, фильтр IE допускает только 4 этапа поворота, что минимизирует его гибкость.

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

Заключение

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

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

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

Оцените статью
techsly.ru
Добавить комментарий