Для каких свойств в css нужны префиксы браузеров

Всякому такому автору сайта, который

когда-либо

снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).

Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется

префикс «-moz-»,

в Google Chrome и в Apple Safari (и в других браузерах на основе

Webkit) —префикс «-webkit-»,

в Опере —

префикс «-o-»,

в IE —

префикс «-ms-»,

а в Konqueror (и в наиболее ранних версиях

Safari) —префикс «-khtml-».

На практике, однако же, автор сайта чаще всего использует своего рода «общий знаменатель» возможностей нескольких браузеров — значения свойств CSS3, работающие одинаково (или почти одинаково) во всех современных браузерах. Да и записываются все они также одинаково. Указание префиксов сводится поэтому ко многократному повторению свойств. Например, чтобы придать нескольким кнопкам

jQuery-плагина

ColorBox закруглённые края и заставить их отбрасывать тень, поневоле придётся записать в CSS вот что:

#cboxPrevious, #cboxNext, #cboxClose {
-webkit-box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

Во-первых, это задалбывает.

Во-вторых, это неэкономично.

В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)

Поэтому рано или поздно должно было появиться

какое-нибудь

средство, позволяющее автору

CSS-кода

указать одни только безпрефиксные формы

CSS-свойстви CSS-значений —

а автоматика позаботилась бы об их адаптации к каждому конкретному браузеру.

И такое средство появилось — благодаря Lea Verou. Вот оно:

Скрипт

«-prefix-free»,

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

Это JavaScript, он работает на стороне читателя. Очевидно поэтому, что скрипт не сработает, если у читателя отключены джаваскрипты; зато он получает возможность непосредственно во браузере проверить и понять, в каких префиксах браузер нуждается, а не полагаться на обнюхивание заголовка

«User-Agent»,

да и не зависеть от готового (возможно, устаревшего) списка неподдерживаемых свойств, как это было бы на сервере.

Скрипт обрабатывает стили, указанные внутри элементов <style> и в атрибутах

style=»…»,

а также внешние стили, подключённые элементами <link> (но только не из других доменов). Тому примером — стиль самогó сайта

«-prefix-free».

Однако

«-prefix-free»

не умеет обрабатывать стили, подключённые директивою @import.

В браузерах Opera и Google Chrome по умолчанию не поддерживается обработка стилей, подключённых из локальных файлов (она требует донастройки браузера вручную). В браузере IE (а также в Mozilla Firefox

версии 3.6

и более ранних) не работают безпрефиксные значения свойств в атрибутах

style=»…»,

причём в этих старых Файерфоксах — не только значения,

но и имена

свойств.

К скрипту

«-prefix-free»

прилагается пара плагинов: меньший из них позволяет библиотекою jQuery (с помощью

метода .css(…))

считывать и устанавливать свойства CSS3 без префиксов,

а другой плагин

следит за появлением новых элементов <style>

и <link>,

за изменениями атрибутов

style=»…»,

за вызовами методов CSSOM (объектной

модели CSS) —

и оперативно снабжает нужные свойства префиксами.

Правда, у такого слежения опять же есть ограничения: за изменениями атрибутов

style=»…»

(совершаемыми методом

setAttribute())

не удаётся проследить в Webkit, а в Google Chrome к тому же не сработает задание беспрефиксных свойств через CSSOM (например, element.style.transform =’rotate(5deg)’), хотя чтение сработает.

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

что «-prefix-free»

может сгодиться для оформления такого сайта, у читателей которого обыкновенно включён JavaScript, а динамическое изменение стилей сводится к управлению скорее классами, нежели напрямую значениями свойств элементов. Что же касается необходимости хранения этих значений не в атрибутах

style=»…»,

а в стилевых элементах и файлах, так это и всегда считалось хорошим тоном отделения представления от содержимого.

С другой стороны, конечно, не надо забывать, что префиксы появились не на пустом месте — у них есть своя цель в жизни: преодоление взаимной несовместимости браузеров (в том числе старой и новой версии одного и того же браузера). Подробнее об этом поведал Эрик Мейер в статье «Prefix or Posthack» («A List Apart», 6 июля 2010 года). От подпирания свойств CSS3 «костылём» следует отказываться, когда оно может создать такую несовместимость.

С третьей стороны, употребление префиксов не следует доводить до фанатизма: когда оно лишается смысла, хороший «костыль» всего лишь экономит время автора сайта, не будучи способен привести к проблемам совместимости. Тот же Эрик Мейер у себя в Твиттере похвалил скрипт

«-prefix-free»

и поблагодарил Lea Verou.

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

Проблема очевидна. Нужен способ облегчить работу с префиксами.

Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.

1. Препроцессоры

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

Самые известные препроцессоры CSS это LESS и SASS.

Они являются прямыми конкурентами, хотя разница между ними есть. Оба могут использовать на стороне сервера, но LESS еще и доступен в виде javascript-файла, поэтому можно на эту особенность обратить отдельное внимание.

LESS

Этот препроцессор обладает синтаксисом, который проще, чем у конкурента. Существует возможность обрабатывать файлы стилей на стороне сервера, но нас интересует сейчас вариант работы на стороне клиента через файл javascript.

Подключение
<!doctype html>
<hеad>
  <link rеl=»stylesheet/less» type=»text/css» href=»style.less»>
  <sсript src=»less-1.1.3.min.js» type=»text/javascript»></sсript>
</hеad>

Миксин
.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Использование
#shape1{
  .border-radius(10px);
}

Для того, чтобы работать с префиксами, нужно использовать миксины (тот самый код, который знает что и где заменять). Существуют готовые наборы миксинов и библиотеки для CSS3
lesselements.com
github.com/jdmiller82/-lessins-
snipplr.com/view/47181/less-classes
roel.vanhintum.eu/more-less

Не обязательно компилировать файлы .less на сервере или в браузере, можно локально получить готовый файл CSS и уже его использовать на сайте
SimpLESS — приложение, которое автоматически компилирует .less в стандартный CSS. Бесплатно для всех платформ.
Less App — аналогичное приложение, но только для Мака.

Есть даже расширение для Дримвивера, компилирующее файлы .less в CSS.

Компьютер-клиент получает файлы .less и .js, после обработки в браузере имеем файл .css со всеми возможными префиксами

SASS

Написан на Ruby. Имеет больше возможностей, чем LESS, поэтому лучше подходит для крупных проектов. Использование для генерации префиксов будет практически как у конкурента, то есть через миксины.

Одним из плюсов является наличие фреймворка Compass, который содержит готовые библиотеки и миксины, в том числе и для работы с CSS3. Существует приложение для локальной компиляции файлов SASS в CSS. Кроссплатформенное, но платное (платной является графическая оболочка, сам компилятор опенсорсный).

Есть и библиотеки миксинов CSS3 для SASS:
github.com/thoughtbot/bourbon

На сервер происходит обработка файлов SASS, компьютер-клиент получает уже готовый файл .css

Достоинства препроцессоров:
+ Кроме префиксов, можно делать куда больше вещей
+ Возможность автоматически обрабатывать файл CSS (например, сжимать, удаляя лишнее)
+ Нормальное кэширование (правда, LESS кэшируется с помощью localStorage)

Недостатки препроцессоров:
– Для варианта с javascript — зависимость от включенных скриптов в браузере
– Генерируется код со всеми возможными префиксами, не только теми, которые нужны конкретному браузеру

Еще конкуренты

• CSS Agent на ASP.NET
• Stylus (имеет CSS3 расширение Nib)
• Turbine
• CSS Crush
• eCSStender

2. -Prefix-free

-Prefix-free — это скрипт, который нужно подключать к своим страницам. В отличие от препроцессоров, обрабатывает обычный файл CSS, то есть в коде нет переменных или миксинов, а самый обычный CSS-код, только без вендорных префиксов.

Обработка страниц стилей происходит с помощью Javascript.

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

Компьютер-клиент получает файл .css без префиксов. После обработки в браузере с помощью javascript, только нужные префиксы добавляются в этот файл

Достоинства:
+ Автор файла стилей использует только один вариант свойств, без префиксов
+ Браузер пользователя не получает стили с «чужими» префиксами или префиксами, которые уже устарели
+ Валидный код
+ Можно удалить безболезненно, когда исчезнет в нем необходимость

Недостатки:
– Не обрабатываются стили, подключенные через import
– После загрузки сайта и перед полной обработкой CSS3-стилей возникает едва заметная пауза
– При отключенном Javascript пользователь не увидит некоторые CSS3-стили
– Дополнительный файл для загрузки (правда, всего 2KB в сжатом виде)
– Обработанный файл стилей не кэшируется

Конкуренты

• github.com/codler/jQuery-Css3-Finalize
• imsky.github.com/cssFx

3. Генераторы

Этот способ уже используется многими. Просто открываем один из онлайн-генераторов и копируем оттуда готовый код с префиксами.

Недавно я попробовал поискать генератор, который бы автоматически добавлял свойства с префиксами к написанному мной стандартному свойству. Оказалось, что есть несколько вариантов.

• prefixr.com Можно выбрать браузеры, для которых используются префиксы, можно сжимать код, использовать переменные, имеет плагины для редакторов кода
• prefixmycss.com
• cssprefixer.appspot.com Тут генератор работает как демонстрация возможностей серверного скрипта, доступного для бесплатного использования
• imsky.github.com/cssFx Этот генератор демонстрирует возможности скрипта на javascript, доступного для бесплатного использования

Загружаем на сервер файл с подготовленным вручную файловм .css со всеми префиксами

Достоинства:
+ Ничего не нужно устанавливать и настраивать
+ Часто генератор дает возможность удобной настройки значений для свойств CSS3

Недостатки:
– Нет автоматизации при создании и последующем изменении значений свойств CSS3

4. Редакторы кода

Ну и наверняка существует возможность автоматизации подстановки префиксов для редакторов кода и сред программирования. Иметь под рукой Zen Coding для префиксов было бы очень удобно.

На данный момент удалось найти плагины, использующие Prefixr:

На этой странице перечислены плагины для Notepad++, TextMate, Espresso, Coda и некоторых других.
Prefixr для NetBeans

UPD For those of you who don’t speak Russian this article in English.

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

Мне, как верстальщику, приходится ежедневно сталкиваться с различными 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 за огромную помощь!