Префиксы поставщиков и их использование

Если вести речь о спецификациях CSS3-модулей, то либо их еще предстоит утвердить (чем занимается консорциум W3C), либо полностью реализовать все предлагаемые ими функции в браузерах, из-за чего поставщики браузеров используют для тестирования новых «экспериментальных» CSS-параметров префиксы поставщиков. Несмотря на то что это помогает разработчикам браузеров реализовывать новые CSS3-модули, нам, как занимающимся написанием CSS3-кода, это немного усложняет жизнь. Взгляните на приведенный далее код для создания скругленного угла:

.round{

-khtml-border-radius: 10px; /* Konqueror */

-rim-border-radius: 10px; /* RIM */

-ms-border-radius: 10px; /* Microsoft */

-o-border-radius: 10px; /* Opera */

-moz-border-radius: 10px; /* Mozilla (например, Firefox) */ — webkit-border-radius: 10px; /* Webkit (например, Safari и Chrome) */ border-radius: 10px; /* W3C */

}

В этом примере вы можете видеть свойства с префиксами поставщиков (причем это далеко не исчерпывающий список), каждое из которых обладает собственным уникальным префиксом, например — webkit-, что означает основанные на WebKit браузеры, или — ms- префикс такого поставщика, как Microsoft, подразумевающий Internet Explorer, и т. д. Из-за особенностей работы CSS браузер будет двигаться вниз по таблице стилей строка за строкой, применяя соответствующие свойства и игнорируя те, которые не может распознать.

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

ВЫРЕЗАННЫЕ ФРАГМЕНТЫ КОДА И JAVASCRIPT-РЕШЕНИЯ ДЛЯ БЫСТРОГО ДОБАВЛЕНИЯ ПРЕФИКСОВ CSS3.

Возможно, вам покажется удобным сохранять вырезанные фрагменты кода распространенных CSS3-правил, которые содержат все необходимые свойства с префиксами поставщиков. Таким образом, вы сможете просто вставлять их без необходимости заново печатать каждый раз. Во многих программах для редактирования кода (или интегрированных средах разработки (IDE — Integrated Development Environment), как их часто называют) имеется функция сохранения вырезанных сегментов кода и доступа к ним, которая при использовании CSS3 позволяет сэкономить массу времени. Кроме того, существуют JavaScript-решения, которые автоматически добавляют префиксы в CSS-файлы, и по адресу http://leaverou. github.com/prefixfree/ вы сможете отыскать прекрасное решение такого рода под названием — prefix-free.

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

.round{

-moz-border-radius: 10px; /* Mozilla (например, Firefox) */ — webkit-border-radius: 10px; /* Webkit (например, Safari и Chrome) */ border-radius: 10px; /* W3C */

}

В этом примере охватываются Firefox, Chrome, Safari и любые браузеры, которые полностью реализуют данное правило.

Я знаю, что вы думаете: «А разве указание версий одного и того же свойства, но с разными префиксами поставщиков не приведет к “раздутию” кода?» Что ж, приведет, но в небольшой степени. Независимо от того, сколько свойств с префиксами мы добавим, это все равно будет более быстрое, изящное и надежное решение, чем использование изображений.

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

Итак, мы знаем, что собой представляют префиксы и как применять их в правилах. Теперь взглянем на небольшие, легко реализуемые и полезные CSS3-трюки.

КОГДА ИМЕННО МОЖНО ИСПОЛЬЗОВАТЬ ОПРЕДЕЛЕННЫЕ CSS3- И HTML5-ФУНКЦИИ?

Поскольку мы все больше и больше углубляемся в CSS3, я очень рекомендую вам посетить сайт http://caniuse.com. Он поможет, если вам когда-нибудь потребуется узнать текущий уровень поддержки браузерами определенной CSS3- или HTMLS-функции (рисунок 5.1). Помимо отображения версий браузеров, поддерживающих определенную функцию (которые можно выяснить, введя название этой функции), на этом веб-ресурсе приводится самая свежая глобальная статистика использования с сайта http://gs. statcounter.com.

Страница сайта When can I use.