Pull to refresh

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

Reading time 2 min
Views 26K
image
Добрый день Уважаемые!

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

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

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

Border-radius


image
Здесь наглядно видно что свойство практически везде поддерживается. Остаётся решить проблему с 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


image
Здесь мы наблюдаем необходимость добавить вендорное свойство -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


image
Здесь поддерживается везде, кроме наших любимых IE7 и IE8.
  • Проблему решим с помощью достаточно ресурсоёмкого filter'a


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

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

Linear-gradient


Достаточно редкое свойство, из-за этого все стараются обойтись без него и использовать background. Но раз идти, то идти до конца. Смотрите:
image
Я не буду описывать что нужно писать для каждого браузера, приведу сразу код со всеми свойствами. Да, и для 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:
Hubs:
+27
Comments 77
Comments Comments 77

Articles