Вендорные префиксы. Постепенной деградации, основанной на префиксах больше не будет. Рабочая группа W3C

От автора: префикс -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- для градиентов

Webkit-transforms

Webkit-transitions

Webkit-appearance

Webkit-background-clip

Webkit-device-pixel-ratio

Webkit-animation

Некоторые другие свойства могут быть в @-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 браузерах.

Перевод: Влад Мержевич

Разработчики с любовью и ненавистью относятся к вендорным префиксам CSS, которые позволяют быть на острие прогресса за счёт многословных объявлений:

Background-image: -webkit-linear-gradient(#fff, #000); background-image: -moz-linear-gradient(#fff, #000); background-image: -ms-linear-gradient(#fff, #000); background-image: -o-linear-gradient(#fff, #000); background-image: linear-gradient(#fff, #000);

Это хорошо работает в теории, но вот что происходит в реальности.

• Чаще всего экспериментальные свойства первыми реализуются в движке Webkit, но нет никакой гарантии что они появятся и в других браузерах.
• Иногда бывает сложно определить, является ли свойство с вендорным префиксом частью спецификации CSS. Некоторые производители браузеров не стандартизируют свойства.
• Даже если стандартное свойство изменилось, некорректные свойства с вендорными префиксами продолжают поддерживаться. Ваш старый код по прежнему работает и вам не надо к нему возвращаться чтобы его поправить.

Вы всё чаще будете находить сайты использующие только один префикс -webkit, даже если другие браузеры поддерживают свойство или оно имеет широкое распространение без префикса (вроде border-raduis ). Chrome и Safari поэтому выглядят лучше чем конкурирующие браузеры и другие производители этому не рады.

Была поднята проблема и её обсуждение на заседании W3C 7 февраля 2012 года .

Активисты стандартов учат людей использовать Webkit. Вы увидите по презентациям сторонников веб-стандартов, что они агитируют людей использовать префикс webkit.

Наша работа заключается в поиске совместного решения.

На данный момент мы пытаемся выяснить, сколько и какие свойства с префиксом webkit реально поддерживаются в Mozilla.

Если мы не будет поддерживать префиксы webkit мы закроем сами себя от части мобильного веба.

Давайте на мгновение заглянем в эту клоаку.

Браузеры не на движке Webkit будут поддерживать префикс -webkit. Такое решение рассматривается W3C.

Идея, скорее всего, с треском провалится. Две или более реализации одного и того же свойства не будут совместимы, так что разработчики не смогут использовать их где угодно. Победителей не будет, включая Apple и Google.

Но я больше озабочен непоправимым ущербом, который случится, если решение будет принято. Как только разработчики обнаружат что префикс webkit работает в Firefox, IE и Opera, они станут ожидать, что префиксы работают во всех свойствах. Принятие одного только Webkit будет расти экспоненциально и производители браузеров будут вынуждены внедрять префиксы. В этот момент свойства с webkit станут стандартом де-факто независимо от спецификации W3C. Игра окончена: открытый веб закроется.

Кто виноват?

Мы можем указать пальцем на следующих.

Рабочая группа W3C

Она тратит слишком много времени пока веб-стандарты достигают зрелости. Это может быть неизбежно, но производители браузеров игнорируют этот процесс.

Производители браузеров

В погоне продвинуть новые технологии производителям легко добавить префикс и забыть о нём. Веб-разработчики требуют больше информации: это свойство рассматривается W3C и когда префикс будет удалён?

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

Apple и Google

Обе компании виновны в продвижении префиксов webkit, словно они являются стандартной частью ежедневной разработки HTML5. Apple обвиняется в активной работе против W3C.

Mozilla, Microsoft и Opera

Другие производители месяцами следуют за браузерами на основе Webkit, если не годами. Добавление префиксов webkit нелепое решение, пора играть в свою игру.

Технологи веб-сайтов и евангелисты

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

Веб-разработчики

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

Вы помните последний раз, когда разработчики ориентировались на определённый браузер? Это был IE6. Мы до сих пор живём с наследием этого решения спустя десятилетие. Вы действительно хотите, чтобы история повторилась?

Время действовать

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

Затем протестируйте свой сайт в разных браузерах. Немного изящной деградации не повредит, но пренебрежение одним или несколькими современными браузерами это плохо. Исправьте код, в противном случае ваш сайт вносит свой вклад в эту проблему.

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

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

Подход Mozilla и Microsoft безопасен для большинства сайтов. На многих сайтах будет использоваться префикс -moz- или же не потребуется никаких действий для совместимости с будущим обновлением Firefox. Но как профессиональные веб-разработчики, мы должны тщательно рассмотреть и понять, какие последствия это повлечет. Вы наверняка знаете, какие из ваших сайтов могут пострадать от этого обновления.

Итак, пришло время переосмыслить подход к префиксам и протестировать сайты с ними.

Поддерживаемые префиксы

Есть целый ряд префиксов -webkit- , которые Mozilla может реализовать. Исходя тех данных, что я собрал, Mozilla не стремится к совпадению своего списка поддерживаемых префиксных свойств со списком Edge, так как не все из них нужны для совместимости движка раскладки.

Разработчики Firefox также близки к аналогичному подходу:

Текущий тренд в Mozilla это избегание вендорных префиксов за счет отключения не готовых свойств и использовании непрефиксной версии при достаточной стабильности. Это общая политика: в отдельных случаях возможны исключения - Борис из Mozilla

Microsoft Edge также собирается отказаться от вендорных префиксов:

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

Постепенной деградации, основанной на префиксах больше не будет

Этот уход от вендорных префиксов означает одну вещь - постепенная деградация с помощью вендорных префиксов не имеет перспектив.

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

Заключение

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

На первый взгляд кажется, что вендорные префиксы это что-то из разряда грамматики... Вендорные префиксы, вендорные суффиксы и вендорные окончания... Но какое отношение это имеет к верстке?

Оказывается, самое прямое! Вендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.

Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с "-" или "_" зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.

Какие они бывают?

Вендорные префиксы самых распространенных браузеров приведены в таблице ниже:

Как это работает?

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

Например, CSS свойство , отвечающее за прозрачность элемента, кроссбраузерно используется так:

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/ -moz-opacity:0.5;/* Mozilla 1.6 */ -khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */ opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */

Для чего это нужно?

В своем блоге разработчики Internet Explorer называют три причины использования вендорного префикса -ms- для браузера IE8:

1. Если это свойство разработано только для Microsoft IE и не описано в спецификации или CSS модуле
2. Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
3. Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации

Остальные разработчики используют вендорные префиксы по схожим причинам. Например Mozilla имеет огромный перечень индивидуальных CSS свойств и их значений с вендорными префиксами -moz-, которые разработаны специально для Firefox, и не описаны ни в модуле CSS ни в спецификации.

Кроме того, разработчики Microsoft ухитрились с помощью вендорных префиксов скрывать от валидатора невалидные конструкции. Это касается, прежде всего, фильтров. Для IE 5.5-7 фильтр выглядел так:

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/

Такая конструкция пройти валидацию в принципе не может! Но ее преспокойно проходит новая конструкция того же фильтра, но уже для IE 8:

Ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/

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

Приятный бонус

Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.

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

Наглядным примером такой реализации может быть использование CSS3 свойства . Поставим задачу реализовать для ссылки плавное изменение цвета фона при наведении курсора, не используя JavaScript. Для этого в CSS для ссылки нужно дописать следующий код

Webkit-transition:background-color 5s ease-in 3s;/* работает в Safari 3.1+, Chrome 1+ */ -o-transition:background-color 5s ease-in 3s;/* работает в Opera 10.5+ */ -moz-transition:background-color 5s ease-in 3s;/* планируется для Firefox 4.0+ */ transition:background-color 5s ease-in 3s;/* в прямом виде не поддерживает ни один браузер */

Живой пример можно посмотреть .

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

Сегодня нам хотелось бы поговорить о вендорных префиксах, назвать самые распространенные из них и немного пофилосовствовать на тему целесообразности их применения.

Что такое вендор

Прежде всего, хотелось бы определить понятие слова "вендор", чтобы всем нам стало ясно, почему CSS префиксы называются именно вендорными, а не как то иначе. Вендор - компания или бренд, которая занимается выпуском продуктов или предоставлением услуг и поставляет их под собственной торговой маркой. Слово происходит от французского vendere - продавать.

Что такое вендорные префиксы в CSS

В случае с CSS префиксами, вендорами являются производители браузеров, которые используют свою торговую марку в сокращенном виде как приставку (префикс) к тем или иным CSS свойствам для идентификации. "А зачем использовать эти префиксы? ", - спросите вы. Вендорные префиксы используются различными браузерами для внедрения в список CSS свойств и поддержки их работы собственными движками новых экспериментальных свойств, которые пока еще официально не вошли в оборот и не были добавлены в спецификацию W3C. Иными словами, какое-то свойство может выполнять совершенно новую и часто очень даже полезную функцию, которую раньше приходилось реализовывать с помощью специальных хаков, хитростей, уловок или даже джаваскриптов. Однако это свойство еще не было добавлено к стандартным и может интерпретироваться далеко не всеми браузерами, для этого перед этим свойством и добавляется префикс с названием вендора, которому он принадлежит и в дальнейшем, при интерпретации браузером CSS кода, свойство будет правильно понято и выполнит функцию, для которой оно собственно и было предназначено.

Перечень основных вендорных префиксов

А теперь давайте приведем перечень основных вендорных префиксов, существующих на данный момент и известных нам.

• -o- - браузер Опера
• -moz- - браузеры семейства Мозилла (компания-производитель знаменитого Мозилла Файерфокс)
• -ms- - Майкрософт Эксплорер
• -webkit- - браузеры, использующие движок Вебкит - Гугл Хром, Сафари
• -icab- - официальный альтернативный браузер Эппл - Айкаб
• -khtml- - редко используемый KHTML интерпретатор для KDE

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

Вот, к примеру, код, который отключает автоматическую трансформацию (ресайз) текста *:

Text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust: none;

* Свойство text-adjust-none есть смысл использовать для мобильных устройств, браузеры которых могут автоматически изменять размеры текста на странице, делая его более читаемым, но нанося при этом ущерб верстке и эстетике.

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

Немного уходя от темы, хочется сказать, что существует такой метод программирования, который называется ООП (объекто-ориентированное программирование). Так вот, его главная задача - сократить код, используя классы, функции и т. д. главным образом этот метод существует для того, чтобы выполнение какого-то определенного действия в разных участках программы не требовало написания одинаковых кусков кода. В случае ООП можно просто обращаться к заранее определенному классу и его функциям. Это упрощает работу и значительно сокращает и оптимизирует код. Почти то же самое происходит и в случае CSS с вендорными префиксами - когда их нет, код выглядит оптимизированным под все браузеры, а когда они приходят на помощь нетерпеливым верстальщикам, которые хотят бежать впереди медленного паровоза под названием W3C, код превращается в кашу, состоящую из копированных по 5 раз одних и тех же строк, отличающихся друг от друга каким-то непонятными префиксами.

Лучше конечно избегать использования вендорных префиксов и не пытаться обогнать паровоз единой спецификации, но если существует непреодолимое желание и острая необходимость использования того или иного CSS свойста, которое пока еще не принято W3C, то использовать префиксы конечно можно, никто вас за это линейкой по рукам бить не будет. Однако, на наш взгляд, это плохой тон.