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

Грамотное использование CSS3 • 41

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

Добавление разных значений свойства: из CSS3 и не из CSS3
Иногда в ситуациях, когда обеспечить обходной путь необходимо или желатель-
но, это делается очень просто: вы всего лишь указываете несколько значений для
свойства в одном и том же правиле. Первое значение будет использоваться в брау-
зерах, не поддерживающих CSS3, а второе — в браузерах, где с поддержкой CSS3
все в порядке. Первая категория браузеров будет игнорировать правила, которые
они понять не в силах, а браузеры с поддержкой CSS3 станут переопределять старые
значения новыми.
Например, для случая с пропадающим цветом фона, упомянутого выше, можно
сначала указать сплошной цвет заливки фона в шестнадцатеричном представлении,
а затем версию HSLA или RGBA для новых браузеров:

div {
background: #CC0000;
background: hsla(0, 100%, 40%, .5);
}
Обратите внимание, что подобное решение очень редко позволяет имитировать
истинное представление или поведение свойства CSS3 — скажем, здесь в браузерах,
не поддерживающих CSS3, фон заливается сплошным непрозрачным цветом, а не
полупрозрачным, как в версии CSS3. Однако это приемлемый вариант для ситуации,
когда отсутствие какого-либо обходного пути полностью искажает страницу, делая
невозможным использование ее в устаревших браузерах.

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

Можно было бы прибегнуть к «вынюхиванию» браузера — программными методами
определять версию браузера пользователя и создавать разные правила для разных
браузеров — однако это грубый и ненадежный способ. Намного более удачным
решением станет использование сценария Modernizr, который можно загрузить
с веб-сайта http://www.modernizr.com. Этот сценарий определяет, поддерживает ли
браузер пользователя определенные возможности CSS3 и HTML5. Затем Modernizr
добавляет к элементу html-классы, позволяющие понять, что поддерживается, а что
нет. Например, no-multiplebgs указывает, что браузер не поддерживает исполь-
зование нескольких фоновых изображений для одного элемента, а multiplebgs —
наоборот, что поддержка нескольких фоновых изображений успешно реализована.

www.trk.kg