Браузерные префиксы CSS

Когда разработчики браузера внедряют новое свойство, значение или селектор, еще

не перешедшее в статус Candidate Recommendation (Кандидат в рекомендации), они

добавляют в начале свойства префикс с кодом механизма рендеринга. Например,

Moz-border-radius — это версия свойства border-radius, которая в настоящее

время используется в браузерах на базе Mozilla, таких как Firefox. В табл. 1.4 при-

веден список всех доступных префиксов.

Таблица 1.4. Браузерные префиксы свойств CSS

* В механизме рендеринга Presto свойства, связанные с речью, предваряются пре-

фиксом -xv-, а не -o-.

В этой книге мы будем использовать префиксы -moz-, -o- и -webkit-. Прочие не

так широко используются и не потребуются для рассматриваемых методов.

Зачем они нужны

Уникальные для производителей префиксы позволяют разработчикам испытывать

новые свойства, значения и селекторы до того, как соответствующие спецификации

будут завершены, — это отличный способ протестировать их «в полевых условиях»,

понять, требуют ли они корректировки и доработки. Если бы разработчики сразу

начали использовать стандартные свойства, не дополненные префиксами, им при-

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

свойств первоначально.

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

бы, что их поведение останется единообразным и предсказуемым. Если через какое-

то время создатели браузеров поменяют то или иное свойство — например, из-за

ошибок в первоначальной реализации или изменений самой спецификации — это

поставит под угрозу целостность всех существующих сайтов, на которых данное

свойство уже используется. Получается, что не только разработчики оказываются

в плену у первой несовершенной реализации — пример с них приходится брать

и создателям всех браузеров, и даже самому консорциуму W3C. Эрик Мейер (Eric

Meyer) в своей превосходной статье «Prefix or Posthack» приводит два примера такого

неудачного развития событий, взятых из реальной жизни (http://www.alistapart.

com/articles/prefix-or-posthack).

Но даже если создатели одного браузера не меняют реализацию свойств, чтобы не сло-

мать существующие сайты, это может сделать W3C. Что произойдет, если создатели

остальных браузеров станут применять новое поведение, описанное в обновленной

спецификации? В разных браузерах одно и то же стандартное свойство будет ото-

бражаться по-разному. Именно так обстояли дела во времена Netscape 4, Mac IE 5 и

Windows IE 6. Число сложных и нестабильных исправлений посторонних ошибок,

совершенно не связанных со свойствами, первоначально требовавшими коррек-

тировки, быстро увеличивалось, потому что нестандартное поведение браузера не

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

Разработчики понимают, что свойства с префиксами — экспериментальные и могут

быть изменены. Это дает создателям браузеров дополнительную свободу, позволяя

при необходимости вносить изменения и, следовательно, быстрее выпускать и ис-

правлять новые свойства. Разработчики сайтов и приложений, в свою очередь,

скорее получают возможность применить новые свойства и поучаствовать в про-

цессе доработки путем тестирования в реальных условиях.

Когда спецификация достигает более стабильного состояния, а разработчикам

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

избавляться. Если разработчики сайтов добавили в свои таблицы стилей версию

свойства без префикса — а делать это весьма полезно, чтобы не создавать проблем

с совместимостью в будущем, — веб-страницы автоматически начинают отобра-

жаться в соответствии с последними изменениями в спецификации свойства. Если

же они не предусмотрели версию свойства без префикса, то ничего страшного не

произойдет — она продолжает работать так же, как раньше. Ни один из сайтов, где

используется версия с префиксом, не сломается.

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

Вендорные префиксы представляют собой надпись, которая начитается с «-» или с «_» и для каждого браузера имеет смысл специального маркера, написанного перед CSS свойством.

Использование данного префикса гарантирует работу именно этого стиля в определённом браузере, а также то, что он не перекроется аналогичными стилями, предназначенными для других браузеров.

Как их отличать?

Каждый движок, на котором написан браузер, имеет свой вендорный префикс.

Рассмотрим самые популярные браузеры и их префиксы. Те которые написанны на движке WebKit, а именно Safari выше третьей версии и GoogleChrome, считывают префикс -webkit- , а Safari до третьей версии -khtml- , так как имеет в своей основе движок KHTML. Для Opera можно использовать следующие префиксы: -o-, -op-, -xv- . Firefox воспримет свойства имеющие приставку -moz- , а браузеры корпорации Microsoft те, перед которыми написано -ms- .

Как это выглядит на практике?

Рассмотрим на примере для свойства transition-duration:

Webkit- transition- duration: 0. 76s; - moz- transition- duration: 0. 76s; - o- transition- duration: 0. 76s; - ms- transition- duration: 0. 76s; transition- duration: 0. 76s;

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

Для чего это нужно?

Большинство производителей называют несколько причин, когда нужно использовать вендорные префиксы. Основные, из которых:

• Свойство, которое было написано только для конкретного браузера и не содержится в стандартном списке css.
• Свойство ещё разрабатывается или по каким-то причинам не имеет рекомендаций к использованию
• Css задаёт только часть возможностей стиля.

Разработчики компании Microsoft, помимо выше перечисленных причин, при помощи своего вендорного префикса -ms-, прячут от валидатора те конструкции, которые его не пройдут.
При верстке не возникает ни какого желания прописывать свойство заново и добавлять ему вендорный префикс, однако эта необходимость вызвана тем, что CSS и его спецификация не всегда содержит необходимые нам свойства. Кроме того, есть не маленький шанс, что описание свойства в дальнейшем измениться и использование префиксов будет не нужным.

Дополнительные возможности

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

Уже сейчас для верстки своих проектов можно исключить некоторые скрипты, заменив их стилями CSS.

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

Подводя итоги

– приставки к стилям css, имеющие смысловую нагрузку только для тех браузеров, к которым они относятся. Они дают возможность браузеру воспринимать не стандартные свойства, а также не воспринимать те стили, которые предназначены для других пользовательских клиентов.

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

В этой статье мы рассмотрим, что такое префиксы браузеров, причины их появления и как их использовать в 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" браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

• Красный прямоугольник - браузер, в котором данное свойство не реализовано;
• Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
• Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
• Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.

Префиксы конкретных браузеров

Ранее упоминалось, что спецификация CSS3 – это набор модулей, которые постепенно интегрируются производителями браузеров. Иногда интеграция включает в себя экспериментальную поддержку. Это означает, что пока спецификацию пишут, обсуждают и критикуют в W3C, изготовитель браузера может решить добавить поддержку для каких-то свойств, чтобы опробовать их на практике. В последнее время такая практика стала естественной частью процесса, и обратная связь, получаемая во время экспериментального использования, часто применяется, чтобы внести поправки в спецификацию.

С другой стороны, изготовитель браузера может захотеть ввести экспериментальное свойство, которое не входит ни в какой предложенный стандарт, но может получить такой статус когда-либо.

Для такой экспериментальной поддержки свойств CSS часто вводятся браузерные префиксы – например, так:

– webkit – border-radius

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

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

В табл. 1.03 перечислены самые широко используемые браузеры и связанные с ними префиксы. Мы будем использовать префиксы WebKit, Mozilla и Opera в части, касающейся CSS3 в примерах из следующих глав.

Таблица 1.03. Наиболее широко используемые браузеры и связанные с ними префиксы

Из книги Разгони свой сайт автора Мациевский Николай

8.2. Несколько советов для браузеров Ускоряем загрузку страниц в Firefox 3 В Firefox можно увеличить скорость загрузки и отображения страниц, значительно повысив комфортность работы в Интернете. Что для этого нужно сделать:Открыть страничку настроек, набрав в адресной строке

Из книги Интернет-разведка [Руководство к действию] автора Ющук Евгений Леонидович

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

Из книги Программирование автора Козлова Ирина Сергеевна

49. Оптимизация для конкретных моделей процессоров Если некоторая программа будет работать на компьютерах со строго определенными моделями процессоров, можно попытаться применить ориентированные на определенные модели процессоров команды.Многие из новых команд дают

Из книги Работа в Интернете автора Макарский Дмитрий

Использование браузеров Как уже упоминалось, основное предназначение браузера – просмотр веб-страниц, поэтому стоит отдельно поговорить об особенностях навигации в Интернете с использованием браузеров. Начнем с основных элементов управления, без которых нельзя

Из книги Цифровой журнал «Компьютерра» № 12 автора Журнал «Компьютерра»

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

Из книги Компьютерра PDA 20.03.2010-26.03.2010 автора Журнал «Компьютерра»

Opera наверстала отставание от других браузеров Андрей Письменный Бета-версия браузера Opera 10.50 снабжена совершенно новым интерпретатором языка JavaScript. Он называется Carakan и работает значительно быстрее, чем прежние версии. Это означает, что Opera, наконец, догнала прочие

Из книги XSLT автора Хольцнер Стивен

Opera наверстала отставание от других браузеров Автор: Андрей ПисьменныйОпубликовано 22 марта 2010 годаБета-версия браузера Opera 10.50 снабжена совершенно новым интерпретатором языка JavaScript. Он называется Carakan и работает значительно быстрее, чем прежние версии. Это означает, что

Из книги Путь программиста: от 100$ до 10000$ в месяц автора Никитин Александр

Преобразование документов XML при помощи браузеров Поддержка XSLT включена и в Microsoft Internet Explorer, и в Netscape Navigator. Из этих двух браузеров Internet Explorer обладает гораздо большей поддержкой XSLT, и здесь я буду использовать версию 5.5 этого браузера. О поддержке XSLT в Internet Explorer вы можете

Из книги Linux: Полное руководство автора Колисниченко Денис Николаевич

Шаг 2. Advanced Новичок. Опыт работы <= 0,5 года. Знания в рамках школьных и институтских курсов информатики + полученные на работе навыки решения конкретных задач. Этот период охватывает промежуток времени от получения предложения о работе до окончания испытательного срока.

Из книги CSS3 для веб-дизайнеров автора Сидерхолм Дэн

6.4.3. Специальные возможности браузеров Неужели в этом параграфе будет рассказываться, как работать с браузерами? Тогда его можно вообще пропустить или прочитать по диагонали. Нет, уважаемый читатель, я и не сомневался, что вы умеете работать с браузерами. Сейчас мы

Из книги Цифровой журнал «Компьютерра» № 225 автора Журнал «Компьютерра»

Как работают браузерные префиксы Вот как CSS работает на практике с браузерными префиксами. Возьмем свойство border-radius в качестве примера. Положим, мы хотим скруглить углы элемента с радиусом 10 пикселей; вот как это делается:.foo { – webkit-border-radius: 10px; – moz-border-radius: 10px; border-radius: 10px;

Из книги Установка, настройка и восстановление Windows 7 на 100% автора Ватаманюк Александр Иванович

Запасной вариант для всех браузеров Браузеры, которые пока что не поддерживают множественные фоны, проигнорируют свойство background целиком. Вот почему мы определили свойство background-color отдельно.На рис. 5.05 показано, как сайт выглядит в IE7: множественные фоны игнорируются, и

Из книги автора

А как насчет других браузеров? Открывая форму в Internet Explorer 7 – браузере с нулевой поддержкой CSS3, – мы видим вполне приемлемую рабочую форму (рис. 6.15). Это замечательно! Все улучшения, добавленные свойствами CSS3, были проигнорированы; остался скелет формы, работающий так, как

Из книги автора

А как насчет остальных браузеров? Добавление CSS-анимации – это первый раз в этой книге – когда мы улучшали пользовательский опыт только для одного производителя браузеров: WebKit. Одна из основных причин, по которой CSS3 используется все больше и больше, – новые свойства

Из книги автора

7 альтернативных браузеров для iPad Олег Нечай Опубликовано 15 мая 2014 Строго говоря, для iOS существует только один полноценный браузер - Safari. Все альтернативы - это фактически графические надстройки и наборы Java-скриптов для движка с открытым

Из книги автора

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

6 февраля 2012 в 14:14

CSS3: жизнь без префиксов

• Разработка веб-сайтов

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

Проблема очевидна. Нужен способ облегчить работу с префиксами.

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

1. Препроцессоры

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

Самые известные препроцессоры CSS это LESS и SASS .

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

LESS

Этот препроцессор обладает синтаксисом, который проще, чем у конкурента. Существует возможность обрабатывать файлы стилей на стороне сервера, но нас интересует сейчас вариант работы на стороне клиента через файл javascript.

Подключение

Миксин
.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 - аналогичное приложение, но только для Мака.

На сервер происходит обработка файлов SASS, компьютер-клиент получает уже готовый файл.css

Достоинства препроцессоров:
+ Кроме префиксов, можно делать куда больше вещей
+ Возможность автоматически обрабатывать файл CSS (например, сжимать, удаляя лишнее)
+ Нормальное кэширование (правда, LESS кэшируется с помощью localStorage)

Недостатки препроцессоров:
– Для варианта с javascript - зависимость от включенных скриптов в браузере
– Генерируется код со всеми возможными префиксами, не только теми, которые нужны конкретному браузеру

3. Генераторы

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

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