Два новых предложения по преодолению кризиса с вендорными префиксами
Оригинал: sitepoint.com/css3-vendor-prefix-crisis-solutions-2
Перевод: Влад Мержевич
Веб-разработчики начали беспокоиться по поводу кризиса с вендорными префиксами с февраля 2012 года. Подводя итог, вот что должно случиться в идеальном мире.
- Производители браузеров внедряют экспериментальные свойства CSS3 с помощью собственных префиксов, например: -webkit-transform, -moz-transform, -ms-transform, -o-transform.
- Разработчики могут использовать современные технологии без нарушения кроссбраузерности. Чтобы свойства работали везде, они могут перечисляться с префиксами или без них.
- После того как свойство входит в рекомендацию W3C, все производители браузеров могут обеспечить стабильное свойство без префикса, например, transform.
- При необходимости разработчики могут удалить свойства с префиксами из своих стилей. Однако это не является строго обязательным, если свойство без префикса определяется последним в правилах CSS.
Вот что происходит в реальном мире.
- Производители браузеров внедряют экспериментальные свойства CSS3 с помощью собственных префиксов. В некоторых случаях производители продвигают их как «стандарт» HTML5, даже если свойства работают только для конкретного устройства или вообще не представлены в W3C.
- Некоторые разработчики используют проприетарные свойства только для одного браузера, например, -webkit-transform. Это может быть по незнанию, из-за лени или потому что проверяют на ограниченном числе устройств.
- После того как свойство входит в рекомендацию W3C, все производители браузеров могут обеспечить стабильное свойство без префикса, например, transform...
- но разработчики пренебрегают изменением своих стилей. Сайт выглядит хорошо в некоторых браузерах, но хуже в других, даже если он поддерживает стандарт спецификации W3C.
- Поставщики проявляют обеспокоенность и добавляют поддержку других префиксов в свой браузер, например, Opera внедрила префикс -webkit для некоторых свойств. Процесс нарушается и, хотя ещё слишком рано предсказывать результат, большинство разработчиков считают, что это плохой ход.
Мы подробно обсудили эти вопросы на SitePoint, но не пришли к простым решениям. Тем не менее, членами W3C было поднято два интересных предложения.
Вариант 1. Свойства без префикса поддерживаются с первого дня
Первое предложение пришло от Флориана Ривоаля, представителя Opera в W3C.
Когда производитель браузер внедряет новую функцию CSS, она должна поддерживаться с первого дня, как с префиксом, так и без, два синонима. Если таблица стилей содержит оба свойства, с префиксом и без, последнее побеждает в соответствии с каскадированием.
Авторы должны писать свои стили используя свойства без префикса и только добавлять версии свойств с префиксом (ниже свойства без префикса) при нахождении ошибок или несоответствия в поведении браузера.
Если накапливается большое количество контента использующего префикс, поставщик может принять решение заморозить поведение свойства с префиксом для дальнейшего совершенствования свойства без префикса.
Например, вы можете использовать следующий код c transform в вашем CSS:
transform: rotate(30deg);Свойство будут проигнорировано всеми браузерами, которые не поддерживают transform. Если есть разница между двумя или более реализациями, к примеру, Webkit-браузеры поворачивают по умолчанию против часовой стрелки, вам надо переопределить свойство, например так:
transform: rotate(30deg);
-webkit-transform: rotate(-30deg);Это простое решение и его легко реализовать. Большинство существующих стилей будет продолжать работать и свойства с префиксами потребуются редко. В большинстве случаев вам опять никогда не придется обновлять CSS.
Однако, что случится, если Webkit изменит вращение по умолчанию на вращение по часовой стрелке, утверждённое W3C? Разработчики должны будут исправить свои таблицы стилей, удаляя или переставляя свойство -webkit-transform: rotate(-30deg). К сожалению, не все использует одну и ту же версию Webkit одновременно. Вы можете столкнуться с ситуацией, когда ваш сайт работает в Chrome, но не работает несколько месяцев в Safari.
Вариант 2. Новый модификатор !производитель-draft
Второе предложение пришло от Франсуа Реми.
Позвольте представить модификатор «!производитель-draft». Я предлагаю с самого начала использовать свойства без префикса, но с маркером, объясняя какую версию свойства мы встроили в наш CSS:
border-radius: 3px !webkit-draft;
Любой не Webkit-браузер понимающий border-radius в случае, если он совместим с webkit-draft, может поддерживать декларацию. В этом отличие от префиксов: другие браузеры не выдают себя за Webkit, они просто признают что поддерживают одно определённое свойство путём добавления webkit-draft. Браузеры не совместимые с этим методом будут просто игнорировать декларацию. Для браузеров, которые меняют поведение свойства, рекомендуем повторять флаг «!производитель-draft» (с номером версии если понадобится).
Это решает проблему с изменением значения свойства, а не его имени (по аналогии с !important). Опять же, может быть использован следующий код с transform:
transform: rotate(30deg);Но по умолчанию вращение против часовой стрелки может быть исправлено в любом браузере придерживаясь спецификации Webkit.
transform: rotate(30deg);
transform: rotate(-30deg) !webkit-draft;Если в дальнейшем браузер начнёт придерживаться спецификации W3C, второе свойство будут игнорироваться.
Это также позволяет внедрить поддержку версий, например.
transform: rotate(30deg);
transform: rotate(-30degrees) !webkit-draft;
transform: rotate(-30deg) !webkit-draft-2;Это гибкое решение, которое, в итоге, учитывает проблему развития свойств в течение времени.
К сожалению, данный вариант сложнее в реализации и внедрение может занять несколько месяцев, даже если все производители договорятся сегодня. Технически это может лучше, но подход принципиально иной и он может нарушить существующие стили. В краткосрочной перспективе производители, вероятно, будут поддерживать как префиксы, так и модификаторы, а это может привести к путанице.
Мне нравятся оба решения. С точки зрения перспективы вариант с модификаторами выглядит наиболее логичным, но я сомневаюсь, что его можно учитывать, пока поставщики не «завершат» работу над CSS3 и не приступят к CSS4.
Поддержка свойств без префиксов более практична, но наверняка вызовет массу проблем, которые не могут быть исправлены в CSS самостоятельно. Но, возможно, это цена, которую вы платите за использование экспериментальных технологий?
Есть ли у вас предпочтения из этих вариантов? Или уже слишком поздно, чтобы предотвратить катастрофу с вендорными префиксами?