Близится судный день: Opera внедрила префиксы Webkit

Оригинал: sitepoint.com/opera-css3-webkit-prefix

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

В феврале 2012 года мы выложили протокол заседания W3C, на котором Mozilla, Opera и Microsoft обсуждали внедрение префиксов -webkit в не-Webkit-браузеры. Причина: часть разработчиков использует только префиксы webkit — их сайты хорошо выглядят в некоторых браузерах, но рушатся в других, даже если они предлагают такой же уровень поддержки CSS3. Проблема особенно распространена в мобильных браузерах и многие разработчики не в состоянии выйти за рамки своих высокотехничных устройств Apple или Android.

Опера анонсировала поддержку 14 CSS3-свойств Webkit в своём Mobile Emulator. Реализация в конечном итоге дойдёт до всех выпусков настольных и мобильных браузеров. Если вы считаете, что «Opera это малая доля рынка», подумайте еще раз: это наиболее используемый мобильный браузер в мире.

Возможно, я чрезмерно драматизирую, но на ум приходит известная фраза Чарлтона Хестона: «Они действительно это сделали. Вы маньяки. Вы взорвали это!».

Синонимы -webkit в Opera

Опера проанализировала стили 10 тысяч популярных сайтов, чтобы определить, какие значения и свойства CSS получат синонимы с -webkit.

Префикс -o-	Синоним с -webkit
-o-linear-gradient	-webkit-linear-gradient
box-shadow	-webkit-box-shadow
-o-transform	-webkit-transform
-o-transform-origin	-webkit-transform-origin
border-radius	-webkit-border-radius
border-top-left-radius	-webkit-border-top-left-radius
border-top-right-radius	-webkit-border-top-right-radius
border-bottom-left-radius	-webkit-border-bottom-left-radius
border-bottom-right-radius	-webkit-border-bottom-right-radius
-o-transition	-webkit-transition
-o-transition-delay	-webkit-transition-delay
-o-transition-duration	-webkit-transition-duration
-o-transition-property	-webkit-transition-property
-o-transition-timing-function	-webkit-transition-timing-function

Если браузер обнаруживает свойство вроде -webkit-border-radius, то он применяет эффект. Если вы задали -webkit-border-radius, -o-border-radius и border-radius, то используются обычные правила каскадирования CSS и будет задействовано последнее правило или наиболее подходящий селектор, например:

#myelement
{
  -o-border-radius: 3px; 
  border-radius: 6px;
  -webkit-border-radius: 9px;
}

Здесь все свойства имеют равный приоритет, поэтому Opera применяет радиус скругления 9px.

Что касается различий в поведении, Opera заявила:

Насколько мы можем судить, поведение свойств, к которым мы сделали синонимы в Webkit и Opera, идентично, или, по меньшей мере, достаточно близко, чтобы различия не учитывались на практике. Если выяснится, что эти различия достаточно большие, чтобы привести к поломке, мы рассмотрим варианты, одним из которых является приведение поведения нашего префикса -webkit к актуальному Webkit.

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

Ответный удар

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

Решение поощряет плохую практику разработки. Хотя Opera советует вам использовать все вендорные префиксы, это лишь усугубляет проблему.

• Менее добросовестные разработчики будут рассматривать это как оправдание ориентироваться только на браузеры Webkit.
• Если ваш сайт использует разные значения с -webkit и -o, они будут зависеть от правил каскадирования CSS. Что легче — анализировать и перепроверять код или просто удалить свойства Opera?
• Станет легче случайно опустить префикс -о, поскольку часть сайтов будет работать как и ожидалось.

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

Modernizr.prefixed("transition");

теперь возвращает WebkitTransition в Opera. Эффект transition нов для Opera и браузер поддерживает не все свойства CSS и JavaScript. Если вы хотите настроить или отключить эффекты в Opera, то не можете полагаться на Modernizr в качестве определителя кода.

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

Поскольку Opera проанализировала 10 тысяч сайтов, она может связаться с их владельцами напрямую. По крайней мере, она могла бы опубликовать «зал позора», в котором приводятся примеры и выделяются технические проблемы. Многие разработчики с радостью бы связались с компаниями действующими от имени Opera. Некоторые готовы исправить сайты бесплатно, так как это может привести к будущим контрактам.

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

Несколько хороших новостей: Microsoft объявила, что не будет поддерживать префиксы Webkit в Internet Explorer (хотя им ничего не мешает отменить это решение). Mozilla пока ещё не раскрыла свои намерения — она будет внимательно следить за ситуацией с Opera.