-prefix-free: изящный и миниатюрный «костыль» на JavaScript, избавляющий от необходимости вспоминать и перечислять префиксы свойств CSS3 для разных браузеров

Всякому такому автору сайта, который когда-либо снабжал своё детище стилями 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.