Что такое CSS3?

135

Спецификация CSS3 — это неоспоримое будущее в области декоративного оформления веб-страниц, и ее разработка еще далека от завершения. Большинство модулей все еще продолжает совершенствоваться и модифицироваться, и ни один браузер не поддерживает все модули. Это означает, что CSS3 испытывает такие же сложности, как и HTML5. Веб-разработчикам нужно решать, какие возможности использовать, а какие игнорировать, а также каким образом заполнить зияющие пробелы в браузерной поддержке.

Спецификация CSS3 не является частью спецификации HTML5. Эти два стандарта были разработаны отдельно друг от друга, разными людьми, работающими в разное время в различных местах. Но даже организация W3C призывает веб-разработчиков использовать HTML5 и CSS3 вместе, как часть одной новой волны современного веб-дизайна.

Внедрять CSS3 в веб-сайт можно, по большому счету, используя три стратегии:

Стратегия 1: используйте то, что можно

Логично использовать возможности с высоким уровнем поддержки на всех основных браузерах. В качестве примера одной из таких возможностей можно назвать применение веб-шрифтов. Используя шрифты правильного формата, эту функциональность можно заставить работать на таких старых браузерах, как Internet Explorer 6. К сожалению, очень немногие возможности CSS3 входят в эту категорию. Почти все иные возможности не будут работать на все еще популярных браузерах IE 7 и IE 8.

Стратегия 2: рассматривайте возможности CSS3 как усовершенствования

У фанатов CSS3 есть боевой клич: "Веб-сайты не должны выглядеть абсолютно одинаково на всех браузерах".

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

header {
	background-color:#7695FE;
	border:	thin #336699 solid;
	padding: 10px;
	margin: 10px;
	text-align: center;
	border-radius: 25px;
}

Браузеры, поддерживающие свойство border-radius, будут использовать его, a старые браузеры просто игнорировать его, оставляя углы рамок квадратными:

Использование CSS3 в новом браузере
Использование CSS3 в старом браузере

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

По этой причине следует подходить к применению некоторых усовершенствований CSS3 с определенной долей осторожности. Ограничьтесь использованием возможностей, которые уже поддерживаются несколькими браузерами (и поддержка которых, по крайней мере, уже реализована в IE 10). И никогда не применяйте эти возможности так, чтобы производимое вашим сайтом впечатление резко менялось при его просмотре в старых браузерах.

Что касается поддержки CSS3, Internet Explorer большой слабак в этой области. Существует воинствующее меньшинство веб-дизайнеров, которые считают, что веб-дизайнеры должны игнорировать этот браузер и применять возможности CSS3 как только они начинают поддерживаться другими браузерами. А как иначе оказывать давление на Microsoft и стимулировать усовершенствование Интернета?

Такой подход вполне уместен, если основная цель вашего веб-сайта "политическая", заключающаяся в продвижении передовых веб-стандартов. В противном случае следует иметь в виду, что сбрасывание со счета большого сегмента сетевой общественности плохо отразится на вас, т.к. человек все равно использует свой браузер (который вам может и не нравиться) для просмотра вашей работы.

Стратегия 3: добавляйте резервные решения с помощью библиотеки Modernizr

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

-moz-border-bottom-colors: orange red green;
-moz-border-left-colors:  orange red green;
-moz-border-right-colors:  orange red green;
-moz-border-top-colors:  orange red green;
Многоцветная рамка в браузере Firefox
Многоцветная рамка в браузере Google Chrome

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

header {
	background:yellow;
	background: radial-gradient(ellipse, red, yellow);
}

Результаты применения этого правила показаны на рисунке:

Браузер не понимающий свойства градиента
Браузер понимающий свойство градиента

Вверху: браузеры, которые не понимают CSS3, используют первую часть правила для header и окрашивают фон сплошным желтым цветом. Внизу: браузеры, которые понимают CSS3, используют вторую часть правила и заполняют фон радиальным градиентом.

В некоторых случаях замещение свойств стиля не работает, т.к. устанавливаются комбинированные свойства. Примером комбинированного свойства является многоцветная рамка. Эффект многоцветности устанавливается свойством border-colors, но появляется только если установлена большая толщина рамки посредством свойства border-thickness. В браузерах, которые не поддерживают многоцветные рамки, толстая рамка одного цвета режет глаза независимо от цвета.

Одним из способов решения подобных проблем будет использование библиотеки JavaScript - Modernizr, которая проверяет поддержку возможностей HTML5 конкретным браузером.

С помощью этой библиотеки можно определить альтернативные настройки стилей для браузеров, не поддерживающих свойства стилей, которые вы хотите использовать в первую очередь. Допустим, что нам нужно создать две версии рамки для верхнего колонтитула. Мы хотим использовать скругленные углы в браузерах, которые поддерживают эту возможность, и двойную рамку в браузерах, которые эту возможность не поддерживают. Добавив в разметку страницы ссылку на сценарий Modernizr, можно использовать следующую комбинацию правил таблицы стилей:

/* Настройки для всех браузеров, независимо от уровня поддержки CSS3 */
header {
	padding: 10px;
	margin: 10px;
	text-align: center;
}

/* Настройки для браузеров, которые поддерживают свойство border-radius */
.borderradius header {
	border: thin orange solid;
	border-radius: 25px;
}

/* Настройки для браузеров, которые не поддерживают свойство border-radius */
.no-borderradius header {
	border: 5px orange double;
}

Этот набор правил работает следующим образом. В корневой элемент <html> страницы вставляется атрибут class="no-js":

<html class="no-js">

Когда загружается Modernizr, этот сценарий выполняет быструю проверку на поддержку данным браузером ряда возможностей HTML5, JavaScript и CSS3. По результатам проверки сценарий вставляет в корневой элемент <html> страницы целую кучу классов, разделенный пробелами:

Добавляемые классы с помощью библиотеки Modernizr

Наличие в этом списке класса без префикса no- означает, что данный браузер поддерживает соответствующую возможность. Если же класс указан с префиксом, соответствующая возможность в данном браузере не поддерживается. В данном случае пример запущен на последней версии Chrome, поэтому поддерживаются почти все возможности.

Эти классы можно вставить в селекторы таблицы стилей, чтобы отфильтровать настройки стилей в зависимости от предоставляемой поддержки. Например, если данный браузер поддерживает свойство border-radius, селектор .borderradius header получит все элементы <header> внутри корневого элемента <html>. В противном случае класс .borderradius будет отсутствовать, селектор ни с чем не совпадает, и правило не применится.

Но здесь есть своя загвоздка, заключающаяся в том, что Modernizr предоставляет классы только для определенного подмножества всех возможностей CSS3. В это подмножество входят некоторые наиболее популярные и развитые возможности CSS3, но не многоцветные рамки, т.к. эта возможность поддерживается только браузером Firefox. По этой причине лучше воздержаться от использования многоцветных рамок в своих разработках, по крайней мере на данном этапе.

С помощью Modernizr можно также создавать резервные решения на JavaScript. В данном случае нужно просто проверить значение соответствующего свойства объекта Modernizr, как при проверке на поддержку возможностей HTML5. Этот метод можно использовать, чтобы компенсировать отсутствие более продвинутых возможностей CSS3, таких как переходы или анимации. Но для этого требуется так много усилий и настолько разные модели, что для необходимых возможностей веб-сайта обычно лучше всего придерживаться решений только на основе JavaScript.

Стили, специфичные для конкретных браузеров

При разработке новых возможностей CSS часто приходится сталкиваться с дилеммой курицы и яйца. Для того чтобы усовершенствовать возможности, разработчикам нужно иметь отзывы и замечания об этих возможностях от разработчиков браузеров и веб-дизайнеров. Но чтобы разработчики браузеров и веб-дизайнеры могли предоставить такие отзывы и замечания, им нужно реализовать эти новые и несовершенные возможности.

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

Чтобы предотвратить такое развитие событий, разработчики браузеров используют систему префиксов разработчиков (vendor prefixes), чтобы изменять названия свойств и функций CSS, пока они еще находятся в процессе разработки. Возьмем, например, новое свойство радиального градиента. Чтобы использовать его в браузере Firefox, нужно установить разработочную версию этого свойства, которое называется -moz-radial-gradient. Префикс разработчика -moz- (сокращение от Mozilla — организации, занимающейся проектом Firefox) обозначает свойство для браузера Firefox.

Для каждого браузера существует собственный префикс разработчика:

Префиксы разработчиков браузеров
Префикс Браузер
-moz- Firefox
-webkit- Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
-ms- Internet Explorer
-o- Opera

Хотя префиксы разработчиков браузеров невероятно усложняют жизнь веб-разработчиков, для их использования есть хорошее основание. Разные разработчики браузеров добавляют поддержку возможностей в различное время, при этом часто используя разные предварительные версии одной и той же спецификации. Хотя все браузеры будут поддерживать одинаковый синтаксис для конечной версии, синтаксис свойств и функций, специфичных для конкретных разработчиков, часто бывает разным.

Поэтому, если вы хотите использовать в своем веб-сайте радиальный градиент уже сегодня, для того чтобы он правильно отображался во всех браузерах (включая Internet Explorer 10), вам нужно использовать раздутое правило CSS наподобие следующего:

header {
	background: yellow;
	background: -moz-radial-gradient(ellipse, red, yellow);
	background: -webkit-radial-gradient(ellipse, red, yellow);
	background: -ms-radial-gradient(ellipse, red, yellow);
	background: -o-radial-gradient(ellipse, red, yellow);
	
	/* Добавляем общее правило, которое будет срабатывать 
	   если браузер уже поддерживает конечную спецификацию 
	   CSS3-свойства radial-gradient */
	background: radial-gradient(ellipse, red, yellow);
}

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

Зачем использовать CSS3 если есть JavaScript и Flash?

Появление некоторых новых возможностей CSS3 не касающихся стилизации элементов страницы (такие как анимации и переходы) вызвали кучу вопросов о их необходимости, ведь таких же эффектов можно добиться использованием JavaScript, либо подключаемых модулей Flash или Silverlight. Давайте рассмотрим преимущества и недостатки каждого подхода:

Сравнение CSS3, JavaScript, Silverlight и Flash
CSS3
Преимущества Недостатки
  1. Используется простой синтаксис правил CSS, что облегчает изучение новых возможностей CSS3.
  2. Обеспечивается самая быстрая и гладкая анимация в браузере, с более высокой частотой кадров, чем на JavaScript.
  3. При использовании CSS3 не нарушается структура документа, т.к. CSS3 не может манипулировать DOM-деревом документа, как, например, JavaScript. Вследствие этого улучшается поисковая SEO-оптимизация сайта.
  1. Плохая кроссбраузерная поддержка "навороченных" возможностей CSS3.
  2. Малое количество инструментария для создания кода анимаций, заставляя разработчика набирать код вручную.
  3. Возможности анимаций, переходов и трансформаций CSS3 намного ниже, чем у Silverlight и Flash.
Flash и Silverlight
Преимущества Недостатки
  1. Отличные IDE для создания сложных анимаций и эффектов (Expression Blend, Adobe Flash).
  2. Возможность создавать очень сложные анимации и переходы, вплоть до создания трехмерных сцен и игр.
  3. Наличие языка сценариев, который облегчает кодирование (для Flash - ActionScript, для Silverlight - C#).
  1. Не воспринимаются большинством мобильных устройств (iPhone, iPad, Android-устройства).
  2. Работоспособность зависит от наличия плагина (или .Net Framework определенной версии для Silverlight), который должен регулярно обновляться пользователем.
  3. Ухудшается поисковая оптимизация сайта, т.к. поисковые роботы не могут загрузить содержание большинства элементов интерфейса, написанных на Flash и Silverlight.
JavaScript
Преимущества Недостатки
  1. Имеется большое количество JavaScript-фреймворков, наподобие jQuery, которые сильно облегчают жизнь разработчикам.
  2. Возможность манипулированием элементов HTML, DOM и CSS.
  3. Более мощные возможности чем у CSS (но менее мощные чем у Flash и Silverlight).
  1. Очень сложный и нагроможденный синтаксис сценариев.
  2. Из-за первого недостатка возможно сильное ухудшение скорости загрузки страницы.
  3. Контент, созданный динамически в сценарии JavaScript, не индексируется поисковыми системами.
Пройди тесты
Лучший чат для C# программистов