Page 42 - Сила CSS3 Освой новейший стандарт

42 • Глава 1. Основная информация о CSS3

Получив набор таких классов, вы можете с легкостью создать стили для всех классов
и пребывать в уверенности, что каждое правило будет считываться только теми
браузерами, которые поддерживают (или не поддерживают) соответствующий
элемент CSS3 или HTML5. Следующие правила устанавливают разные фоновые
цвета или изображения в зависимости от того, поддерживает браузер использование
нескольких фоновых изображений или нет:
#wrapper {
background-color: #ccc;
background-image: url(one.png), url(two.png),
url(three.png);
}
.no-multiplebgs #wrapper {
background-image: url(alternate.gif);
}
Первое правило видят все браузеры, вне зависимости от того, включено ли исполь-
зование JavaScript и поддерживают ли они CSS3. Браузеры, в которых добавление
нескольких фоновых изображений невозможно, отображают сплошной фоновый
цвет, а остальные — три фоновых изображения. Следующее правило видят только
браузеры, не поддерживающие несколько фоновых изображений, в которых ис-
пользование JavaScript включено. Они считывают единственное альтернативное
фоновое изображение и выводят его вместо трех отдельных, которые им недоступны.
Таким образом, независимо от того, насколько хорошо браузеры поддерживают CSS
и включено ли использование JavaScript, в обрамляющем блоке div каждый из них
получает определенное фоновое изображение.

Modernizr лучше всего справляется с задачей предоставления альтернативных
стилей браузерам, не поддерживающим CSS3 (в противоположность эмулированию
эффектов CSS3). Однако в определенных ситуациях этот сценарий можно применять
и для имитации поведения или оформления CSS3. Например, вы желаете скруглить
углы поля. Тогда для некоторых браузеров будет
Настоящий код CSS для правил достаточно свойства border-radius, а осталь-
no-border-radius должен быть ным придется предоставить фоновое изображе-
сложнее, чем в представленном ние скругленных углов:
выше примере: позицию каждого div {
изображения угла необходимо -moz-border-radius: 10px;
указать отдельно и, возможно, -webkit-border-radius: 10px;
для нескольких элементов HTML. border-radius: 10px;
Я упростила CSS для того, чтобы }
в этом примере сфокусироваться .no-border-radius div {
на работе Modernizr. background: url(corners.gif);
}

Modernizr может быть очень полезным помощником. Я рекомендую вам озна-
комиться со статьей Фарука Атеса «Taking Advantage of HTML5 and CSS3 with
Modernizr» (http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-

www.trk.kg