В феврале 2012 года мы опубликовали протокол встречи W3C, на которой Mozilla, Opera и Microsoft обсуждали реализацию префиксов -webkit в браузерах, не относящихся к webkit. Причина: некоторые разработчики используют только префиксы webkit — их сайты выглядят хорошо в некоторых браузерах, но ломаются в других, даже если они предлагают такой же уровень поддержки CSS3. Эта проблема особенно распространена в мобильных браузерах, и многие разработчики не выходят за рамки своих мощных устройств Apple или Android.
Теперь Opera объявила о поддержке 14 свойств CSS3 webkit в своем мобильном эмуляторе. Реализация в конечном итоге охватит все версии их настольных и мобильных браузеров. Если вы думаете, «Opera имеет крошечную долю рынка» , подумайте еще раз: это самый используемый в мире мобильный браузер .
Возможно, я чрезмерно драматичен, но на ум приходит известная линия Чарльтона Хестона: «Наконец-то они действительно сделали это. Вы маниакально. Вы взорвали это!
Opera -webkit Aliasing
Opera проанализировала таблицы стилей с 10 000 популярных веб-сайтов, чтобы определить, какие значения / свойства CSS будут получать псевдонимы -webkit:
| префикс | -webkit- псевдоним |
|---|---|
| -o-линейный градиент | -webkit-линейный градиент |
| коробчатого тень | -webkit-бокс-тень |
| -о-преобразование | -webkit-преобразования |
| -о-преобразовании координат | -webkit-преобразовании координат |
| граница радиуса | -webkit-граница радиуса |
| границы верхнего левого радиуса | -webkit-границы верхнего левого радиуса |
| границы верхнего правого радиуса | -webkit-граница-верхний правый-радиус |
| границы нижней левой радиуса | -webkit-граница-нижний левый-радиус |
| границы нижнего правого радиуса | -webkit-границы нижнего правого радиуса |
| -o-переход | -webkit-переход |
| -o-переход задержки | -webkit-переход задержки |
| -o-переходная продолжительность | -webkit-переходная продолжительность |
| -o-переход-свойство | -webkit-переход-недвижимость |
| -o-переход-временная функция | -webkit-переходное время функция |
Если браузер обнаруживает свойство, такое как -webkit-border-radius Если вы определили -webkit-border-radius-o-border-radiusborder-radius
#myelement
{
-o-border-radius: 3px;
border-radius: 6px;
-webkit-border-radius: 9px;
}
Все свойства имеют одинаковый приоритет, поэтому Opera применяет радиус границы 9px.
Что касается различий в поведении, оперное состояние:
Насколько мы можем судить, поведение с псевдонимами, которые мы использовали, идентично в WebKit и Opera или, по крайней мере, достаточно близко, чтобы различия не имели значения на практике. Если окажется, что различия достаточно велики, чтобы вызвать поломку, мы рассмотрим наши варианты, один из которых — привести поведение нашего варианта с префиксом -webkit- в соответствие с тем, что фактически делает WebKit.
Опера делает разумные доводы, чтобы оправдать свое решение. Хотя они понимают жалобы, их главная цель — создать браузер, который будет хорошо работать для пользователей, которые превосходят разработчиков на много тысяч человек.
Обратная реакция
Большинство разработчиков понимают проблему, но не согласны с ее решением. Это грубо и может сломать сеть. Принимая решение до логического предела, все поставщики будут поддерживать каждый префикс, но любые различия в реализации сделают свойство CSS бесполезным.
Решение поощряет плохие практики разработки. Хотя Opera советует вам использовать все префиксы вендоров, они усугубят проблему:
- Менее добросовестные разработчики увидят в этом оправдание только нацеливания на браузеры webkit.
- Если ваш сайт использует разные значения -webkit и -o, теперь на него будут влиять правила каскадирования CSS. Проще проанализировать и протестировать свой код или просто удалить свойства Opera?
- Случайно пропустить префикс -o станет легче, так как сайты будут работать как положено.
Несколько проблем уже сообщалось. Например, Modernizr оценивает префиксы по очереди, пока не найдет тот, который поддерживает браузер. Следовательно:
Modernizr.prefixed("transition");
теперь возвращает WebkitTransition Переходы являются новыми для Opera, и браузер не поддерживает все свойства CSS и JavaScript веб-набора. Если вы хотите настроить или отключить эффекты в Opera, вы не можете полагаться на код обнаружения, подобный Modernizr. Возможно, вам даже понадобится реализовать неприятный анализ браузера .
Однако моя самая большая проблема заключается в следующем: где находятся все эти проблемные сайты? Испытывал ли пользовательский опыт отсутствие эффектов закругления углов, градиента, тени, перехода и преобразования? Эти сайты действительно сломаны или Opera использовала (маркетинговую) возможность улучшить внешний вид своего браузера?
Поскольку Opera проанализировала 10 000 веб-сайтов, они могут связаться с владельцами напрямую. По крайней мере, они могли бы опубликовать «Зал позора», в котором приводятся примеры и освещаются технические вопросы. Многие разработчики с удовольствием связались бы с компаниями от имени Opera. Некоторые были бы готовы исправить сайты бесплатно, так как это может привести к будущим контрактам.
Простых решений кризиса префиксов поставщиков не существует . Я понимаю причины Opera, но, независимо от того, как это реализовано, неизбежно, что что-то в конечном итоге сломается.
Некоторые хорошие новости: Microsoft объявила, что не будет поддерживать префиксы webkit в Internet Explorer (хотя ничто не мешает им изменить это решение). Mozilla пока не раскрывает свои намерения — они будут внимательно следить за ситуацией Opera.