- PVSM.RU - https://www.pvsm.ru -
Добрый день Уважаемые!
В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.
А именно использование таких нововведений как border-radius, box-shadow, opacity, linear-gradient.
Для каждого свойства я буду приводить табличку с этого сайта [1](не сочтите за рекламу, достаточно наглядно описывается поддержка свойств). Так же буду описывать свои личные наблюдения и к какому решению они меня привели. В основном я использую либо PIE.htc [2](для IE), либо вёрстка эффектов с помощью background'a
Начнём по порядку:
Здесь наглядно видно что свойство практически везде поддерживается. Остаётся решить проблему с FF 3.6 и IE7 — IE8.
Таким образом код получается примерно следующим:
element{
border-radius: 10px;
behavior: url("public/htc/PIE.htc");
}
Поддержка: IE6++, FF8++, GC1++, Opera10.5+, Safary5+
Здесь мы наблюдаем необходимость добавить вендорное свойство -webkit-. Остаётся решить проблему с FF 3.6 и IE7 — IE8.
Код:
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+
Здесь поддерживается везде, кроме наших любимых IE7 и IE8.
Код:
element{
opacity: 0.3;
filter: alpha(opacity=30);
}
Поддержка: IE6++, FF8++, GC1++, Opera10.5+, Safary5+
Достаточно редкое свойство, из-за этого все стараются обойтись без него и использовать background. Но раз идти, то идти до конца. Смотрите:
Я не буду описывать что нужно писать для каждого браузера, приведу сразу код со всеми свойствами. Да, и для 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
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/3569
Ссылки в тексте:
[1] сайта: http://caniuse.com/
[2] PIE.htc: http://css3pie.com/
[3] WebKit: http://ru.wikipedia.org/wiki/WebKit
Нажмите здесь для печати.