Кроссбраузерный CSS3, или как бороться с Internet Explorer

Любой веб-дизайнер или верстальщик знает как CSS3 может облегчить жизнь, ускорить и оптимизировать процесс верстки. Такие свойства как «border-radius», «box-shadow» дают возможность избежать использования лишних картинок и десятков строк кода, что, в свою очередь, ускоряет процесс верстки сайта и увеличивает скорость его загрузки. Используя CSS3 в своих работах я столкнулся с проблемой кроссбраузерности, а именно отображен сайтов в старых браузерох и, конечно же, в Internet Explorer. Сегодня я расскажу вам какими средствами я пользуюсь для достижения кроссбраузерности CSS3, включая Internet Explorer..

Давайте ближе познакомимся с рядом методов которые можно применять для достижения крссбраузерного использования CSS3.

Скачайте скрипты и скопируйте их в одну папку со стилями CSS. Вот список скриптов которые нам понадобятся: CSS3 PIE наш помошник в работе с IE. PIE «учит» Internet Explorer понимать CSS3.В папке CSS3PIE download находятся все необходимые нам файлы. Мы будем использовать файл PIE.htc, и будем обращаться к нему через CSS, по этому необходимо поместить его в ту же папку что и файлы стилей.

Selectivizr используется для обработки CSS3 селекторов. Он используется в сочетании с JavaScript библиотеками, таких как jQuery или Mootools. Я рекомендую выбирают Mootools так как она поддерживает все функции Selectivizr (CSS селекторы).

В этом примере, я буду использовать Google-хостинг с библиотекой Mootools, чтобы сделать это, я просто вставлю необходимый код в head:

<script type="text/javascript" src="selectivizr-min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script>

Мы, так же, можем использовать jQuery чтобы получить альтернативу CSS3 text-shadow. Все что нам необходимо — это загрузить jQuery text-shadow plugin, и подключить его вместе с jQuery: Отлично, теперь можно приступать к решениям проблем кроссбраузести CSS3.


Скругление углов — это, наверное, самое лучшее что дало нам CSS3. К счастью его можно использовать и не бояться не правильного отображения в Internet Explorer. В этом нам поможет CSS3PIE.Как вы можете убедиться, нам просто необходимо “вызвать” PIE скрипт, после свойства border-radius.




Точно так же как и с border-radius, для поддержки Internet Explorer скругленных углов, просто необходимо подключить PIE скрипт. Помните так же, что мы можем использовать RGBA значения.Вы так же можете использовать RGBA цвета когда прописываете свойства «background-color».



И опять же мы используем -pie- префикс:


Последнее свойство CSS3 которое поддерживает PIE — это border-image:

Настало время использования Selectivizr. Подключаем JavaScript как было показано выше, и все CSS3 селекторы будут доступны для IE6+!

Кроссбраузерность этого свойства может быть легко достигнута при помощи библиотеки jQuery. После того как мы ее подключили, просто вызываем функцию «textShadow()» , для необходимого селектора:
Для полного эффекта, просто добавьте «text-shadow» к вашим CSS стилям.



Для замены некоторых CSS3 правил вы так же можете использовать IE фильтры. Вот вам пример для фонового градиента:
Следующее свойство, эквивалентно правилу «transform». Но его синтаксис на столько сложен, что я советую использовать специальный генератор чтобы высчитать нужное значение.





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

---