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

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 градиента проблему не решить, а кто то старается шагать в ногу со временем. В любом случае это Ваш выбор.
Для начала советую обусловить это со своим руководителем, и обозначить некие границы, которые позволят Вам применять ту или иную технику.

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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 77

    +26
    Статью в закладки добавил (на всякий случай), но лично я отказался от применения префиксов, фильтров и разных pie.htc. Юзаешь старый браузер — смотри квадратные углы, никто не виновен.
      +2
      Не всегда можно убедить в этом клиента. Они в основном смотрят на цифры. А тот же IE7 по w3c статистике занимает 19.5 %. Мне удавалось пару раз уговорить заказчика от теней в IE6. Были весомые доводы, и он согласился, в остальных случаях доходило до ужасных вещей, о которых говорить даже стыдно
        +3
        Справедливости ради, нужно заметить что лично я верстаю чаще сайты для русско-язычной аудитории, и тут стастистику стоит смотреть не заморскую, а ближе к нашей (тот же liveinternet), там и доля IE другая.

        Обычно статистика + прайс-лист помогают заказчику более адекватно выставлять требования.
          +2
          А тот же IE7 по w3c статистике занимает 19.5 %.

          Вы за какой год смотрели? 2005?
          По статистике w3c все IE (6+7+8+9) занимают 19.5%, из них IE7 — 2.6 %.

          Такая же ситуация в общем по России согласно статистике LiveInternet и в целом в мире согласно статистики StatCounter (и это учитывая Китай с его повальной IE6фикацией)
          • UFO just landed and posted this here
            • UFO just landed and posted this here
                0
                Вот тут ещё самозванцы утверждают что ie7 – 5.65%: www.w3counter.com/globalstats.php

                PS: Да если и подумать, то откуда бы ie7 быть распространённым: в xp дефолт это ie6, в семёрке — ie8, a виста не с той ноги взлетела чтобы поднять рейтинг IE7 до 19%
                • UFO just landed and posted this here
                    0
                    Безусловно, я лишь принимал в расчёт тех пользователей, которые не обновляются до чего-нибудь более современного чем дефолт.

                    BTW: Какие же новые кнопки на хабре стали няшные, не находите? ^^
                    • UFO just landed and posted this here
                  0
                  Ой, Вы правы. А ведь я знал об этом. Но разве статистика по остальным сайтам не более репрезнтативна?
                  • UFO just landed and posted this here
              0
              Это вы объясните заказчику который смотрит под ие7-8 и недоумевает почему в макете все красиво а на сайте все квадратно.
              В своей работе стараюсь свести применение pie к минимуму и верстаю по-старинке на картинках, тем более есть хорошие рецепты и для круглых уголков и для блоков с тенью. Pie часто тормозит и иногда ведет себя непредсказуемо, добавляя отступы и прочее.
                0
                Это вы объясните заказчику который смотрит под ие7-8 и недоумевает почему в макете все красиво а на сайте все квадратно.


                Именно поэтому, мы стараемся в техзадании заранее оговаривать под что верстается сайт. Часто заказчик даже не обращает на это внимание, так что это может помочь избежать проблем в будущем.
                  +2
                  Объяснял. Бывает что достаточно сказать что у него кривой браузер поэтому сайт выглядит хуже чем на самом деле. В сложных случаях помогает пример-аналогия с чем-нибудь, например, почему в бентли ездить комфортнее чем в жигуле и что в этом случае строители дороги не причем.
                    0
                    Для того и есть кроссбраузерность, что бы страничка отображалась везде одинаково. И если клиент пишет что хочет что бы у него всё гуд работало в IE7, то придётся родить, или вообще тогда не браться
                      0
                      Да не вопрос, в виде исключения можно. Ессно цена верстки будет x3, а в остальном все довольны.
                  0
                  по поводу квадратных углов — немного не согласен. так как в каждом проэкте целевая аудитория разная. И далеко не все опытные пользователи, а UI — это самое главное для пользователя, а в своё время пользователь определяет успешность проэкта
                    0
                    Скорее всего вы хотели сказать, что отказались префиксов для теней и скурглений. Ведь есть много ксс свойств, которые даже в новейших браузерах не работают без префиксов.
                      0
                      Значит эти свойства экспериментальные и пока их использовать рано.
                      Я обычно статус свойств на всякий случай на w3 проверяю.
                    +7
                    добавлю ещё немного
                    1. использовать box-shadow, border-radius и linear-gradient для блоков больших размеров — фатально для ФФ и оперы. так как грузит проц почти на 100% и скролить невозможно.
                    2. от PIE отказался в больших проэктах вовсе, так как много багов, тормозов при анимации. при шкалировании (особенно при исбользовании спрайтов для фона элемента) — вылезают ужасные баги. Для динамически создаваемых элементов вообще приходится подключать pie.js. Так что для ИЕ6-8 я просто делаю всё картинками.
                      0
                      Полностью согласен на счет PIE. На больших проектах практически неприменим, особенно если на страницах много динамического контента и ajax
                      +5
                      Мало свойст охвачено, нет примеров работы, а те, что описаны — боян это все. Только слоупоки не юзают скругление, тени и т.д.
                      Вот тут нормальные примеры и описания, но тоже не все, transform'a нет, например.
                      Вообщем, пост совершенно ни к чему. К тому же с дизой. Вы и в самом деле думаете, что opacity поддерживается только с 11.6 оперы и 16 хрома? Но при этом почему то древний 3.6 фф указан. Зачем вообще писать кучу версий. Итак понятно, что если написано, например, chrome 15+, то это автоматически означет, что 16 и 17 тоже.
                        0
                        Я охватил часто используемые свойства, указав внизу с каких версий они поддерживаются: Chrome 1+; Opera 10.50+
                        В посте стараюсь поделится опытом, а не создать справочник по CSS3.
                          +1
                          Хорошо. Ток я не понял, опытом чего и зачем тогда картинки с дизой, если вы снизу итак указываете корректные данные.
                        –1
                        Как насчет pie.js? как для меня меньше мусора в css и стабильней работает…
                          0
                          Честно говоря, никогда не пробовал, постараюсь обязательно глянуть.
                          –1
                          Очень люблю Linear-gradient, использую его очень часто, пренебрегая IE. Единственное что не нравится это большое количество приставок к свойству под разные браузеры. В хроме их даже две.
                            +1
                            А я использую SASS и меня не напрягает, что в CSS получается по 6 строк на одно свойство. Я пишу @include linear-gradient(value) и получаю кроссбраузерный css.
                              0
                              SASS это всего лишь сахар для css. Он не делает его кроссбраузерным
                                0
                                Кроссбраузерность не заслуга SASS. Однако мой код чист и не пестрит префиксами, а на выходе я получаю кроссбраузерную CSS.
                                  –1
                                  … зависимую от интерпретатора SASS. А за одно лишается основного своего достоинтсва — простоты. В пользу сахарку.
                              • UFO just landed and posted this here
                              0
                              Можно было бы еще упомянуть code.google.com/p/ie7-js/ для исправления CSS-багов в IE6+.
                              Еще замечу, что и PIE.htc, и ie7.js могут работать непредсказуемо на сложных сайтах и в WEB-приложениях.
                                +3
                                SVG + VML решают проблему в старых браузерах, Modernizr разрулиавает кому что, пост закрыт.
                                • UFO just landed and posted this here
                                  +6
                                  В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.
                                  И где это всё?
                                  Поддержка: IE6++, FF8++, GC1++, Opera10.5+, Safary5+
                                  Браузер называется «Safari».
                                    –4
                                    Что значит где? Наверху.
                                    Насчёт браузера спасибо, не заметил ошибку. Исправил.
                                      +3
                                      Я не вижу личных наблюдений и выводов, потому и спрашиваю. В тексте рассказ своими словами сайта «Can I Use» + совет использовать PIE.
                                        –1
                                        Это мой первый пост, и я не хотел лить много воды. Поэтому посчитал что в таком формате как сейчас, будет изложено максимально полезно и для начинающего верстальщика и для верстальщика с опытом, который просто заглянул посмотреть нужные ему свойства.
                                    +2
                                    Простите, но что?! Если мои глаза мне не изменяют, то у вас написано, что border-radius: Firefox 8+.
                                    Тем не менее, без префикса он появился в FF4.
                                    А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.
                                    К слову о градиентах: С ними забавная ситуация, когда внезапно добавилось ключевое слово to. И да, теперь в рамках одного браузера будет минимум два свойства. А в вебките все три, благодаря их проприетарному свойству. А ещё в опере они (Линейные) с 11.10.
                                      –3
                                      С недочетом в FF3.6 огромное спасибо. Поправил.
                                      Насчёт «А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.» не соглашусь. В браузерах на движке webkit (Safari, Chrome, Arora, Konqueror и др.) необходимо указывать свойство градиента именно так, как я его описал.
                                          background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FDCF2), to(#D0EEF9));
                                      
                                        +2
                                        Если не верите мне, то вот. Правильней указывать и то, и это, и другое. А ещё надо указывать fallback color для древних браузеров.
                                          0
                                          Да Вы правы, я посмотрел на непроверенных сайтах, типо этого:
                                          westciv.com/tools/gradients/
                                          Как я понял, синтаксис который я описал более старый(на 1 год), чем ваш
                                          Но всё равно огромное спасибо, сейчас поправлю
                                            0
                                            Хотя подождите, наверху же есть пример для webkit. Присмотритесь
                                      +2
                                      IE: эта проблема легко решается с помощью PIE.htc


                                      К слову говоря, с pie не все так легко решается, кроме того что выскакивают непонятные баги, так еще и ие8 отказывается без pos:relative работать.

                                      Оpacity в большинстве случаев лучше заменять на bg:rgba

                                      Кстати для градиентов есть неплохой генератор

                                        0
                                        Ок. Спасибо огромное за генератор, было бы больше кармы, плюсанул=)
                                        Насчёт opacity, в каких случаях? rgba не поддерживается в IE точно так же как и остальные св-ва.
                                          +1
                                          через фильтр gradient в осле решается это проблема.
                                          Просто в отличие от opacity, полупрозрачность задается не для всего блока (включая и все его содержимое), а только для фона. Это чаще встречаемая задача ;)
                                          0
                                          Люди посмотрите в сторону compass-style.org/, недавно начал его использовать, и теперь, наверно, никогда не буду делать сайт без него. Не вижу никаких причин не использовать его.
                                            0
                                            Простите, Вы наверное не правильно поняли тему поста. Здесь обсуждается кроссбраузерность а не сахар для css
                                              +1
                                              Компас помогает решать проблемы кросбраузерности. Я пишу @include border-radius(3px); вместо border-radius:3px; и компас превращает это в нужные строчки с актуальными префиксами. Более того, если ситуация изменится, и например появится новый префикс, я не буду бешено бегать по css и добавлять его, я просто обновлю компас.

                                              Мой комментарий релевантен теме поста в любом случае :)
                                                –1
                                                Кроссбраузерность — это когда во всех браузерах работает. Добавление вендорных префиксов != кроссбраузерно.
                                                  +1
                                                  Кроссбраузерность — это когда работает в тех браузерах, которые было решено поддерживать на конкретном проекте. Если обобщить, то кросбраузерность — это когда в работает более чем в одном браузере.

                                                  В любом случае добовление префиксов — одна из техник используемая для этого.

                                                  И компас не только префиксы умеет добавлять, а может, например, помочь работать с тем же CSS3 Pie compass-style.org/reference/compass/css3/pie/.
                                                    0
                                                    Категорически не согласен с вами относительно кроссбраузерности. Вероятно, тут просто разное видение :)
                                                    Я считаю, что кроссбраузерность — это одинаковая поддержка популярных в текущий момент браузеров.
                                                    А compass — да, хорошая штука. Сам использую.
                                            0
                                            В последнем примере HEX цвет выбран с юмором.
                                              +1
                                              Хм… простите но по мне статья из разряда «Мне хотелось что-то написать и не важно что оно уже 100500 раз везде обсуждалось». Ну не тянет имхо подобный материал на статью, слабенький очень.
                                                +3
                                                А при чём тут HTML5?

                                                Остаётся решить проблему с FF 3.6 и IE7 — IE4.


                                                С чем?! Не пугайте так, пожалуйста.
                                                  +3
                                                  После того, как прочитал, что вы предлагаете для border-radius не делать отдельное свойство с префиксом -moz, но при этом использовать глючный и тормозящий PIE.htc, я перестал это читать.
                                                  • UFO just landed and posted this here
                                                    • UFO just landed and posted this here
                                                        0
                                                        У меня стоит Small HTTP server, он таких проблем не создаёт. Спасибо за наводку с Apache, самому даже стало интересно
                                                        • UFO just landed and posted this here
                                                            0
                                                            Возможно IE9 переключается в режим совместимости? Проверьте какой режим стоит в обоих случаях.
                                                      • UFO just landed and posted this here
                                                        • UFO just landed and posted this here
                                                        • UFO just landed and posted this here
                                                          • UFO just landed and posted this here
                                                            • UFO just landed and posted this here
                                                              • UFO just landed and posted this here
                                                                  0
                                                                  Это дефолтное поведение начиная с IE8, чтоб зачастую-кривые интранетовские сайты не поломались.
                                                          0
                                                          Это реклама PIE?
                                                          • UFO just landed and posted this here
                                                              0
                                                              Кто-нибудь проверял побочные эффекты от использования PIE.htc? Я помню, в том же ИЕ6 при использовании AlphaImageLoader для прозрачных png тормозилась загрузка сайта, так что проще было использовать PNG8 всюду, где возможно.

                                                              Как-то странно советовать использовать этот скрипт без анализа негативных последствий.
                                                                0
                                                                Как по мне — так использовать можно, но как и другие инструменты — с умом. Использовал в двух проектах, предварительно почитал документацию про known issues — проблем не было. Анимированные и динамические блоки, проблем даже в ие6 не было. Но считаю что пихать его везде и всюду не стоит.
                                                                Создал у себя в LESS mixin:
                                                                .iesupport(){
                                                                 	position: relative;
                                                                	behavior: url(/PIE.htc);
                                                                }
                                                                

                                                                и применял его для некоторых блоков, для которых критичны эти уголки, тенюшки и прочая. Все довольны )
                                                                В общем, либо проектов сложных не было, либо я везунчик, не знаю.
                                                              • UFO just landed and posted this here
                                                                  +1
                                                                  Свойства с префиксами нужно писать ДО базового свойства, сколько раз уже писали.
                                                                    0
                                                                    .box_round {
                                                                    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
                                                                    -moz-border-radius: 12px; /* FF1-3.6 */
                                                                    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

                                                                    /* useful if you don't want a bg color from leaking outside the border: */
                                                                    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
                                                                    }

                                                                    .box_shadow {
                                                                    -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 — 4.2, Android 2.3+ */
                                                                    -moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 — 3.6 */
                                                                    box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
                                                                    }

                                                                    .box_gradient {
                                                                    background-color: #444444;
                                                                    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
                                                                    background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
                                                                    background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
                                                                    background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
                                                                    background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
                                                                    background-image: linear-gradient(to bottom, #444444, #999999);
                                                                    }

                                                                    Only users with full accounts can post comments. Log in, please.