Использование всех возможностей CSS3 позволяет создавать улетные интерактивные сайты. 3D-трансформация, keyframe-анимация, градиенты, блоки разметки — отличные инструменты, но они требуют большого объема работы от разработчика. Различные браузеры имеют разную поддержку как инновационных, так и ставших уже привычными возможностей css3. Пример того, что я имею ввиду:
[css].rotated-element {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}[/css]
Для поддержки свойства transform всеми современными браузерами (все что новее IE8), необходимы две дополнительные строки:
- с префиксом -webkit-, для Safari, мобильного Safari и Chrome до 35 версии включительно;
с префиксом -ms-, для IE9. - Firefox 16+ и Chrome 36+ корректно работают со свойством transform без префикса.
При большом объеме кода css3, требуется много дополнительного кода с префиксами, чтобы обеспечить совместимость и одинаковое поведение на разных браузерах. Иногда в коде можно встретить использование всех вариантов, с префиксами -webkit-, -o-, -moz-, -ms- и без префикса. Это излишнее утяжеление кода, к тому же, это существенно осложняет его отладку и модернизацию. Конечно, можно каждый раз сверяться с сервисом, вроде Can I Use, но это лишние потери времени и отвлечение от сути рабочего процесса. К тому же, мало кто действительно хочет или любит писать все эти префиксы.
Автоматизация всего этого очень помогла бы. Рассмотрим способы автоматизации работы с префиксами в css3.
Препроцессор mixins
Если вы уже используете препроцессор для написания css, вы можете использовать специальные mixin библиотеки для облегчения работы с префиксами. Для Sass самые популярные — это Bourbon и Compas. Для Less — это LESS Hat и LESS Elements. Stylus содержит встроенный функционал для этого.
Несмотря на то, что библиотеки использовать удобнее, чем писать префиксы руками, они могут добавить префиксов больше, чем нужно. Браузеры постоянно обновляются (Firefox и Chrome чуть ли не каждую неделю) и с каждым обновлением полная поддержка новых css3 свойств без префиксов. Каким же образом библиотеки отслеживают обновления, связанные с поддержкой css3 свойств и отключают ненужные префиксы?
Одни библиотеки не уделяют достаточного внимания неактуальным префиксам и лишний «мусор» тянется годами. Если используемая вами библиотека до сих пор выводит префиксы для border-radius или box-shadow, её создатели не утруждают себя отслеживанием обновлений браузеров.
Другие выпускают обновления один раз в несколько месяцев и отключают ненужные префиксы.
Я считаю лучшими те mixin библиотеки, которые позволяют мне самому настроить поддержку нужных браузеров и необходимых префиксов. Compass, как раз, из таких. Эта библиотека полагается на данные Can I Use и имеет достаточную гибкость в настройке. Подробнее можно узнать из документации. Переменная $supported-browsers позволяет указать перечень поддерживаемых браузеров. А переменная $critical-usage-threshold задает минимально допустимый процент совместимости браузера.
Проблемы с mixin библиотеками
Основным недостатком таких библиотек является то, что они по-прежнему заставляют нас писать кода больше, чем хотелось бы. Вместо:
[css]transform: translateX(25%);[/css]
приходится писать:
[css]@include transform(translateX(25%));[/css]
Пусть даже это всего лишь одно ключевое слово и несколько спецсимволов. По итогу, может выходить около 50 % «лишнего» кода, и потраченного впустую времени.
Еще один недостаток, для меня, в том, что приходится изучать и держать в голове еще и синтаксис используемой библиотеки, вместо гладкого и прозрачного, чистого css3. Я использовал библиотеку Compass несколько месяцев, и она меня утомила своими ограничениями.Теперь же, я чаще предпочитаю использовать чистый css3.
Постпроцессоры
Яркие представители своего рода это -prefix-free and Autoprefixer. С их помощью я могу писать стандартный css3 код, и они сами добавят префиксы позже. Эти утилиты не требуют препроцессор, но прекрасно могут работать с ними.
-prefix-free — это прекрасный инструмент javascript, разработанный Lea Verou. Достаточно, всего лишь, подключить на странице js скрипт размером 2 кБ (gzip). Работает на стороне клиента, определяет версию браузера, находит css в <link>, <style> и коде страницы, затем добавляет префиксы, необходимые для данного браузера. Очень помогает сохранить время и стройные таблицы стилей. Обратной стороной медали здесь является как раз то, что скрипт выполняется на стороне клиента, и могут возникнуть задержки правильного отображения, особенно на тяжелых страницах. Подключение -prefix-free сразу после стилей позволяют минимизировать эту задержку.
Я предпочитаю использовать Autoprefixer. Он запускается на машине разработчика и обрабатывает таблицы стилей, добавляя нужные префиксы по передачи их браузеру. Вы можете установить их как модуль Ruby, запустить в Grunt или Gulp. Я, обычно, собираю Sass при помощи compass watch в терминале, так что пришлось добавить подключение модуля, что бы Compass запускал Autoprefixer сразу после сборки Sass:
[ruby]require ‘autoprefixer-rails’
on_stylesheet_saved do |file|
css = File.read(file)
File.open(file, ‘w’) do |io|
io << AutoprefixerRails.process(css, browsers: ["last 3 versions"])
end
end[/ruby]
Полагаю, что, если вы предпочитаете Grunt или Gulp, вы прекрасно знаете, как добавить новое задание.
Autoprefixer можно настроить через конфиг browsers. Можно указать количество последних версий («last 3 versions») или конкретную версию браузера («Firefox > 20») или процент совместимости («> 4%»), Он используется на основе данных с уже знакомого нам Can I Use. Значение по умолчанию: «> 1%, last 2 versions, Firefox ESR, Opera 12.1». В отличие от -prefix-free, Autoprefixer добавляет все префиксы, соответствующие текущей конфигурации. Это дает больший размер файлов таблиц стилей, но уменьшает вероятность замедления корректного отображения страницы.
Autoprefixer, так же, удаляет ненужные префиксы. Если вы возьметесь за доработку проекта после префикс-маньяка, этот инструмент поможет удалить все лишнее.
Если вы хотите знать больше, обратитесь к статье разработчика Autoprefixer.
Заключение
Свойства css3 — это классная штука и вполне возможно не тратить много времени на адаптацию их к разным браузерам. Всю эту работу за нас могут проделать mixin библиотеки или постпроцессоры. Переложив рутинную часть работы на соответствующие инструменты, мы получаем больше свободного времени для творчества!