Телефон: +38 (093) 914-20-50
WEB-дизайн и создание продающих сайтов

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

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

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

ПЕРВИЧНЫЕ НАСТРОЙКИ
Скачайте скрипты и скопируйте их в одну папку со стилями CSS. Вот список скриптов которые нам понадобятся:
CSS3 PIE
CSS3 PIE наш помошник в работе с IE. PIE «учит» Internet Explorer понимать CSS3.В папке CSS3PIE download находятся все необходимые нам файлы. Мы будем использовать файл PIE.htc, и будем обращаться к нему через CSS, по этому необходимо поместить его в ту же папку что и файлы стилей.

SELECTIVIZR
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
Мы, так же, можем использовать jQuery чтобы получить альтернативу CSS3 text-shadow. Все что нам необходимо — это загрузить jQuery text-shadow plugin, и подключить его вместе с jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textshadow.js"></script>
Отлично, теперь можно приступать к решениям проблем кроссбраузести CSS3.


СКРУГЛЕННЫЕ УГЛЫ (BORDER-RADIUS)
Скругление углов — это, наверное, самое лучшее что дало нам CSS3. К счастью его можно использовать и не бояться не правильного отображения в Internet Explorer. В этом нам поможет CSS3PIE.
.box {
    border-radius: 10px;
    behavior: url(PIE.htc);
}
Как вы можете убедиться, нам просто необходимо “вызвать” PIE скрипт, после свойства border-radius.

border-radius


ТЕНЬ БЛОЧНЫХ ЭЛЕМЕНТОВ (BOX-SHADOW) & RGBA ЦВЕТА
Точно так же как и с border-radius, для поддержки Internet Explorer скругленных углов, просто необходимо подключить PIE скрипт. Помните так же, что мы можем использовать RGBA значения.
.box {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .75);
    behavior: url(PIE.htc);
}
Вы так же можете использовать RGBA цвета когда прописываете свойства «background-color».

border-radius

ДВОЙНОЙ ФОН
И опять же мы используем -pie- префикс:
.box {
    background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* Modern Browsers */
 
    -pie-background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
    behavior: url(PIE.htc);
}
border-radius

ИЗОБРАЖЕНИЯ РАМКИ (BORDER-IMAGE)
Последнее свойство CSS3 которое поддерживает PIE — это border-image:
.box {
    border-image: url(border.png) 27 27 27 27 round round;
 
    behavior: url(PIE.htc);
}


CSS3 СЕЛЕКТОРЫ
Настало время использования Selectivizr. Подключаем JavaScript как было показано выше, и все CSS3 селекторы будут доступны для IE6+!
table tr:first-child {
    background: #252525;
}
 
table tr:nth-child(2n+1) {
    background: #ebebeb;
}
border-radius

ТЕНЬ ТЕКСТА (TEXT-SHADOW)
Кроссбраузерность этого свойства может быть легко достигнута при помощи библиотеки jQuery. После того как мы ее подключили, просто вызываем функцию «textShadow()» , для необходимого селектора:
<script type="text/javascript">
    $(document).ready(function(){
    $(".txt").textShadow();
})
</script>

Для полного эффекта, просто добавьте «text-shadow» к вашим CSS стилям.

.txt {
    text-shadow: 2px 2px 2px black;
}
border-radius

IE ФИЛЬТРЫ
Для замены некоторых CSS3 правил вы так же можете использовать IE фильтры. Вот вам пример для фонового градиента:
.box {
    background: #FFFFFF;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}
border-radius
Следующее свойство, эквивалентно правилу «transform». Но его синтаксис на столько сложен, что я советую использовать специальный генератор чтобы высчитать нужное значение.

.box {
    /* IE8+ - must be on one line, unfortunately */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";
    /* IE6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.9848077530122079,
        M12=-0.17364817766693127,
        M21=0.17364817766693127,
        M22=0.9848077530122079,
        SizingMethod='auto expand');
    margin-left: -14px;
    margin-top: -21px;
}

border-radius

В ЗАВЕРШЕНИИ

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

Переведено с: webdesign.tutsplus.com

Оцените нашу работу
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Skype

Skype: poltorrr

Контакты

+38 (093) 914-20-50
info@poltor.com

Я в соцсетях
Консультация

Бесплатная консультация
Написать мне

© 2017. «Poltor.com». Все права защищены.
Создаем сайты, которые продают!
Остались вопросы?

Заполните форму ниже, и я обязательно свяжусь
с вами в ближайшее время.