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

в 14:20, , рубрики: css, html

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++, FF8++, GC1++, Opera10.5+, Safary5+

Box-shadow

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

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

Код:

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

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

Opacity

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

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

Код:

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

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

Linear-gradient

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

Код:

element{
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FDCF2), to(#D0EEF9));
    background: -moz-linear-gradient(#9FDCF2, #D0EEF9);
    background: linear-gradient(#9FDCF2, #D0EEF9);
    -pie-background: linear-gradient(#9FDCF2, #D0EEF9);
    background: -ms-linear-gradient(top, #444444 0%, #999999 100%);
}

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

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

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

Автор: systemiv

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js