Использование свойств CSS3 может значительно повысить привлекательность и интерактивность ваших сайтов. 3D-трансформации, анимация ключевых кадров, фоновые градиенты и столбцы являются отличными инструментами, но они требуют дополнительной работы со стороны разработчика. Различные браузеры поддерживают их экспериментально и для этих свойств требуются префиксы, специфичные для поставщика. Вот пример того, что я имею в виду:
.rotated-element {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} Чтобы использовать это свойство transform-webkit--ms- Firefox (16+) и Chrome (36+) правильно читают свойство без префикса.
Сайт, который использует много свойств CSS3, поэтому нуждается в большом количестве префиксов. Это поднимает две проблемы. Во-первых, как узнать, какие префиксы использовать? Иногда вы видите сайт, который использует все ( -webkit--o--moz--ms- Это просто вздор. Вы можете посмотреть каждое свойство в разделе «Могу ли я использовать» , но это отнимает много времени. Вторая проблема заключается в том, что никто не хочет писать все эти префиксы.
Нам нужно автоматизировать это. Давайте рассмотрим некоторые инструменты, которые помогают нам автоматизировать префиксы поставщиков.
Препроцессор Mixins
Если вы используете препроцессор для написания своего CSS, вы можете использовать библиотеку mixin для управления вашими префиксами. Для Sass основными библиотеками являются Бурбон и Компас . За Меньше есть МЕНЬШАЯ Шляпа и МЕНЬШЕ Элементов . Стилус, кажется, имеет свой собственный набор встроенных миксинов .
Хотя эти библиотеки миксинов намного лучше, чем префиксы всего вручную, есть одна проблема, о которой вы должны знать: они могут дать вам больше префиксов, чем вам нужно. Браузеры постоянно обновляются (Firefox и Chrome выпускают новые версии почти еженедельно!), И эти обновления могут включать полную поддержку различных свойств без префикса CSS3. Как ваша библиотека mixin отслеживает добавленную поддержку и решает, когда прекратить выводить ненужные префиксы?
Некоторые библиотеки не обращают особого внимания, и через несколько лет после этого они не получат нужных префиксов. Если ваша библиотека по-прежнему ставит префиксы для border-radiusbox-shadow , она виновата в этом количестве.
Некоторые библиотеки просто загружают обновления каждые несколько месяцев и удаляют префиксы в зависимости от решений, принимаемых их командой разработчиков.
Лучшая библиотека mixin позволяет вам настроить, какие браузеры вам нужно поддерживать, и выводить префиксы в соответствии с вашими требованиями. Компас это такая библиотека. Он основан на данных из « Можно ли использовать» и позволяет установить минимальную поддержку браузера с некоторыми глобальными переменными. Проверьте их документацию для этой конфигурации . Используя переменную $supported-browsers , вы можете определить список поддерживаемых браузеров. Переменная $critical-usage-threshold позволяет вам установить минимальный глобальный процент использования для поддержки браузера (например, если браузер занимает не менее 1% глобального использования, добавьте все префиксы, которые ему нужны).
Проблемы с библиотеками Mixin
Я лично не использую библиотеку mixin из-за нескольких дополнительных проблем, которые у меня есть. Во-первых, библиотеки все еще заставляют вас писать больше кода, чем нужно. Вместо transform: translateX(25%); вам нужно написать @include transform(translateX(25%)); , Это дополнительное слово и несколько дополнительных символов. Не огромный, но в течение дня он замедляет вас.
Мне также не нравится тот факт, что я должен изучать синтаксис библиотеки вместо реального синтаксиса CSS. Я пользовался библиотекой в течение нескольких месяцев, когда меня поразило, что я не могу написать версию спецификации некоторых свойств CSS3 на моей голове. Я бы лучше знал настоящий CSS, чем библиотека mixin препроцессора.
«Постпроцессоры»
Эти инструменты включают в себя -prefix-free и Autoprefixer . С их помощью вы пишете стандартную версию спецификации всех свойств CSS3, а инструмент добавляет префиксы для вас позже. Ни один из этих инструментов не требует препроцессора, но оба прекрасно вписываются в рабочий процесс препроцессора.
-prefix-free — это инструмент JavaScript, разработанный Леа Веру . Вы включаете его в страницу, как и любой другой файл JS (только 2 КБ при сжатии, поэтому не самый тяжелый файл!), И он запускается на стороне клиента. -prefix-free обнаруживает браузер пользователя, находит CSS в <link><style> Это экономит ваше время и делает ваши таблицы стилей легче. Недостатком этого метода является то, что он работает на стороне клиента, поэтому ваши пользователи могут увидеть задержку рендеринга или FOUC на тяжелых страницах. Включение -prefix-free сразу после таблиц стилей помогает минимизировать эту задержку.
Я использую инструмент Autoprefixer. Autoprefixer работает на вашем локальном компьютере и исправляет ваши префиксы до того, как ваша таблица стилей когда-либо попадет в браузер. Вы можете установить его как гем Ruby , запустить его в рабочем процессе Grunt или в рабочем процессе Gulp . Обычно я компилирую Sass с compass watchconfig.rb
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
Если вы используете Grunt или Gulp, я предполагаю, что вы знакомы с добавлением нового задания и перейдете к деталям об Autoprefixer.
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 удалит все префиксы, которые не нужны для требований конфигурации вашего browsers
Если вы хотите познакомиться с Autoprefixer, ознакомьтесь с этой статьей о CSS-хитростях , написанной создателем инструмента.
Вывод
Свойства CSS3 потрясающие, и вам не нужно тратить время на написание префиксов для них. Независимо от того, какая библиотека смешивания или инструмент постобработки лучше подходит для вашего рабочего процесса, вы можете автоматизировать эту часть кода и добиться большего!