systemiv Mar 14 2012 at 18:20

Кроссбраузерные CSS

2 min

25K

Добрый день Уважаемые!

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

А именно использование таких нововведений как border-radius, box-shadow, opacity, linear-gradient.

Для каждого свойства я буду приводить табличку с этого сайта(не сочтите за рекламу, достаточно наглядно описывается поддержка свойств). Так же буду описывать свои личные наблюдения и к какому решению они меня привели. В основном я использую либо PIE.htc(для IE), либо вёрстка эффектов с помощью background'a
Начнём по порядку:

Border-radius

Здесь наглядно видно что свойство практически везде поддерживается. Остаётся решить проблему с FF 3.6 и IE7 — IE8.

FF 3.6: в 2012 году я считаю что этот браузер можно отнести к динозаврам, и не обязательно писать из-за него вендорное свойство для Mozilla. На крайний случай я думаю что он может жить и с квадратными уголками.
IE: эта проблема легко решается с помощью PIE.htc

Таким образом код получается примерно следующим:

element{
    border-radius: 10px;
    behavior: url("public/htc/PIE.htc");
}

Поддержка: IE6++, FF4++, GC1++, Opera10.5+, Safari5+

Box-shadow

Здесь мы наблюдаем необходимость добавить вендорное свойство -webkit-. Остаётся решить проблему с FF 3.6 и IE7 — IE4.

Всё тоже самое что и в предыдущем свойстве, только нужно добавить поддержку для движка WebKit

Код:

element{
    box-shadow: 5px 5px 10px #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    behavior: url("public/htc/PIE.htc");
}

Поддержка: IE6++, FF4++, GC1++, Opera10.5+, Safari5+

Opacity

Здесь поддерживается везде, кроме наших любимых IE7 и IE8.

Проблему решим с помощью достаточно ресурсоёмкого filter'a

Код:

element{
    opacity: 0.3;
    filter: alpha(opacity=30);
}

Поддержка: IE6++, FF3.6++, GC1++, Opera10.5+, Safari5+

Linear-gradient

Достаточно редкое свойство, из-за этого все стараются обойтись без него и использовать background. Но раз идти, то идти до конца. Смотрите:

Я не буду описывать что нужно писать для каждого браузера, приведу сразу код со всеми свойствами. Да, и для IE мы снова подключаем PIE.htc

Код:

element{   
    background-color: #F07575;
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55));   
    background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);   
    background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);   
    background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);   
    background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55);   
    background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55);
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE);
}

Поддержка: IE6++, FF3.6++, GC1++, Opera10.5+, Safari5+

Вот такое объёмное свойство.
В принципе это всё что я хотел донести. Но хочется ещё сказать слово о ресурсоёмкости в IE. Да, применение PIE и фильтров это достаточно громоздкие операции, и применять их следует только в тех случаях, когда другого выхода нет. Лично я их применяю когда знаю что контент явно будет тянуться и изменятся и обычным background'om градиента проблему не решить, а кто то старается шагать в ногу со временем. В любом случае это Ваш выбор.
Для начала советую обусловить это со своим руководителем, и обозначить некие границы, которые позволят Вам применять ту или иную технику.

Спасибо за Внимание!

Tags:

html css

Hubs: