Кроссбраузерный CSS3, или как бороться с Internet Explorer
ГлавнаяСтатьиКроссбраузерный 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
Selectivizr используется для обработки CSS3 селекторов. Он используется в сочетании с JavaScript библиотеками, таких как jQuery или Mootools. Я рекомендую выбирают Mootools так как она поддерживает все функции Selectivizr (CSS селекторы).
В этом примере, я буду использовать Google-хостинг с библиотекой Mootools, чтобы сделать это, я просто вставлю необходимый код в head:
Мы, так же, можем использовать jQuery чтобы получить альтернативу CSS3 text-shadow. Все что нам необходимо — это загрузить jQuery text-shadow plugin, и подключить его вместе с jQuery:
Отлично, теперь можно приступать к решениям проблем кроссбраузести CSS3.
СКРУГЛЕННЫЕ УГЛЫ (BORDER-RADIUS)
Скругление углов — это, наверное, самое лучшее что дало нам CSS3. К счастью его можно использовать и не бояться не правильного отображения в Internet Explorer. В этом нам поможет CSS3PIE.
.box {
border-radius: 10px;
behavior: url(PIE.htc);
}
Как вы можете убедиться, нам просто необходимо “вызвать” PIE скрипт, после свойства border-radius.
ТЕНЬ БЛОЧНЫХ ЭЛЕМЕНТОВ (BOX-SHADOW) & RGBA ЦВЕТА
Точно так же как и с border-radius, для поддержки Internet Explorer скругленных углов, просто необходимо подключить PIE скрипт. Помните так же, что мы можем использовать RGBA значения.
.box {
box-shadow: 5px5px5pxrgba(0, 0, 0, .75);
behavior: url(PIE.htc);
}
Вы так же можете использовать RGBA цвета когда прописываете свойства «background-color».
ДВОЙНОЙ ФОН
И опять же мы используем -pie- префикс:
.box {
background: url(img/flash.png) 20px20pxno-repeat, url(img/airplane.png) 90px50pxno-repeat, #00BFF3; /* Modern Browsers */
Настало время использования Selectivizr. Подключаем JavaScript как было показано выше, и все CSS3 селекторы будут доступны для IE6+!
table tr:first-child {
background: #252525;
}
table tr:nth-child(2n+1) {
background: #ebebeb;
}
ТЕНЬ ТЕКСТА (TEXT-SHADOW)
Кроссбраузерность этого свойства может быть легко достигнута при помощи библиотеки jQuery. После того как мы ее подключили, просто вызываем функцию «textShadow()» , для необходимого селектора:
<script type="text/javascript">
$(document).ready(function(){
$(".txt").textShadow();
})
</script>
Для полного эффекта, просто добавьте «text-shadow» к вашим CSS стилям.
.txt {
text-shadow: 2px2px2pxblack;
}
IE ФИЛЬТРЫ
Для замены некоторых CSS3 правил вы так же можете использовать IE фильтры. Вот вам пример для фонового градиента:
Следующее свойство, эквивалентно правилу «transform». Но его синтаксис на столько сложен, что я советую использовать специальный генератор чтобы высчитать нужное значение.
Как вы видите, мы можем использовать CSS3 свойства и селекторы не боясь таких браузеров как Internet Explorer. Надеюсь данная статья была вам полезна и вы найдете применения полученными вами знаниям на деле. В следующей статье я расскажу вам как интегрировать CSS3PIE в Joomla, так как у многих веб-мастеров возникает с этим большая проблема.
Находясь на этом сайте вы даете свое согласие на использование файлов Cookie и подтверждаете, что ознакомились и согласны с
политикой конфиденциальности
.
Соглашаюсь
Остались вопросы?
Заполните форму ниже, и я обязательно свяжусь с вами в ближайшее время.