JavaScript. Подробное руководство, 6-е издание, стр. 232

16.1.4. Нестандартные свойства

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

moz-, в Chrome - -webkit-, а в IE - -ms-. Производители броузеров добавляют префиксы, даже когда реализуют свойства, которые в будущем, как предполагается, будут включены в стандарт. В качестве примера можно назвать свойство border-radius, которое определяет закругленные углы. Это свойство впервые было реализовано как экспериментальное в Firefox 3 и Safari 4, и к его имени были добавлены соответствующие префиксы. Когда стандарт устоялся в достаточной степени, в версиях Firefox 4 и Safari 5 префикс был убран, и теперь они поддерживают свойство border-radius без префикса. (Chrome и Opera уже давно поддерживают это свойства без префикса. IE9 также поддерживает его без префикса, но IE8 не поддерживает его, даже с префиксом.)

При работе со свойствами CSS, которые в разных броузерах имеют отличающиеся имена, можно определять для таких свойств классы:

.radius10 {

border-radius: 10рх; /* для текущих броузеров */

-moz-border-radius: 10рх; /* для Firefox 3.x */

-webkit-border-radius: 10рх; /* для Safari 3.2 и 4 */

}

Определив такой класс, можно просто добавить значение «radius10* в атрибут class любого элемента, чтобы дать элементу рамку с закругленными углами.

16.1.5. Пример CSS-таблицы

Пример 16.1 представляет собой HTML-файл, определяющий и использующий таблицу стилей. Он иллюстрирует селекторы, базирующиеся на имени тега, атрибутах class и id, а также содержит встроенный стиль, определяемый атрибутом style. На рис. 16.1 показано, как этот пример отображается в броузере.

JavaScript. Подробное руководство, 6-е издание - i_026.jpg

Пример 16.1. Определение и использование каскадных таблиц стилей

<head>

<style type="text/css">

<b>  /* Указывает, что заголовки отображаются курсивом синего цвета. */ </b>

 h1, h2 { color: blue; font-style: italic }

 /*

<b>  * Любой элемент с атрибутом class=&quot;WARNING&quot; отображается крупными жирными</b>

<b>  * символами, имеет большие поля и желтый фон с жирной красной рамкой.</b>

 */

 .WARNING {

 font-weight: bold; font-size: 150%;

 margin: 0 1in 0 1in; /* сверху справа, снизу слева */

 background-color: yellow;

 border: solid red 8px;

 padding: 10px; /* 10 пикселов со всех 4 сторон */

 }

 /*

<b>  * Текст заголовков hi и h2 внутри элементов с атрибутом class=&quot;WARNING&quot;</b>

<b>  * должен быть выровнен по центру, в дополнение к выделению синим курсивом.</b>

 */

 .WARNING h1, .WARNING h2 { text-align: center }

 /*

 * Отдельный элемент с атрибутом id="special" отображается

 * прописными буквами по центру.

 */

 #special {

 text-align: center;

 text-transform: uppercase;

 }

</style>

</head>

<body>

<b>  &lt;h1 Демонстрация использования каскадных таблиц стилей&lt;/h1&gt;</b>

 <div class="WARNING">

 <h2>Предупреждение</h2>

 Это предупреждение!

<b>    Обратите внимание, как оно привлекает внимание жирным шрифтом и яркими цветами. Также обратите внимание, что заголовок выровнен по центру и выделяется синим курсивом.</b>

 </div>

 

<b>    Этот абзац выровнен по центру&lt;br&gt; и выводится прописными буквами.&lt;br&gt;</b>

 

<b>      Здесь мы явно используем встроенный стиль для переопределения прописных букв.</b>

 

 </р>

Ультрасовременные свойства CSS

Когда я работал над этой главой, CSS находился в процессе революционных изменений: производители броузеров реализовали поддержку новых мощных свойств стиля, таких как

border-radius, text-shadow, box-shadow

column-count

. Другой качественно новой возможностью CSS стали веб-шрифты: новое CSS-правило

@font-face

позволяет загружать и использовать нестандартные шрифты. (Подробнее о шрифтах, которые свободно могут использоваться в веб-страницах, и о простом механизме их загрузки с серверов компании Google можно прочитать на странице http://code.google.com_l/web-fonts.)

Еще одной революционной разработкой в области каскадных таблиц стилей стал модуль «CSS Transitions». Этот проект стандарта определяет возможности, позволяющие преобразовать в анимационные эффекты любые динамические изменения стилей CSS в документе. (Когда поддержка этого стандарта будет реализована достаточно широко, это позволит избавиться от программного кода, воспроизводящего анимационные эффекты, связанные со сменой стилей CSS, как показано в разделе 16.3.1.) Положения модуля «CSS Transitions» реализованы во всех текущих броузерах, кроме IE, но в именах свойств стиля присутствуют префиксы производителей. Проект родственного стандарта «CSS Animations», использующий модуль «CSS Transitions» в качестве основы, определяет более сложные анимационные последовательности. В настоящее время «CSS Animations» реализован только в веб-броузерах, основанных на механизме Webkit. Ни один из этих стандартов не описывается в данной главе, но вам, как веб-разработчикам, нужно знать о существовании этих технологий.