Вендорные префиксы для каких свойств

В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.

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

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit-, -moz-, -ms- и др.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

• -webkit-: браузеры Chrome, Safari, Opera;
• -moz-: браузер Mozilla Firefox;
• -ms-: браузер Internet Explorer.

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

Причин для появления префиксов было достаточно много:

• Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
• Для решения проблем с кроссбраузерностью.
• Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.

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

Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

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

Сайт “Can I Use…”

На сайте “CanIUse” браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

• Красный прямоугольник – браузер, в котором данное свойство не реализовано;
• Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
• Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
• Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

От автора: префикс -webkit- сегодня настолько распространен в CSS, что некоторые сайты отказываются правильно работать без него. В то время как для разработчиков вендорные префиксы css последние пару лет означали прямой знак не совсем идеальной работы свойств, это привело к тому, что Mozilla пошли на отчаянный, но необходимый шаг. В Firefox 46 или 47 (релиз будет в апреле или мае 2016) Mozilla планирует ввести поддержку серии нестандартных –webkit- префиксов для повышения совместимости браузера с данным префиксом (даже на мобильных устройствах).

Идея не нова, Microsoft Edge также поддерживает различные -webkit- префиксы для совместимости. Opera начала поддерживать -webkit- префиксы в 2012, а затем перешла на Webkit движок Blink. W3C и разработчики браузеров не планировали использовать данный префикс в разработке сайтов:

«Официальная политика W3C гласит, что не следует использовать экспериментальные свойства в коде сайта. Однако люди используют их, так как хотят, чтобы их сайты использовали последние технологии и выглядели круто.» — страница W3C по оптимизации контента под разные браузеры

Тем не менее, разработчики всегда хотят получить доступ к последним свойствам как можно быстрее. Вендорные префиксы переворошили все с ног на голову и обеспечили Webkit доминирование, однако я считаю, что префиксы оказали огромное влияние на быстрое развитие интернета.

Способы Mozilla и Microsoft большинству сайтов только навредят. У большей части сайтов уже будут подключены префиксы –moz- или выяснится, что с новым обновлением Mozilla станет поддерживать новые свойства без нужды вносить изменения. Однако как профессиональные веб-разработчики мы должны покончить с этим и понять, что в некоторых дизайнах могут выявиться неоднозначные результаты. Вы, может быть, уже и сами знаете, какие из ваших проектов угробит это обновление. Веб-разработчики, настало время переосмыслить свой подход к вендорным префиксам и к их тестированию на сайтах.

Новые префиксы

Mozilla собирается включить ряд –webkit- префиксов. Из того, что я собрал, видно, что Mozilla не собирается сопоставлять свой список со свойствами Edge. Не всем свойствам нужна совместимость с движком Mozilla. Среди префиксов, которые Mozilla собирается добавить, судя по странице вики Compatibility/Mobile/Non Standard Compatibility будут следующие:

Некоторые другие свойства могут быть в @-webkit-keyframes.

Тест на кроссбраузерность будет иметь решающее значение

Если вы, веб-разработчик не стали включать –moz- префикс, чтобы не проверять новые свойства CSS в Firefox, а срок сдачи подходит к концу, и заказчик заставляет вас добавить данный префикс, то вам придется заново тестировать сайт в Firefox 46 или 47. Данные версии выйдут в апреле или мае, так что у вас еще есть немного времени.

Чтобы протестировать свой веб-сайт, не дожидаясь выхода Firefox 46/47, можно активировать данные изменения в Firefox Nightly при помощи настройки layout.css.prefixes.webkit в about:config. Если у вас установлена последняя версия Nightly, то по умолчанию должно стоять true. Пока что в Firefox Nightly работают не все изменения –webkit- префиксов, но все же это хорошая площадка, чтобы протестировать, как ваш сайт скоро будет выглядеть. Я бы подождал марта перед серьезным тестированием сайта в Firefox Nightly.

Намного важнее, что Microsoft Edge уже интерпретирует и отображает –webkit- префиксы похожим образом. А это означает, что любые WebKit стили вашего сайта уже отображаются в браузере, от которого этого совершенно не ожидали. Если вы еще не работали с данным браузером, то установите себе Windows 10 и получите к нему доступ для тестирования сайтов.

Вендорные префиксы постепенно уходят

К счастью, вендорные префиксы постепенно уходят параллельно с тем, как команды разработчиков находят новые решения. Команда Chrome/Blink немного изменили свой подход:

«Забегая наперед, вместо включения вендорных префиксов по умолчанию мы будем держать обычные свойства за флагом «активировать экспериментальные свойства веб-платформы» в about:flags до тех пор, пока данные свойства не будут включены по умолчанию.» — Команда The Chrome/Blink

Команда Firefox пошла по схожему пути: «Основное направление работы в Mozilla сейчас это уход от вендорных префиксов, путем их отключения или же перевод их в состояние обычных свойств, если они уже стабильны. Это как минимум наша общая политика, отдельные случаи заслуживают исключений. » — Борис из Mozilla

Microsoft Edge также нацелены на удаление поддержки префиксов: «Microsoft также пытается избавиться от вендорных префиксов в Edge. Это значит, что разработчикам при использовании особенных HTML5 тегов или CSS свойств не придется добавлять специальный префикс для браузера Edge. Вместо этого разработчики будут писать стандартный код.» — Mashable

Изящная деградация при помощи префиксов больше не работает

Уход от вендорных префиксов означает только одно – методика изящной деградации через префиксы больше не выход. Выделение конкретных браузеров через вендорные префиксы (к примеру, для Chrome) не входило в задачи этих префиксов; разработчикам всегда рекомендовалось использовать все префиксы (от –webkit- до –o-). Если вы используете какой-либо функционал, работающий на свойствах с вендорными префиксами, а также использовали тенхнику изящной деградации в вашем дизайне для других браузеров, то больше это не работает.

Заключение

Времена меняются. WebKit доминирование было непреднамеренным и вызвало переполох и несовместимость в интернете. Другие браузеры ищут способ расширить совместимость путем добавления –webkit- префиксов. Постепенно, с уходом вендорных префиксов, уйдет и данная проблема. Разработчикам же стоит проверить, не вызывает ли использование префиксов нежелательных последствий в не WebKit браузерах.

Автор: Patrick Catanzariti

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Песнь льда, пламени и браузерных префиксов

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

За прошедшие годы было предложено множество вариантов выхода из этой
непростой ситуации, но все они далеки от идеала. Повсеместно
презираемые браузерные префиксы — один из них. Идея заключалась в том,
что для каждого браузера могут быть реализованы экспериментальные (или
даже патентованные) возможности, к названиям которых необходимо
добавлять специальный префикс. Наиболее распространенные префиксы —
это -moz- для Firefox, -ms- для IE, -o- для Opera и -webkit-
для Safari и Chrome. Разработчикам предлагалось свободно
экспериментировать с этими специальными возможностями и делиться
своими впечатлениями с рабочей группой. Рабочая группа, в свою
очередь, должна была учитывать обратную связь от разработчиков при
подготовке спецификаций, постепенно доводя соответствующую
функциональность до совершенства. Так как у финальной,
стандартизированной версии должно было быть другое название (без
префикса), ее добавление не должно было порождать коллизии в
продуктах, использующих уже существующие, обремененные префиксом
эквиваленты.

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

В конце концов разработчики осознали, что если использовать только
существующие браузерные префиксы, то к уже имеющемуся коду необходимо
возвращаться и добавлять новые объявления каждый раз, когда в новом
браузере появляется поддержка их любимой классной возможности CSS. Не
говоря уж о том, что все префиксы, необходимые для той или иной
возможности, вообще довольно сложно держать в памяти. Решение? Конечно
же, всегда использовать все возможные браузерные префиксы, в конце
заодно добавляя версию без префикса, для того чтобы гарантировать
правильную обработку кода в будущем. В результате код стал выглядеть
примерно так:

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Среди этих объявлений два избыточны: -ms-border-radius и
-o-border-radius никогда ни в каком браузере не существовали, так
как в IE и Opera с самого начала было реализовано свойство
border-radius безо всякого префикса. Очевидно, что повторять каждое
объявление до пяти раз невероятно утомительно, а результирующий код не
приспособлен для нормальной поддержки. Появление инструментов, которые
автоматизировали бы это, было исключительно вопросом времени:

• на таких веб-сайтах, как CSS3, Please! (https://css3please.com)
  и pleeease (https:// pleeease.io/playground.html), вы можете вставить
  CSS-код без префиксов и получить обратно CSS со всеми необходимыми
  префиксами. Подобные приложения стали одними из первых реализаций
  автоматического добавления браузерных префиксов, но быстро растеряли
  свою популярность, так как по сравнению с другими решениями довольно
  неудобны в использовании;

• Autoprefixer (https://github.com/ai/autoprefixer) использует базу
  данных из Can I Use… (https://caniuse.com) для определения, какие
  префиксы необходимо добавить к коду без браузерных префиксов, и
  компилирует его локально, как препроцессор;

• моя собственная утилита -prefix-free
  (https://leaverou.github.io/prefixfree) выполняет тестирование
  возможностей в браузере, определяя, какие префиксы требуются. Ее
  преимущество в том, что она крайне редко требует обновления, так как
  получает всю необходимую информацию, включая список свойств, из
  окружения браузера;

• такие препроцессоры, как LESS (https://lesscss.org) и Sass
  (https://sass-lang.com), не предлагают стандартной функциональности
  добавления префиксов, но многие разработчики создают собственные
  подборки для возможностей, с которыми они чаще всего используют
  браузерные префиксы, и в обращении можно найти несколько подобных
  библиотек.

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

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