CSS3 для веб-дизайнеров - [3]
>Таблица 1.02. Свойства CSS3 и браузеры, поддерживающие их
border-radius
Скругляет углы элемента на заданное значение – радиус. Поддерживается в Chrome 3+, Firefox 1+, Opera 10.5+ и IE9 Beta. Пример:
>.foo {
> border-radius: 10px;
> }
text-shadow
Свойство из CSS2 (выкинутое в версии 2.1, возвращенное в CSS3), которое добавляет тень к тексту; можно указывать направление, количество размытия и цвет тени. Поддерживается в Safari 1.1+, Chrome 2+, Firefox 3.1+ и Opera 9.5+. Пример:
>p {
> text-shadow: 1px 1px 2px #999;
> }
>box-shadow
Добавляет тень к элементу. Синтаксис тот же, что у свойства >text-shadow. Поддерживается в Safari 3+, Chrome 3+, Firefox 3.5+, Opera 10.5+ и IE9 Beta. Пример:
>.foo {
> box-shadow: 1px 1px 2px #999;
> }
Несколько фоновых изображений
CSS3 дает возможность поставить несколько фоновых изображений на один элемент (разделяя их запятыми) вместо всего лишь одной картинки согласно спецификации CSS2.1. Поддерживается в Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ и IE9 Beta. Пример:
>body {
> background: url(image1.png) no-repeat top left,
> url(image2.png) repeat-x bottom left,
> url(image3.png) repeat-y top right;
> }
opacity
Определяет непрозрачность элемента. Значение 1 соответствует полной непрозрачности; значение 0 соответствует полной прозрачности. Поддерживается в Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+ и IE9 Beta. Пример:
>.foo {
> opacity: 0.5; /*.foo will be 50% transparent */
> }
RGBA
Не свойство CSS, но, скорее, новая цветовая модель, введенная в CSS3, добавляющая возможность задавать уровень прозрачности элемента вместе с его цветом в формате RGB. Поддерживается в Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+ и IE9 Beta. Пример:
>.foo {
> color: rgba(0, 0, 0, 0.75); /* black at 75% opacity */
> }
Разумеется, этот список далеко не полный. CSS3 содержит намного больше свойств и инструментов, многие из которых по-прежнему разрабатываются и пока что не включены ни в один браузер. Но вы заметите, что каждое свойство из списка выше достигло определенного уровня поддержки браузерами: оно работает хотя бы в двух наиболее распространенных браузерах. В некоторых случаях, поддержка обещана в будущих версиях Internet Explorer (и Opera).
Итак, теперь перед нами – краткий список свойств, с которыми можно экспериментировать, построенный на основе их сравнительно качественной поддержки в Safari, Chrome, Firefox и Opera. Пока что они работают не везде одинаково, и далее мы обсудим, почему такое поведение в порядке вещей и как подготовиться к этой неоднородной поддержке.
Какие темы не будут затронуты
Я перечислил несколько свойств, которые будут часто применяться в этой книге, а как же остальные? Я решил не пытаться охватить все в одной книге, а рассказать лишь о том, что применимо прямо сейчас по причине надежной и устойчивой поддержки браузерами.
Есть и другие фрагменты спецификации CSS3, которые уже можно применять, и о которых можно написать отдельную книгу:
1. Медиазапросы (http://www.w3.org/TR/CSS3-mediaqueries/)
2. Многоколоночный текст (http://www.w3.org/TR/CSS3-multicol/)
3. Веб-шрифты (http://www.w3.org/TR/CSS3-webfonts/)
Обязательно посмотрите на эти модули.
Префиксы конкретных браузеров
Ранее упоминалось, что спецификация CSS3 – это набор модулей, которые постепенно интегрируются производителями браузеров. Иногда интеграция включает в себя экспериментальную поддержку. Это означает, что пока спецификацию пишут, обсуждают и критикуют в W3C, изготовитель браузера может решить добавить поддержку для каких-то свойств, чтобы опробовать их на практике. В последнее время такая практика стала естественной частью процесса, и обратная связь, получаемая во время экспериментального использования, часто применяется, чтобы внести поправки в спецификацию.
С другой стороны, изготовитель браузера может захотеть ввести экспериментальное свойство, которое не входит ни в какой предложенный стандарт, но может получить такой статус когда-либо.
Для такой экспериментальной поддержки свойств CSS часто вводятся браузерные префиксы – например, так:
>– webkit – border-radius
Отбитое дефисом ключевое слово, стоящее перед названием свойства, помечает его как незавершенное, относящееся исключительно к реализации в конкретном браузере и к интерпретации развивающейся спецификации. Если экспериментальное свойство войдет в законченный модуль CSS3, браузер должен поддерживать беспрефиксное название свойства.
У каждого изготовителя браузеров есть свой префикс, которым он в первую очередь помечает собственные экспериментальные свойства. Все остальные браузеры игнорируют правила, содержащие неизвестные им префиксы.
В табл. 1.03 перечислены самые широко используемые браузеры и связанные с ними префиксы. Мы будем использовать префиксы WebKit, Mozilla и Opera в части, касающейся CSS3 в примерах из следующих глав.
>Таблица 1.03. Наиболее широко используемые браузеры и связанные с ними префиксы
Как работают браузерные префиксы
Вот как CSS работает на практике с браузерными префиксами. Возьмем свойство >border-radius в качестве примера. Положим, мы хотим скруглить углы элемента с радиусом 10 пикселей; вот как это делается:
