Всем, всем, всем: время обновлять свой CSS3

Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.

Отсортируйте префиксы

Не существует обязательного требования по упорядочиванию префиксов. Тем не менее, настоятельно рекомендуется расположить их в алфавитном порядке, с безпрефиксной версией в конце. То есть правильно было бы сортировать так: moz, ms, o, webkit, а затем свойство без префикса.

Opera недавно добавила поддержку -webkit- префиксов для нескольких CSS свойств. Это было необходимо поскольку многие разработчики используют только префикс для webit, либо попросту не включают префикс opera. Т.к. принято считать, что оба префикса, -o- и -webkit-, обладают одинаковой спецификой, по порядку выигрывает webkit, и если указаны оба, то использован будет именно он. Вы возможно хотели бы использовать -o- для Opera, особенно, если приходится что-то замещать, поэтому было бы уместным предложение сортировать префиксы по длине:

-webkit-property
-moz-property
-ms-property
-o-property
property

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

Этот совет, конечно, обладает наименьшей пользой в этой статье, тем не менее, польза от него доказана на практике.

Уберите избыточные префиксы

Некоторое количество CSS3 свойств уже довольно давно доступны к использованию без префиксов, например border-radius. В недавнем прошлом лишь немногие CSS спецификации доросли до уровня, который сейчас считается приемлемым, чтобы производители браузеров могли убрать префиксы. Среди них находятся спецификации Transforms, Transitions, Animations, Multi-Column Layout, Flexbox, и Image Values (градиенты, преимущественно). Различные браузеры находится на различных этапах пути к удалению префиксов, но некоторые уже готовы к этому, в зависимости от того, какие из более старых версий браузеров Вам приходится поддерживать.

box-sizing

Internet Explorer и Opera поддерживали box-sizing без префиксов с тех самых пор, когда спецификация была реализована, так что Вам нужно принимать во внимание лишь браузеры на основе Gecko и Webkit. Firefox до сих пор требует префикс -moz-, в то время как Вы можете опустить префикс для Webkit, если не нужна поддержка:

• Chrome 9 и ниже (~0.30% рынка)
• Safari 5 и ниже (~0.74% рынка)
• Браузер Android 3 и ниже (> 60% девайсов на Android в данный момент)
• Safari на iOS 4.3 и ниже
• Браузер BlackBerry 7 и ниже

Рекомендовано использовать:

-webkit-box-sizing: value;  /* рассчитывать на удаление по мере обновления пользователей Android */
-moz-box-sizing: value;
box-sizing: value;

box-shadow

Ситуация с box-shadow практически аналогична box-sizing, за исключением того, что Firefox требует от Вас префикс только в версиях 3.5 и 3.6. Вместе они представляют 0.77% текущего рынка.

Рекомендовано использовать:

-webkit-box-shadow: value;  /* удалять по мере обновления Android, либо если наличие box-shadow не так критично */
box-shadow: value;

Лично я бы удалил -webkit-box-shadow, т.к. это чаще всего не критичный элемент стилей, в отличие от box-sizing, который способен поломать разметку.

border-radius

Как и в ситуации с предыдущими двумя свойствами, Opera и Internet Explorer поддерживали border-radius без префикса с момента реализации. Можно опустить -webkit- и -moz- если не нужна поддержка следующих браузеров:

• Firefox 3.6 и ниже (~0.95% рынка)
• Chrome 4 и ниже (~0.05% рынка)
• Safari 4 и ниже (~0.12% рынка)
• Android 2.1 и ниже (~3% актуальных Android девайсов)
• Safari на iOS 3.2 и ниже

Рекомендовано использовать:

border-radius: value;

Более свежие спецификации

Плохая новость в том, что Вам все еще нужно использовать -webkit- в современных версиях Webkit для всех спецификаций, которые перечислены в этом разделе. Хорошая же новость в том, что больше не надо писать префиксы для градиентов, transitions, transforms и анимаций, начиная с:

• Internet Explorer 10
• Opera 12.1
• Firefox 16

К тому же, префиксы никогда не были нужны для все вышеуказанных спецификаций (кроме 2D трансформаций) в IE. 3D трансформации не реализованы в Opera, но можно рассчитывать, что они будут реализованы сразу без префиксов.

Я бы порекомендовал использовать -webkit-, -moz-, -o- и версию без префикса (принимая во внимания то, что ниже будет написано о градиентах), за исключением того, что нужно помнить про префикс -ms- для 2D трансформаций и опускать -o- для 3D трансформаций. В ближайшем будущем можете заняться удалением поддержки Firefox и Оперы, т.к. пользователи обновляются довольно шустро, и в этих браузерах даже близко нет такой проблемы по сравнению с пользователями Android — эти обновляют свою операционную систему с черепашьей скоростью.

Мульти-колоночная раскладка была реализована без префиксов в IE и Опере. Но они по-прежнему необходимы в Firefox и во всех версиях Вебкита.

Flexbox вообще легендарен (позже я напишу об этом), и в связи с этим требует поддержки нескольких различных синтаксисов и префиксов, но поддерживается современными версиями всех браузеров. Свойство реализовано без префиксов в Opera 12.1.

Добавьте свойства без префиксов

Так как упомянутые спецификации теперь готовы к безпрефиксному использованию, настало время для разработчиков этим воспользоваться. В теории, эти свойства больше не должны никак поменяться — по ним достигнуты все необходимые соглашения в рабочих группах CSS.

Среди разработчиков существует два подхода. Первый подразумевает использование в работе безпрефиксных версий свойств. Если Вы практикуете этот подход, то Вам всего лишь нужно удалить неиспользуемые префиксы, но перед этим загляните в следующую главу, т.к. существуют некоторые подводные камни. Второй подход, соответственно, состоит в том, чтобы не пользоваться безпрефиксными версиями. Если Вы из этих, то теперь Вам нужно будет их все добавить. В следующей главе описано, как это делать.

Обновитесь до нового синтаксиса

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

Широко известен тот факт, что border-radius переключился на альтернативный синтаксис, вместо того, который изначально был в Firefox 2. Также известно, что похожая вещь произошла с градиентами, взамен решения Safari. Но наверняка не все знали (а тем более, обновили в живых проектах), что синтаксис градиентов изменился еще раз. Если Вы давненько не притрагивались к своим градиентам, скорее всего куча Вашего кода уже устарела и ждет решительных действий.

Новый синтаксис градиентов

К счастью, до нового синтаксиса очень просто обновиться, и все, что Вам на самом деле необходимо, это обновить безпрефиксную версию. Вы можете оставить префиксы без изменений. Все свежие браузеры поддерживают это нововведение, за исключением Webkit. Да да, Вебкит отстает от IE!

Основное правило: если Вы указываете направление, то оно должно быть перевернуто и предшествоваться ключевым словом to. Таким образом:

background:  -prefix-linear-gradient(left, white, black);

Становится:

background:  linear-gradient(to right, white, black);

Если Вы указали угол, то начальная точка отсчета сместилась. Ранее точка 0deg находилась на востоке. Углы увеличились против часовой стрелки, так что теперь 90deg начинается на севере. С безпрефиксным синтаксисом линия градиента в 0deg начинается на севере и угол растет по часовой стрелке. Формула перерасчета со старых значений выглядит как abs(oldDegValue − 450) mod 360.

Для круговых градиентов, позиции и длине должно предшествовать ключевое слово at:

background: -prefix-radial-gradient(center, white, black);

Становится:

background: radial-gradient(at center, white, black);

Ключевые слова cover и contain по отношению к размеру градиента больше не поддерживаются. cover меняется на farthest-corner и contain на closest-side.

И наконец, если Вы укажете граденту позицию, а вместе с тем форму или размер, то позиция должна быть указана последней, таким образом:

-prefix-radial-gradient(center, 50px 25px, white, black);

Превращается в:

-radial-gradient(50px 25px at center, white, black);

Новый синтаксис Flexbox

Чтобы сосчитать, сколько раз менялся синтаксис Flexbox, у меня не хватит пальцев на руках. К счастью, этот функционал используется реже, чем те же градиенты, в силу того, что сайты попросту ломаются, если flexbox не поддерживается браузером.

На данный момент только Опера поддерживает новый синтаксис без префиксов. Хром поддерживает его с префиксами начиная с Chrome 21, Firefox собирается поддерживать новый синтаксис без префиксов начиная с версии 20, но сейчас ему доступен только старый синтаксис. IE поддерживает слегка устаревший синтаксис, но не тот, который присутствует в старых реализациях Webkit и Firefox. Safari сейчас поддерживает только старую запись. Чтобы добиться максимальной совместимости, Вам нужно использовать:

• Самый свежий безпрефиксный синтаксис: display: flex и компания (Opera, Firefox 20, и возможно Chrome в ближайшем будущем).
• Самый свежий синтаксис с префиксом -webkit-: display: -webkit-flex и компания (Chrome 21). Было бы разумным забить на это и подождать безпрефиксной реализации на старом синтаксисе.
• Старый новый синтаксис с префиксом -ms-: display: -ms-flexbox и компания (IE10).
• Старый синтаксис с -moz- и -webkit-: display: -webkit-box (WebKit), display: -moz-box (Firefox).

Спецификация слишком мудреная, чтобы провести сравнение в рамках этого поста, но можно прочитать о том, как заметить разницу и посмотреть несколько демок старого старого и нового нового синтаксиса на CSS Tricks. Крис не затрагивает старый новый (или же это новый старый...) синтаксис, так что можно сходить за подробностями еще и к документации Flexbox от Microsoft.

Информация о распространении браузеров была взята с StatCounter за декабрь 2012. Данные об актуальных версиях Android взяты из официального отчета Google. Данные для России могут отличаться.

Автор: shebanoff

Источник