Для каких свойств нужны префиксы
В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в CSS.
Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.
Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit-, -moz-, -ms- и др.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:
- -webkit-: браузеры Chrome, Safari, Opera;
- -moz-: браузер Mozilla Firefox;
- -ms-: браузер Internet Explorer.
Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.
Причин для появления префиксов было достаточно много:
- Для включения в браузер экспериментальных свойств CSS, которые стандартом ещё не утверждены. Таким образом, производители браузеров производят тестирование и вносят предложения перед утверждением свойств CSS в стандарте.
- Для решения проблем с кроссбраузерностью.
- Для создания собственных свойств, которые не входят в стандарт CSS, но возможно появятся в нём через некоторое время.
Когда экспериментальное свойство утверждено в стандарте и прошло тестирование в браузере, у него обычно убирается префикс.
Рассмотрим в качестве примере следующий код:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.
При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.
Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.
На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing.
Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.
Сайт «Can I Use…»
Например: проверим, как реализовано свойство transform в браузерах.
На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:
- Красный прямоугольник — браузер, в котором данное свойство не реализовано;
- Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
- Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
- Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.
Префиксы вещь хорошая. Они помогают производителям браузеров в реализации новых возможностей. Но жизнь разработчиков от них становится только сложнее. Префиксов много, иногда наблюдаются различия в синтаксисе.
Проблема очевидна. Нужен способ облегчить работу с префиксами.
Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.
1. Препроцессоры
Суть препроцессоров в том, что автор файла стилей может использовать дополнительные возможности, которых нет в CSS, вроде переменных, подобия функций и много чего еще, изучив предварительно синтаксис препроцессора, а препроцессор уже создаст нормальный файл стилей, заменив переменные и прочий код на статичные значения. Возможность замены кода можно использовать и для того, чтобы автоматически генерировать кроссбраузерный код с префиксами.
Самые известные препроцессоры CSS это LESS и SASS.
Они являются прямыми конкурентами, хотя разница между ними есть. Оба могут использовать на стороне сервера, но LESS еще и доступен в виде javascript-файла, поэтому можно на эту особенность обратить отдельное внимание.
LESS
Этот препроцессор обладает синтаксисом, который проще, чем у конкурента. Существует возможность обрабатывать файлы стилей на стороне сервера, но нас интересует сейчас вариант работы на стороне клиента через файл javascript.
Подключение
<!doctype html>
<hеad>
<link rеl=»stylesheet/less» type=»text/css» href=»style.less»>
<sсript src=»less-1.1.3.min.js» type=»text/javascript»></sсript>
</hеad>
Миксин
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Использование
#shape1{
.border-radius(10px);
}
Для того, чтобы работать с префиксами, нужно использовать миксины (тот самый код, который знает что и где заменять). Существуют готовые наборы миксинов и библиотеки для CSS3
lesselements.com
github.com/jdmiller82/-lessins-
snipplr.com/view/47181/less-classes
roel.vanhintum.eu/more-less
Не обязательно компилировать файлы .less на сервере или в браузере, можно локально получить готовый файл CSS и уже его использовать на сайте
SimpLESS — приложение, которое автоматически компилирует .less в стандартный CSS. Бесплатно для всех платформ.
Less App — аналогичное приложение, но только для Мака.
Есть даже расширение для Дримвивера, компилирующее файлы .less в CSS.
Компьютер-клиент получает файлы .less и .js, после обработки в браузере имеем файл .css со всеми возможными префиксами
SASS
Написан на Ruby. Имеет больше возможностей, чем LESS, поэтому лучше подходит для крупных проектов. Использование для генерации префиксов будет практически как у конкурента, то есть через миксины.
Одним из плюсов является наличие фреймворка Compass, который содержит готовые библиотеки и миксины, в том числе и для работы с CSS3. Существует приложение для локальной компиляции файлов SASS в CSS. Кроссплатформенное, но платное (платной является графическая оболочка, сам компилятор опенсорсный).
Есть и библиотеки миксинов CSS3 для SASS:
github.com/thoughtbot/bourbon
На сервер происходит обработка файлов SASS, компьютер-клиент получает уже готовый файл .css
Достоинства препроцессоров:
+ Кроме префиксов, можно делать куда больше вещей
+ Возможность автоматически обрабатывать файл CSS (например, сжимать, удаляя лишнее)
+ Нормальное кэширование (правда, LESS кэшируется с помощью localStorage)
Недостатки препроцессоров:
– Для варианта с javascript — зависимость от включенных скриптов в браузере
– Генерируется код со всеми возможными префиксами, не только теми, которые нужны конкретному браузеру
Еще конкуренты
- CSS Agent на ASP.NET
- Stylus (имеет CSS3 расширение Nib)
- Turbine
- CSS Crush
- eCSStender
2. -Prefix-free
-Prefix-free — это скрипт, который нужно подключать к своим страницам. В отличие от препроцессоров, обрабатывает обычный файл CSS, то есть в коде нет переменных или миксинов, а самый обычный CSS-код, только без вендорных префиксов.
Обработка страниц стилей происходит с помощью Javascript.
Префиксы добавляются только для тех свойств, который конкретным браузером не поддреживаются без префиксов.
Компьютер-клиент получает файл .css без префиксов. После обработки в браузере с помощью javascript, только нужные префиксы добавляются в этот файл
Достоинства:
+ Автор файла стилей использует только один вариант свойств, без префиксов
+ Браузер пользователя не получает стили с «чужими» префиксами или префиксами, которые уже устарели
+ Валидный код
+ Можно удалить безболезненно, когда исчезнет в нем необходимость
Недостатки:
– Не обрабатываются стили, подключенные через import
– После загрузки сайта и перед полной обработкой CSS3-стилей возникает едва заметная пауза
– При отключенном Javascript пользователь не увидит некоторые CSS3-стили
– Дополнительный файл для загрузки (правда, всего 2KB в сжатом виде)
– Обработанный файл стилей не кэшируется
Конкуренты
- github.com/codler/jQuery-Css3-Finalize
- imsky.github.com/cssFx
3. Генераторы
Этот способ уже используется многими. Просто открываем один из онлайн-генераторов и копируем оттуда готовый код с префиксами.
Недавно я попробовал поискать генератор, который бы автоматически добавлял свойства с префиксами к написанному мной стандартному свойству. Оказалось, что есть несколько вариантов.
- prefixr.com Можно выбрать браузеры, для которых используются префиксы, можно сжимать код, использовать переменные, имеет плагины для редакторов кода
- prefixmycss.com
- cssprefixer.appspot.com Тут генератор работает как демонстрация возможностей серверного скрипта, доступного для бесплатного использования
- imsky.github.com/cssFx Этот генератор демонстрирует возможности скрипта на javascript, доступного для бесплатного использования
Загружаем на сервер файл с подготовленным вручную файловм .css со всеми префиксами
Достоинства:
+ Ничего не нужно устанавливать и настраивать
+ Часто генератор дает возможность удобной настройки значений для свойств CSS3
Недостатки:
– Нет автоматизации при создании и последующем изменении значений свойств CSS3
4. Редакторы кода
Ну и наверняка существует возможность автоматизации подстановки префиксов для редакторов кода и сред программирования. Иметь под рукой Zen Coding для префиксов было бы очень удобно.
На данный момент удалось найти плагины, использующие Prefixr:
На этой странице перечислены плагины для Notepad++, TextMate, Espresso, Coda и некоторых других.
Prefixr для NetBeans
UPD For those of you who don’t speak Russian this article in English.
От автора: префикс -webkit- сегодня настолько распространен в CSS, что некоторые сайты отказываются правильно работать без него. В то время как для разработчиков вендорные префиксы css последние пару лет означали прямой знак не совсем идеальной работы свойств, это привело к тому, что Mozilla пошли на отчаянный, но необходимый шаг. В Firefox 46 или 47 (релиз будет в апреле или мае 2016) Mozilla планирует ввести поддержку серии нестандартных –webkit- префиксов для повышения совместимости браузера с данным префиксом (даже на мобильных устройствах).
Идея не нова, Microsoft Edge также поддерживает различные -webkit- префиксы для совместимости. Opera начала поддерживать -webkit- префиксы в 2012, а затем перешла на Webkit движок Blink. W3C и разработчики браузеров не планировали использовать данный префикс в разработке сайтов:
«Официальная политика W3C гласит, что не следует использовать экспериментальные свойства в коде сайта. Однако люди используют их, так как хотят, чтобы их сайты использовали последние технологии и выглядели круто.» — страница W3C по оптимизации контента под разные браузеры
Тем не менее, разработчики всегда хотят получить доступ к последним свойствам как можно быстрее. Вендорные префиксы переворошили все с ног на голову и обеспечили Webkit доминирование, однако я считаю, что префиксы оказали огромное влияние на быстрое развитие интернета.
Способы Mozilla и Microsoft большинству сайтов только навредят. У большей части сайтов уже будут подключены префиксы –moz- или выяснится, что с новым обновлением Mozilla станет поддерживать новые свойства без нужды вносить изменения. Однако как профессиональные веб-разработчики мы должны покончить с этим и понять, что в некоторых дизайнах могут выявиться неоднозначные результаты. Вы, может быть, уже и сами знаете, какие из ваших проектов угробит это обновление. Веб-разработчики, настало время переосмыслить свой подход к вендорным префиксам и к их тестированию на сайтах.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Новые префиксы
Mozilla собирается включить ряд –webkit- префиксов. Из того, что я собрал, видно, что Mozilla не собирается сопоставлять свой список со свойствами Edge. Не всем свойствам нужна совместимость с движком Mozilla. Среди префиксов, которые Mozilla собирается добавить, судя по странице вики Compatibility/Mobile/Non Standard Compatibility будут следующие:
-webkit-flexbox
-webkit- для градиентов
-webkit-transforms
-webkit-transitions
-webkit-appearance
-webkit-background-clip
-webkit-device-pixel-ratio
-webkit-animation
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
-webkit-border*
Некоторые другие свойства могут быть в @-webkit-keyframes.
Тест на кроссбраузерность будет иметь решающее значение
Если вы, веб-разработчик не стали включать –moz- префикс, чтобы не проверять новые свойства CSS в Firefox, а срок сдачи подходит к концу, и заказчик заставляет вас добавить данный префикс, то вам придется заново тестировать сайт в Firefox 46 или 47. Данные версии выйдут в апреле или мае, так что у вас еще есть немного времени.
Чтобы протестировать свой веб-сайт, не дожидаясь выхода Firefox 46/47, можно активировать данные изменения в Firefox Nightly при помощи настройки layout.css.prefixes.webkit в about:config. Если у вас установлена последняя версия Nightly, то по умолчанию должно стоять true. Пока что в Firefox Nightly работают не все изменения –webkit- префиксов, но все же это хорошая площадка, чтобы протестировать, как ваш сайт скоро будет выглядеть. Я бы подождал марта перед серьезным тестированием сайта в Firefox Nightly.
Намного важнее, что Microsoft Edge уже интерпретирует и отображает –webkit- префиксы похожим образом. А это означает, что любые WebKit стили вашего сайта уже отображаются в браузере, от которого этого совершенно не ожидали. Если вы еще не работали с данным браузером, то установите себе Windows 10 и получите к нему доступ для тестирования сайтов.
Вендорные префиксы постепенно уходят
К счастью, вендорные префиксы постепенно уходят параллельно с тем, как команды разработчиков находят новые решения. Команда Chrome/Blink немного изменили свой подход:
«Забегая наперед, вместо включения вендорных префиксов по умолчанию мы будем держать обычные свойства за флагом «активировать экспериментальные свойства веб-платформы» в about:flags до тех пор, пока данные свойства не будут включены по умолчанию.» — Команда The Chrome/Blink
Команда Firefox пошла по схожему пути: «Основное направление работы в Mozilla сейчас это уход от вендорных префиксов, путем их отключения или же перевод их в состояние обычных свойств, если они уже стабильны. Это как минимум наша общая политика, отдельные случаи заслуживают исключений. » — Борис из Mozilla
Microsoft Edge также нацелены на удаление поддержки префиксов: «Microsoft также пытается избавиться от вендорных префиксов в Edge. Это значит, что разработчикам при использовании особенных HTML5 тегов или CSS свойств не придется добавлять специальный префикс для браузера Edge. Вместо этого разработчики будут писать стандартный код.» — Mashable
Изящная деградация при помощи префиксов больше не работает
Уход от вендорных префиксов означает только одно – методика изящной деградации через префиксы больше не выход. Выделение конкретных браузеров через вендорные префиксы (к примеру, для Chrome) не входило в задачи этих префиксов; разработчикам всегда рекомендовалось использовать все префиксы (от –webkit- до –o-). Если вы используете какой-либо функционал, работающий на свойствах с вендорными префиксами, а также использовали тенхнику изящной деградации в вашем дизайне для других браузеров, то больше это не работает.
Заключение
Времена меняются. WebKit доминирование было непреднамеренным и вызвало переполох и несовместимость в интернете. Другие браузеры ищут способ расширить совместимость путем добавления –webkit- префиксов. Постепенно, с уходом вендорных префиксов, уйдет и данная проблема. Разработчикам же стоит проверить, не вызывает ли использование префиксов нежелательных последствий в не WebKit браузерах.
Автор: Patrick Catanzariti
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и 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. Данные для России могут отличаться.