Два новых предложения по преодолению кризиса с вендорными префиксами

Когда производитель браузер внедряет новую функцию 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;