• 6 минут чтения

• Кодирование, Инструменты, CSS3

• Поделись ТвиттерЛинкедин

Эта статья является первой частью нашей новой серии, в которой представлены новые, полезные и свободно доступные инструменты и методы, представленные и выпущенные активными членами сообщества веб-дизайнеров. Леа Веру хорошо известна своими экспериментами с CSS и JavaScript, и в этом посте она представляет свой новый инструмент prefixfree, который, надеюсь, поможет вам вырваться из ада префиксов CSS.

Так в чем проблема с префиксами?

Я уверен, что мы все согласны с тем, что CSS3 — это очень круто и что он позволяет нам делать вещи, которые раньше были невозможны. Но те из нас, кто много использует CSS3, наверняка испытали префиксный ад, как показано в приведенном ниже фрагменте (из настоящей таблицы стилей!):

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: .1em .2em .4em -.2em black;
   -moz-box-shadow: .1em .2em .4em -.2em black;
   box-shadow: .1em .2em .4em -.2em black;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -ms-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
   -webkit-animation: none;
   -moz-animation: none;
   animation: none;
}

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

Дальнейшее чтение на SmashingMag:

• Руководство по псевдоклассам и псевдоэлементам CSS
• Переменные: основа архитектуры CSS
• Уменьшение масштаба методологии БЭМ для небольших проектов
• Flexbox прост как пирог — разработка макетов CSS

Решение: без префикса

Код, который я пишу в демонстрационных слайдах и презентациях, не имеет префиксов, даже для таких вещей, как @keyframes или transition свойство, которое еще нигде не поддерживается без префикса. Для этого я написал скрипт, который определяет префикс текущего браузера и добавляет его там, где это необходимо. Недавно я подумал, а почему бы не адаптировать скрипт для обработки всего CSS-кода на странице, чтобы CSS в моих таблицах стилей был таким же элегантным, как код в моих демонстрациях? Вскоре после этого появился prefixfree.

Сценарий, по сути, делает все, что в силах JavaScript, чтобы позволить вам полностью забыть о вендорных префиксах. Он обрабатывает связанные таблицы стилей (кроме @import правила), встроенные таблицы стилей, встроенные стили, даже CSS, добавленные впоследствии (например, в новых элементах, изменениях свойств CSSOM и поиске). И если в редких случаях вы хотите использовать другое определение для другого движка (например, из-за того, что его реализация содержит ошибки), вы все равно можете использовать CSS с префиксом.

Хорошая вещь о без префикса заключается в том, что после того, как поставщики браузеров отбросят свои префиксы для свойств CSS3, вы можете просто удалить скрипт, и ваш CSS по-прежнему будет работать. Ваш код по-прежнему будет валидным CSS3 (настолько валидным, что он даже пройдет валидатор CSS). Ваш код от него не зависит (в отличие от препроцессоров CSS); скорее, он больше похож на полифилл, пока сглаживая различия между браузерами.

Еще одна полезная функция заключается в том, что скрипт автоматически определяет, какие свойства нуждаются в префиксе. В его коде нет списка свойств. Он определяет, какие свойства поддерживаются и какие из них поддерживаются Только с префиксом. Значения, селекторы и @rules основаны на предопределенных списках, но они по-прежнему имеют префикс. Только при необходимости. Обнюхивание браузера не требуется; все основано на обнаружении признаков.

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

Кроме того, есть несколько серверных решений, но с ними есть две основные проблемы. Во-первых, размер файла CSS по-прежнему огромен, так как он должен содержать все префиксы (и версии без префиксов). А во-вторых, серверный скрипт должен постоянно поддерживать списки свойств, потому что они не могут быть обнаружены автоматически, как в случае с без префикса.

Итак, что правило выше становится с без префикса? Вот такая красота становится:

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(15deg);
   animation: none;
}

Разве это не то, что лучше сделать на стороне сервера?

Это веский аргумент, и у обоих подходов есть свои преимущества и недостатки. Использование сценария на стороне сервера означает, что:

• Его нужно обновлять очень и очень часто, так как поддержка браузеров меняется, а префиксы больше не нужны. PrefixFree автоматически определяет, что нуждается в префиксе, а что нет.
• Все префиксы должны быть загружены, что добавляет много наворотов. В таблице стилей среднего размера это намного больше, чем размер файла prefixfree.js.
• В случае препроцессоров, таких как LESS и SASS, вы зависите от их проприетарного синтаксиса, поэтому вы не можете просто удалить скрипт через несколько лет.

Тем не менее, есть некоторые преимущества в том, чтобы сделать это на стороне сервера:

• Загрузка занимает больше времени, но пользователь вообще не видит не-CSS3-версию стиля. С PrefixFree будет небольшая задержка.
• Он будет работать так же, даже если JavaScript отключен. Хотя с PrefixFree, если JS отключен, пользователь просто увидит дизайн без некоторого CSS3, но он все равно будет отлично функционален. Если ваш CSS написан правильно, в любом случае дизайн должен работать без CSS3.

Лично я думаю, что это сводится к личному решению и к тому, важнее ли для вас преимущества, чем недостатки.

Скачайте скрипт на GitHub!

Вы можете скачать prefixfree с GitHub. Минимальная версия весит менее 5 КБ, а после Gzip-сжатия становится менее 2 КБ. Пожалуйста, имейте в виду, что это все еще очень ранняя бета-версия и могут быть ошибки. Вы можете помочь исправить их или хотя бы сообщить о них в системе отслеживания проблем. Повеселись!

(аль)