Префиксы, вебкит и вебстандарты

14 Feb, 2012

В верстальщицкой сфере наконец хоть что-то происходит! И я даже не про свой первый пост за полгода! О забавной ситуации с браузерами на базе webkit и всеми остальными.

суть проблемы вкратце

В данный момент некоторые мобильные браузеры теряют аудиторию из-за того, что многие сайты сделаны исключительно под webkit-браузеры (iPhone, iPod, iPad). Чтобы сохранить свою аудиторию они (браузеры) хотят начать «притворяться» webkit и поддерживать -webkit-*** свойства, в частности -webkit-text-size-adjust и какие-нибудь другие.

Кроме этого, и, что я думаю важнее, им придется отдавать такой user agent, чтобы фильтры принимали их за вебкит браузер (deja vu?), несмотря на то, что они им не являются.

Из-за этого многие стандартисты в ужасе. «Интернет катится в ад» и все такое :)

Но мне все это кажется забавным, и это возможность заглянуть в мир стандартов.

Почему это многих пугает

Во-первых потому что это как-то философски неправильно. Вот написал я в CSS -webkit-border-radius:10px; а окажется что граница закруглится и в Мозилле. А я, может, не хотел.

А, предположим, я дурак, и я писал всегда только -webkit-border-radius и не добавлял просто border-radius (как это по стандартам должно быть). И сайт был красивый только в iPhone, но никогда в Опере. А потом вдруг Опера начала поддерживать -webkit-border-radius. И все стало красивым и в Опере, зачем мне тогда использовать что-то кроме -webkit-border-radius?

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

Вобщем, это неправильно. Но.

Почему это не так уж страшно все

Потому что все они видят только "ОНИ РЕАЛИЗУЮТ ВЕСЬ ВЕБКИТ", а на самом деле один из инициаторов этого всего Тантек Челик (представитель Mozilla, и «автор» IE5 Mac) говорит вот о чем:
One possible proposal is to only parse other vendors' prefixes in conjunction with parsing unprefixed. e.g. with -webkit-transform. We wouldn't parse that until we also parse transform.
plinss: You're telling authors to just use webkit prefixes, we'll make it work. Tantek: No, we're only implementing a small minimized number of these.
Никто не собирается сделать вебкит универсальными свойствами, скорее они хотят залатать дыры, пару важных свойств, чтобы их браузеры сейчас хоть как-то отображали iphone-сайты.

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

fantasai: What if -webkit- was implemented only for mobile? That would add the unreliability factor that Tantek was asking for, because it would not work on desktop. And that would bias authors to using unprefixed, which is what we want.

В конце концов все пришли к мнению что от всех префиксов надо избавляться :). Чего и вам советую.

Реальная статистика свойств

Чтобы исследовать этот вопрос мозилловцы даже распарсили кучу CSS файлов, чтобы понять насколько велика проблема и какие свойства с префиксами используются. Статистика 30 000 сайтов, и примерно 90 000 CSS файлов.

Среди прочего, рейтинг использования css-свойств вообще. Width уверенно побеждает.

Кстати одни из самых редкоупотребляемых свойств dispaly и heigth, я, периодически, их тоже использую! Yeah!

А вот рейтинг префиксных свойств.

Скругления и тени побеждают с отрывом

Забавно, но ни одному из этих свойств уже год префиксы не нужны. Потому, ну кому какой вред от того что -webkit-border-radius заработает в Mozilla? Вряд ли бы кто-то это вообще заметил.

Все данные которые я обрабатывал лежат вот тут, можете сами поиграться.

Кто виноват

Конечно, все валят вину друг на друга.

Теперь w3c и браузеры говорят что виноват Webkit, который не сабмитит стандарты. Вебкиту, при этом как-то все равно. Другие хвалят Webkit за инновации, но винят во всем стандартистов и лень Webkit.

И в конце концов многие вдруг решили что виноваты разработчики!

Более того, на некоторых популярных блогах можно прочитать даже такую идеологически правильную фигню:

We at Webmonkey hope it’s obvious that building WebKit-only sites is a waste of time.

О, да.
Конечно, по-хорошему надо делать для всех, но говорить что делать сайты только для вебкит - трата времени, перегиб в другую сторону.
Кого из нас когда-то просили сделать сайт для Fennec или Opera Mini?

Хоть код и надо писать правильно, для всех, но спихивать ответственность на разработчиков тут тоже не очень верно. Они делали то, за что им платили деньги.

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

Вобщем, виновник этой забавной ситуации, разве что популярность Андроида и Айфона.

А все остальные просто пытаются сохранить свои доли на рынке. На самом деле браузеры ходили этим путем уже много-много-много раз. Достаточно почитать историю user agent string, чтобы понять что все притворяются всеми, и никто еще не умер. Хотя, порядка это тоже не добавляло.

Такие пироги в нашей веб-стандартной песочнице.

Почитать об этом же

Что делать?

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

Буду рад и вашему мнению об этом всем, особенно если оно отличается от моего :)

TL;DR: Webkit популярен, CSS WG медленное и педантичное, разработчики ленивые, Opera-IE-Moz тоже хотят жить, Жизнь прекрасна.

31 комментариев к “Префиксы, вебкит и вебстандарты”

1.Михаил Якименко | 16 Mar, 2012
Так что плюй осторожнее ;)
2.Михаил Якименко | 16 Mar, 2012
Так что плюй осторожнее ;)
ну то понятно что осторожней. Я же образно, и на тот момент в эмоциях, но суть то.. я пртив префиксов вообще, но с другой стороны и w3c, WHATWG тормозят со скоростью 20 пирожков в час! Разве не так?
3.KARPOLAN | 15 Feb, 2012
А где кнопка Like? Можно хоть в HTML5 хоть iFrame :)))
4.Keyten | 23 Sep, 2012
Просто надо сделать правило: если браузер придумал какое-то своё, уникальное свойство - пусть юзает префикс. Если же свойство уже в стандарте (пусть даже в самом черновике) - оно ДОЛЖНО БЫТЬ БЕЗ ПРЕФИКСА!
5.akella | 15 Feb, 2012
А я плевал на стандарты. Почему?
Ну, когда в целом в стандартах-вебе порядок, и появляются такие отклонения - на них легко плевать конечно. Но набор таких вот мелочей может сделать жизнь разработчиков снова почти невыносимой. Так что плюй осторожнее ;)
6.subzey | 15 Feb, 2012
А еще лет через пять свойства будут называться «-ms-webkit-border-radius».
7.Максим Гладких | 15 Feb, 2012
Спасибо за объяснение. Всегда придерживался стандартов и из-за паники вокруг этого префикса впал в лёгкий ступор.
8.Андрей Ситник | 14 Feb, 2012
Проблему отлично решает Compass. В коде разработчики не думают о префиксах, просто пишут +border-radius, а Compass уже сам вставляет текущие префиксы. Очередной браузер стал поддерживать свойство (может даже немного по другому) — разработчик просто обновит Compass и его стили сами обновятся (ему можно даже не следить за браузерами). Так уже у нас было с градиентами под Оперой.
9.akella | 14 Feb, 2012
Ну да, но жаль что compass подходит не всем :( хотя как вариант приучающий к правильному очень да.
10.Роман Комаров | 14 Feb, 2012
Спасибо за понятное объяснение, и, отдельно, за ссылку на статистику свойств, полезно! Меня в последнее время немного иной вопрос интересует: стоит ли всегда использовать значение без префикса пока свойство находится в активной разработке спецификаторами? Скоро, вероятно, будет небольшая волна поломавшихся градиентов из-за того, что они были вставлены «на будущее», но по новым, безпрефиксным, реализациям там появятся изменения, которые могут что-то поломать. И если для градиентов проблемы будут не так страшны (ну, косячный фон — не так страшно), то для иных новых свойств: раскладок и т.д. это может быть критичным.
11.akella | 14 Feb, 2012
Думаю в ситуации с градиентами, судя по их настроениям - они предпочтут оставить свой префиксный вариант рабочим еще очень долго. Синтаксис уже разошелся по сети, а они все так боятся что-то поломать, что мы, наверное, в безопасности =) Кроме этого, они там вот в этой самой дискуссии обсуждали что вот в такой ситуации: #blabla{ -webkit-border-radius border-radius} Возможно -webkit-border-radius в вебките должен иметь бОльший приоритет чем стандартное свойство. А Могилевский вообще вон предлагает убить префиксы -moz-ms-webkit-o и ввести префиксы -rfc770- по версиям спецификаций.
12.Михаил Якименко | 15 Feb, 2012
Странно как-то все. Недавно с Макеевым перепалка в Твиттере была. На самом деле, Юр, весь твой пост можно свести к одному: Браузеры пытаются сохранить свои позиции на рынке, а фанатичные разработчики ноют, что обидели их браузеры и прикрываются ненавистью к webkit. А я плевал на стандарты. Почему? Да потому что мир ЛЕТИТ вперед, а стандарты.. как всегда. Вот и получается раз нет стандартов, а нужно, то вебкит (гугл и эпл) создали свое. Потому как ложка дорога к обеду!
13.Андрей Ситник | 15 Feb, 2012
Кому Compass может не подходить? У нас Диновский верстает с ним статичные макеты. Compass как раз и расширяет sass не только библиотеками, но и консольными инструментами для standalone-работы (типа compass watch, который следит за изменениями файлов в папке и всё пересобирает).
14.akella | 15 Feb, 2012
Кому Compass может не подходить?
Внутри компаний это отличная штука. Но для фрилансера это подойдет далеко не всегда. Если бы его использовали все компании - подходил бы всем. Но для фрилансера получится что он сверстает проект в sass, а клиенту и его разработчикам на поддержку достанется сгенерированный некрасивый css. Ну, или, им тоже придется использовать sass, что маловероятно обычно.
15.vitvad | 15 Feb, 2012
link это для добавления всех префиксов, пишем чистый цсс без префиксов, в конце запускаем этот плагинчик - получаем цсс с префиксами, в правильном порядке. Пичалька состоит в том что плагин идет .dll во всяком случае для notepad++ и редактировать ручками довольно затруднительно
16.Никита Селецкий | 15 Feb, 2012
Считаю что нужно от имени веб-разработчиков написать призыв к Webkit и W3C отменить префиксы
17.akella | 15 Feb, 2012
Ну оно-то вроде да, но, как они их отменят, если их используют уже люди? Значит их придется поддерживать. А с другой стороны - если отменить их вообще, то как создавать новые свойства-стандарты? Чтобы какое-то из них стало стандартом обязательно нужны его реализации в браузерах. Но если их называть border-radius а не -moz-border-radius, то они типа могут не совсем отвечать реальной спецификации, ведь пробные еще. Хотя я вобщем считаю что префиксов быть не должно было. И то что во втором абзаце - меньшая проблема.
18.Interes | 18 Jun, 2012
Спасибо за информацию, очень интересно, а главное полезно было для меня.
19.Дмитрий | 16 Feb, 2012
Верстайте в Sublime Text 2 и используйте заготовленные сниппеты со всеми нужными префиксами, вот и все
20.Шурик | 21 Feb, 2012
Оффтоп. Юрий и многозадачный мужик http://monk.com.ua/uploads/images/00/00/01/2012/02/20/6bdbdc.jpg
21.akella | 21 Feb, 2012
Да ну, не похож :)
22.GreLI | 15 Feb, 2012
Роман Комаров (aka kizu), думаю, что использование префиксных допустимых если сайт находится на постоянной поддержке, то есть таких как фейсбук, гугль или яндекс. Если сайт надо сдавать заказчику, то максимум — для поддержки уже вышедших свойств в старых, но пока популярных версиях браузерах. Большую свору таких на данный момент представляют собой мобильные андроид-браузеры, Firefox 3.6. akella, градиенты скоро выйдут. У модуля CSS3 Images уже недавно был статус Last Call («Последний созыв»), а значит его готовят к выпуску. Можно говорить о том, что синтаксис с большой вероятностью уже не изменится (кроме частей, находящихся «под риском»). P.S. Лично я градиенты пока не использую, предпочитая картинки. Во-первых, лень все эти префиксы писать и проверять где какой синтаксис поддерживается. Во-вторых, data:uri картинку вписать проще. Самым нужным новым свойствам: border-radius и box-shadow префиксы уже не нужны.
23.Андрей Ситник | 15 Feb, 2012
Чем это после Compass стили менее красивые, чем если писать вручную. Sass очень гибкий и в том числе имеет разное форматирование. Но в любом случае, мы сейчас обсуждает только проблему с префиксами — и использование Sass — прекрасное решение проблемы. Разработчик Compass об этом и пишет. А указанная тобой проблема выбора технологий у верстальщика происходит только из-за того, что верстальщик вынесен за процесс разработки. В такой ситуации вообще сложно добиться хороших результатов.
24.akella | 16 Feb, 2012
Во-первых, лень все эти префиксы писать и проверять где какой синтаксис поддерживается. Во-вторых, data:uri картинку вписать проще.
Ну не знаю, есть же SASS и http://www.colorzilla.com/gradient-editor/ , мне кажется это все же проще чем data:uri =)
Sass очень гибкий и в том числе имеет разное форматирование.
Да, я видел, но все равно для фриланса это имеет мало смысла. Только если уж очень нравится именно SASS и в нем писать все. Больше заморочек чем выгоды для фриланс проектов.
25.Filsh | 17 Feb, 2012
Ну Sublime Text 2 хорош почти во всем, но проблему кроссбраузерной верстки он не решает. Я предпочитаю все допиливать ручками)
26.iurevych | 22 Mar, 2012
akella, конвертер саса в цсс настраиватся и в итоге css выглядит как нужно. Я тоже за идею помещать пачки вендор-префиксов в миксины и потом их вызывать как +transition(all .2s) к примеру ;)
27.ganges | 23 Apr, 2012
Тех, кто "плевал на стандарты", хочется с поучительными нравоучениями пинками загнать примерно в 2002 и заставлять верстать HTML таблицами. И переверстывать. И - переверстывать, обниматься и плакать и снова верстать. Ребята, вы походу просто не знаете что это такое для верстальщика - "довебстандартный" Веб.
28.Евгений | 11 Aug, 2014
Видимо действительно редкие свойства. Пока не встречал описание. Сорри!
29.akella | 11 Aug, 2014
Дык, это не свойства, это опечатки в свойствах, но в рейтинге всех употребляемых свойство они чаще всего встречаются среди всех других свойств с опечатками.
30.Евгений | 10 Aug, 2014
Граммар-наци негодует от ошибок в предложении: "Кстати одни из самых редкоупотребляемых свойств dispaly и heigth, я, периодически, их тоже использую! Yeah!" display & height! "Sublime text + emmet" поглощает неокрепшие умы своей услужливой автобстановкой слов :)
31.akella | 10 Aug, 2014
Там нет ошибок, это вобщем-то так и задумано, что такие опечатки самые популярные в рейтинге свойств.