Кроссбраузерный 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, так как у многих веб-мастеров возникает с этим большая проблема.

---