Статьи

Используйте CSS3 в IE с куском пирога

Мы все немного порадовались, когда Microsoft объявила о поддержке CSS3 для Internet Explorer 9. Возможно, теперь мы сможем использовать те забавные эффекты, которые поддерживались в других браузерах на протяжении десятилетий в Интернете (пару лет или около того). К сожалению, IE9 все еще недоступен, и, скорее всего, появится в следующем году. Кроме того, он не будет доступен в XP, поэтому большинство пользователей Windows будут в лучшем случае зависать с IE8. Во многих отношениях это не имеет значения. IE будет игнорировать CSS3-селекторы и свойства, которые он не может понять, но если вы будете осторожны, ваш сайт все равно будет работать Это замечательно, пока ваш клиент или начальник не узнает, почему их браузеру не хватает закругленных углов. Вы можете представить разумный и логичный аргумент в пользу совместимости браузера и прогрессивного улучшения, но им все равно. Они заплатили хорошие деньги за закругленные углы, и они хотят их сейчас! Прежде чем вы начнете нарезать фоновые изображения, вам может быть интересно услышать об альтернативном варианте: CSS3 PIE (Progressive Internet Explorer). Это новый проект от Джейсона Джонстона, и он предлагает решение, аналогичное IE7 Шин Дина Эдвардса, в том, что он использует JavaScript для добавления следующих функций CSS3 в IE6, 7 и 8:

  • border-radius
  • box-shadow
  • border-image
  • несколько фоновых изображений
  • Значения цвета RGBA и
  • градиенты

За некоторыми исключениями, нет необходимости изменять существующие свойства CSS3; border-radius: 5px Он также может отслеживать поведение JavaScript, поэтому вы можете использовать такой код:

 var myelement = document.getElementById("myelement");myelement.style.borderRadius = "20px";

Как работает CSS3 PIE?

Загрузите файл PIE.htc и поместите его в свою папку CSS. Обратите внимание, что он должен обслуживаться text/x-componentстраницы « Известные проблемы» ). Затем необходимо добавить свойство поведения к каждому элементу, где требуются эффекты CSS3, для пример:

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

IE загружает скрипт PIE и применяет эффекты, используя собственные фильтры Microsoft или VML для достижения того же результата.

Примечание. Что такое фильтры IE?

Фильтры и переходы были введены в IE4 в 1997 году, но большинство лучших опций появилось в IE5.5 в 2000 году. Фильтры допускают эффекты, которые только начинают встречаться в CSS3. Вы видите: IE не так уж и плох, и Microsoft может быть новаторской! К сожалению, фильтры были взломаны, хорошо себя вели только иногда и использовали ужасный код, например:

 filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,Direction=45);

Фильтры никогда не стали стандартом W3C, и лишь немногие разработчики использовали их.

Следует помнить, что CSS3 PIE вряд ли будет жизнеспособным решением в любой ситуации, и, как бета-версия продукта, могут возникнуть проблемы. Тем не менее, это отличный вариант для веб-разработчиков, которые хотят принять CSS3, не пренебрегая своими пользователями IE. Вы пробовали CSS3 PIE ? Это полезно, или вы бы предпочли, чтобы эффекты были скрыты в IE8 и более ранних версиях?