Пользователь
0,0
рейтинг
16 февраля 2014 в 14:02

Разработка → Набор кроссбраузерных CSS3 свойств tutorial

Добрый день, союзники!

Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.

Возможно опытным представителям нашей профессии данный пост будет не интересен, но более молодым и неопытным он может пригодиться. От старших товарищей, в свою очередь, хотелось бы получить комментарии, по недочетам, которые, возможно, тут присутствуют, и важным моментам, которые, наоборот, могут тут отсутствовать.



Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.

1. Progressive Internet Explorer или PIE – помогает IE 6+ версии стать более умным, и распознавать CSS3 свойства. Во всяком случае — его декоративную часть. Скачать его можно тут. Из этой библиотеки нам понадобится файл PIE.htc, который необходимо положить в один каталог с файлом стилей, из которого мы потом его будем подключать.
Есть и минусы, данная библиотека сильно нагружает старые браузеры, поэтому использовать ее стоит в крайнем случае и лучше отдавать пользователю упрощенную версию веб-страницы.

2. jQuery.textshadow. — учит все тот же IE ниже 9 версии использовать свойство text-shadow. Для корректной работы необходимо использовать Modernizr и собственно сам jQuery. Так же стоит отметить, что данная библиотека как и PIE сильно нагружает старые браузер, и использовать его лучше в крайних случаях. Тень можно попробовать сделать псевдо-элементами.

3. Selectivizr — js библиотека, которая научит IE 6-8 псевдо-классам, псевдо-элементам и селекторам стандартов CSS 2.1 и CSS 3. Кстати, для его работы также нужно использовать Modernizr, или другую библиотеку. Подробнее здесь.

Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.

Закругленные края или border-radius


.border-radius { 
  border-radius: 	10px;
  background-clip:         padding-box;
  behavior: url(PIE.htc);
}

Свойство
background-clip: padding-box; 
исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.

Строка
behavior: url(PIE.htc); 
подключает наш PIE файл, для поддержки данного свойства IE.

Тень блока или box-shadow


.box-shadow{
	box-shadow: 		3px 3px 4px #444;
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
	behavior: url(PIE.htc);
}

Свойства
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
используются для IE.

Градиент на фоне или background: linear-gradient()


.gradient{
	background-color: #444444;
	background: -webkit-linear-gradient(top, #444444, #999999);
	background:         linear-gradient(to bottom, #444444, #999999);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
	-pie-background: 	linear-gradient(to bottom, #444444, #999999);
    behavior: url(PIE.htc);
}


Двойной задний фон или background: url(), url();


.multiple-background{
	background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat;
    -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat;
    behavior: url(PIE.htc);
}

Современные браузеры, вроде, все понимают, а для IE опять используем PIE.

Картинка вместо обводки или border-image: url();


.border-image{
	-webkit-border-image: url('image.png') 30 round round;
	border-image:         url('image.png') 30 round round;
    behavior: url(PIE.htc);
}

Здесь свойство behavior не будет работать в IE10.

Тень текста или text-shadow


На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.

Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
.text-shadow{
    text-shadow: 1px 1px 3px #000;
}


а затем, c помощью библиотеки, просим необычные браузеры IE нас понять
<script type="text/javascript">
    $(function(){
       $(".text-shadow").textShadow();
    })
</script>

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

Алгоритм расчета ширины и высоты элемента (да, именно такой перевод) или box-sizing


.box-sizing{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует.

Ставим блоки в линию или display: inline-block


Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
.inline-block{
    display: inline-block;
}

Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
.inline-block{
    min-height: 250px;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    _height: 250px;
}

Здесь
    display: -moz-inline-stack;
используется для понимания inline-block старой Mozilla.
Свойство
    vertical-align: top; 
выравнивает все блоки по вертикали по верху. В зависимости от задачи можно и по низу.
И наконец свойства
    zoom: 1;
    *display: inline;
    _height: 250px;

используются для IE. Обратите внимание что в данном случае _height: 250 используется потому, что IE не знает свойства min-height.

Прозрачность или opacity


.opacity{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.

Анимация или transition


.transition {
  -webkit-transition: all 1s ease;
          transition: all 1s ease;
}


Трансформация объектов или transform


.transform{
  -webkit-transform: scale(0.3);
      -ms-transform: scale(0.3);
          transform: scale(0.3);
}

Свойства transition и transform не поддерживаются браузерам IE ниже 9 версии, а transition и вовсе только с 10 версии. Решения для старых IE я пока тоже не нашел.

Размер заднего фона или background-size


.background-size{
    background: url("back.jpg") no-repeat top center;
    -webkit-background-size:  cover;
    background-size:          cover;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='back.jpg', sizingMethod='scale');
}


Селекторы CSS3


Речь идет о таких селекторах как
ul li:fist-child{}

ul li:last-child{}

ul li:nth-child(3){}

input[attr='']{}

a:hover{}

И других полезных селекторах: которые были добавлены в CSS3. Для того, чтобы обеспечить качественную поддержку таких селекторов, мы используем, вышеупомянутую, библиотеку Selectivizr. Чтобы она сработала, необходимо просто подключить ее перед нашим файлом CSS.
Полный список селекторов с которыми работает Selectivizr, можно ознакомиться на официальной страничке , в разделе «How does it work?».

Напоследок, хочется отметить, что я не рассматривал все свойства на кроссбраузерность, а только те, что чаще всего используются в повседневной практике. Надеюсь данный пост может быть Вам, хоть чем-то, полезен!

UPDATE

Обновил свойства border-raduius и opacity. Спасибо pepelsbey за строгое замечание!

UPDATE

Обновил большинство свойств в соответствии с рекомендациями. Спасибо огромное пользователю Aingis за огромную помощь!
Сергей Попов @popovsergey
карма
10,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (53)

  • +15
    IE 6-8

    Хватит уже. Кто их продолжает использовать, тот сам себе враг.
    • –6
      а если 40% вашей аудитории использует IE7 — 8? Мы не можем их бросить!
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Я с вами полностью согласен, даже на фоне вашей волны критики, но тем не менее мне просто хотелось показать возможные варианты использования таких свойств в старых браузерах.
      • +3
        Можем. ИЕ 6-8 уже давно история.
        • –4
          ну я считаю это неверным подходом. Пусть каждый останется при своем мнении
          • 0
            Пока такие как вы поддерживают динозавров, то эти 40% процентов будут существовать…
            • –1
              а Вы, рассматривайте сайт, не как свой развлекательный проект для остальных, а как заработок. Будете и 5 версию поддерживать.
              • 0
                Потратить ресурсы на развитие/раскрутку и получение выгоды или потратить деньги на поддержку старых браузеров… Хмм… сложный выбор
                • 0
                  Возможно, мы с Вами по разному представляем предмет разговора.

                  Для меня это нечто, типа интернет-магазина или форума-блога.
                  Сделал один раз, работает пару лет, до редизайна.
                  Приносит N денег, если мы забили на старые IE или N+20% — если не такие принципиальные.
                  Мне отсутствие «принципов» приносит +1 среднюю зарплату по Уралу.

                  Если это онлайн-игра — наверное, всё по-другому.
                  • +2
                    Онлайн игра работающая в ИЕ 5? Покажите!
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  У меня сложилось впечатление, что Artishok поставит заглушку :)
        • +2
          IE6-7 да, а IE8 ещё жив. И не уверен я что даже end of life WinXP сразу её уничтожит
          • 0
            8-ка жива лишь потому что разработчики продолжают её поддерживать…
            • 0
              Нет. 8-рка жива потому что многие компании, обычно не очень связанные с IT, держат Windows XP и не позволяют установку других программ, в том числе и браузеров. И в ЛУЧШЕМ случае там есть IE8 — последняя версия IE для WinXP.
  • 0
    Взять ваш пример с закругленными уголками: префикс нужны для FF < 4, Chrome < 5, Safari < 5, в Opera и MS (вообще префикс не иcпользовался его сразу включили в поддержку без тестового режима) Отсюда: caniuse.com/#search=border-radius.
    Неужели доля этих версий на вашем портале настолько значимая чтобы тратить на это все ресурсы. ИМХО значение префиксов, а точнее библиотек «решающих эту проблему» несколько преувеличена.
    А касательно конкретно этой статьи это лишь размыливает внимание читателей.
    • 0
      Здесь просто написана максимальная версия, конечно мы все не используем
    • 0
      вы считаете, что префиксы на данный момент уже можно почти не использовать во всех свойствах?
      • НЛО прилетело и опубликовало эту надпись здесь
  • +10
    -moz- и -webkit-border-radius, -khtml-opacity? Вы кажется провели последние три года на необитаемом острове.

    Первое нужно Firefox 3.6 (2010 год) и Safari 4 (2008 год), а второе браузеру, которого не существует.
    • 0
      не спорю, может я конечно переборщил с префиксами, я хотел показать код обеспечивающий максимальную поддержку, -khtml- я кстати включил в последний момент, не проверил
  • +2
    привет, web 2.0 из 2005-го)
  • +2
    Писать вендорные префиксы больше не нужно, сейчас каждый может автоматически их проставить в зависимости от личных преподчтений поддержки браузеров. Речь, конечно же, про autoprefixer.
    А вообще, эмуляция градиентов IE это высшая степень издевательства над пользователями старых IE.
    Плюс, писать невалидный CSS для IE вместе с общим — вот это как раз и есть неправильная практика, этому учить не стоит. Для старых IE всегда должен подключаться отдельный файл.
    • 0
      А вообще, эмуляция градиентов IE это высшая степень издевательства над пользователями старых IE.


      а есть альтернативное решение?

      autoprefixer крутая штука, спасибо, почитаю
      • +1
        Да, называется metro-style :) Ну, и дедовский метод картинками никто не отменял. Умные браузеры картинку не скушают, а сразу отобразят css-градиент.
        • 0
          Ну если у вас весь макет в таких элементах и использовать столько картинок, понятно что его никто не отменял. А плоский стиля да, поддерживаю!
    • –2
      я показал все в одном для наглядности, понятно что они должны идти в разные файлы
      • +3
        Тогда я не понимаю зачем вы учите людей вот этому:

            *display: inline;
            _height: 250px;
        


        Эти свойства надо выносить просто в отдельный CSS без хаков.
  • 0
    я показал все в одном для наглядности
  • +15
    Раз уж появляются очередные вредные советы, то разберу.

    Во-первых, запомните дети, ваш верный друг: сайт caniuse.com. Он всегда подскажет как дела с поддержкой свойств и даже примерную статистику браузеров на основе данных statcounter.

    Во-вторых, желательно не использовать фильтры для IE и тем более HTC-компоненты по причине их тормознутости. Последние, кстати, не работают в IE10 (см. border-image). Ведь, скорее всего, старый IE стоит на старых машинах. Вероятно, на Windows XP, даже не Windows 7 —  на XP как раз нельзя поставить более свежий IE. Итак:

    == border-radius ==
    Префиксы давно не нужны. Не поддерживается только IE8−, но HTC-решения настолько тормозны, что лучше не использовать для веских причин. Оп-па, Windows 8 стайл!

    == box-shadow ==
    Аналогично, префиксы не нужны. Разве что вы ориентируетесь на Андроид 2.3. Но это старые медленные аппараты, их тоже лучше не перегружать.

    == Градиент на фоне ==
    (Разве бывает передний фон?)
    Аналогично, префиксы не нужны. Разве что всё тот же Андроид 2.3. Правда, не работает ещё и в IE9.
    Вообще, в качестве изящной деградации для градиента лучше всего использовать обычную картинку, повторяющуюся по горизонтали или вертикали. Она небольшая, и её можно внедрить через data:uri в IE8+. IE7− вполне обойдутся и фоновым цветом, который обязательно должен быть.

    == Несколько фонов ==
    Если так важны IE8− проще добавить элемент-обёртку. Если только IE8, можно извращаться с псевдо-элементами :before и :after. (Правда, тут важно понимать как работает z-index.)

    == Картинка вместо обводки или border-image ==
    Тут, конечно, боль, IE10− не умеют, и Андроид 4.3− только с префиксом. Увы, не очень годится для оформления. Однако, тут достаточно только префикс -webkit-. Предлагаемый автором, HTC не сработает в IE10, так что лучше вместо border-image использовать что-то другое. Например, псевдо-элементы :before и :after.

    == Тень текста или text-shadow ==
    Опять тормозная библиотека, нежелательно использовать, лучше деградировать до обычного текста. Не поддерживается только в IE9−, при крайней нужде можно эмулировать псевдоэлементом (с текстом на один пиксель) и фильтрами (размытие).

    == Алгоритм расчета ширины и высоты элемента или box-sizing ==
    Нужен только префикс -moz-. Хорошим тоном является написание безпрефиксного варианта последним.

    == Ставим блоки в линию или display: inline-block ==
    Костыли давно устарели. zoom: 1 и *display: inline нужны только в IE7−, то есть уже не нужны.

    == Прозрачность или opacity ==
    -moz- префикс давным-давно не нужен. Для IE достаточно объявления «filter: alpha(opacity=50)».

    == Анимация или transition ==
    Префиксы уже не нужны, максимум -webkit-.

    == Трансформация объектов или transform ==
    Тут чуть похуже, стоит добавить только префикс -webkit- и -ms- для IE9. В IE8− при крайней нужде можно эмулировать через фильтр матричного преобразования.

    == Размер заднего фона или background-size ==
    Префиксы не нужны. Желательно всё же не использовать. Фильтр можно оставить только один.

    == Селекторы CSS3 ==
    IE9+. Если есть контроль над бэкендом, то для IE8− можно просто добавлять классы типа «_even» или «_last». Иногда можно переделать так, чтобы использовать :first-child вместо :last-child, а IE8 обойдётся и без черезполосицы.
    • +1
      Как итог: постепенное улучшение и изящная деградация — ваши лучшие друзья. Префиксы устарели и нужны разве что для свойств вроде transform, -moz-box-sizing или флексбоксов. В некоторых случаях (несколько фонов и обрамление) помогут псевдоэлементы.
    • 0
      я понял, спасибо за качественный комментарий, надо поправить, пока «вредными советами» на начлаи пользоваться. Вы считаете что htc вообще лучше не использовать? Оставлять их без красивостей так сказать
      • 0
        Да, с ними много проблем: надо грамотно настроить сервер, чтобы они кешировались, это javscript решения со всеми недостатками: множество изменений в DOM, существенное замедление инициализации страницы, замедление от используемых технологий (фильтры и VML) и увеличенного потребления памяти (которой, вероятно, немного), возможные утечки, замедление или проблемы при динамическом изменении страницы.
        • 0
          Спасибо за совет!

          Может быть сейчас идет тенденция плоского дизайна, чтобы проще было его реализовывать?)
          • +1
            Да, ходят шутки, что Майкрософт изобрела Метро, потому что браузер не поддерживает border-radius.
            Вообще, старым браузерам вроде IE 8 и Андроидам 2, а также единицам, сидящим на старых браузерах, лучше выдавать упрощенную страницу без лишних эффектов.
            • 0
              да я с вами согласен, но вот заказчики порой стоят насмерть…
              • +3
                А им надо показать, что пока грузятся эти htc-приблуды, без которых не покажется страница, пользователи просто закрывают вкладку и делают заказ на сайте конкурента. Ну и ценник выставить за подержку старых браузеров. Многим, говорят, оказывается, не так надо.

                Собственно, отсюда пошёл принцип постепенного улучшения: базовая часть работает везде, например, корзина — это ссылка на отдельную страницу, а дополнительная в тех браузерах, где есть подобающий уровень поддержки: корзина красиво выплывает из угла на лету.
                • 0
                  Спасибо вам за ценные советы! Надо совершенствоваться)
                • 0
                  Про ценник поддержу, работает безотказно.
                  «Вёрстка для старых браузеров (IE8 и ниже): +100% к стоимости вёрстки, при этом визуальные эффекты только при наличии технической возможности».
  • 0
    Не верю, что вы не слышали о SASS+Compass, что позволяет обходиться без таких вот записей:
    -webkit-border-radius:10px;
    и т.п., включая все продвинутые возможности CSS3.
    Вернее, записи-то будут, но генерируют их подключаемые миксины Compass. Собственно, его смысл в том и есть, чтобы автоматически создавать CSS, адаптированный для всех вендоров и, т.о., сэкономить вам тонны времени (включая потраченное на поиск ошибок).
    Или я чего-то не учёл?
    • 0
      Ну тут речи нигде не шло про SASS, я слышал и знаю его возможности. Здесь речь о чистом css, сейчас не все еще начали SASS и тд пользоваться.
      • 0
        SASS + Compass дают вам на выходе тот самый «чистый» CSS. Я вас прекрасно понимаю — переключаться на что-то новое, — это всегда некоторый вызов, т.к. требует времени (и часто — нервов), но я не припомню ситуации, когда оставаться в рамках той или иной «чистой» технологии оказывалось бы выгодней. Так что, те, кто «ещё не начали им пользоваться» или рано или поздно начнут, или проиграют в конкурентной борьбе тем, кто уже начал.
        Хорошая новость, кстати, в том, что ничего особо сложного в освоении вышесказанного нет. Кроме того, по крайней мере, некоторые IDE (netbeans в частности), берут заботу об интеграции с препроцессорами на себя, вам практически не надо будет на это отвлекаться. Поверьте, в результате вы очень много выиграете, говорю вам как коллега, который ок. 15 лет писал на «чистом» CSS.
        • 0
          Я сейчас использую LESS в некоторых проектах, но как я понял, он не так хорош как SASS с компасом. Не думаю что очень сложно переходить, просто надо попробовать! Спасибо вам
          • 0
            Я тоже начинал с LESS. И для начала это, вероятно, лучше, потому что:
            1. Он проще
            2. Его можно использовать без компиляции CSS, простым подключением less.js
            Но у SASS есть радикальное преимущество и это именно Compass, и то, о чём я говорил выше — вы практически избавляетесь от головной боли, связанной с адаптацией стилей для разных браузеров — он делает всю магию. Просто пишете, например,
            @include border-radius(4px);
            что не слишком отличается синтаксически от обычного CSS, а остальное он дописывает сам.
            Есть очень неплохая книга, наз. Sass & Compass in action, которую можно быстро прочесть буквально за пару дней и сразу перейти на новый уровень.
            • 0
              Спасибо, я на самом деле компилирую LESS в CSS сразу, чтобы не нагружать клиента.

              Я обязательно изучу книгу, которые вы указываете, спасибо!
  • +1
    А я лично очень горд, что автор — молодой frontend, как он сам про себя написал — знает и заморачивается такими вещами! Я уверен, он хорошо и вдумчиво разбирается с азами, чего, к сожалению не делает почти никто из начинающих.

    А отбросить лишнее — никогда не поздно. Зато понимание фундаментальных принципов — отличный козырь, который всегда будет в рукаве.

    У меня есть знакомый фронтенд, который так развивался. Сейчас сам к нему за советом порой хожу.

    Итог: все хорошо, главное — не останавливаться. И спасибо за пост.
  • 0
    Не забываем, что PIE насилует ваш DOM и в хвост, и в гриву, если проект больше, чем просто landing-page.
  • +1
    -moz-inline-stack можно спокойно удалять, inline-block поддерживается с 3й версии
    • 0
      учел, спасибо!
  • 0
    Для полноты картины не хватает Respond.js, который, к тому же, прекрасно взаимодействует с Selectivizr. Как подружить Respond.js и Selectivizr, я описал тут: stackoverflow.com/a/16732064/901944
  • 0
    Благодарен автору что поднял такую тему. О многих свойствах не знал. В кросс-браузерность вёрстки только начинаю вникать.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.