Материал из Linuxformat.

Что за штука... CSS 3?

Семантическая сеть норовит ободрать стили у Интернета, и Пол Хадсон спешит к ордам разработчиков, готовых к ответному удару.

• Ну знаю я, что такое CSS: это насчет стилей, типа макияжа web-страниц, верно?

Можно, конечно, и так сказать. Каскадные таблицы стилей (Cascading Style-Sheets), или же способ назначить стили элементам HTML. По крайней мере, все начиналось именно с этого...

• Думаете, в CSS 3 будет иначе?

Вообще-то, перемены уже идут. CSS позволяют разработчикам сократить объем кода HTML, дав возможность указать элементам страницы их цвет, используемый шрифт и т.п., не смешивая эту информацию со смысловой частью кода. Когда-то давно, семантические тэги, типа <h1> и <p>, шли вперемешку с тэгами стиля, типа <font> и <b>. Семантические тэги описывают структуру документа – определяют части, которые должны быть заголовками, телом документа, вставками и прочее. Тэги стиля описывают стиль документа – например, размер шрифтов и цвета Если тэг <font> использовать для отделения различных частей страницы, то компьютерам не понять, где главный заголовок, где подзаголовок, а где тело документа. Структурные тэги вроде <h1> для определения заголовков первого уровня и <p> для параграфов помогают компьютерам разобраться в содержании web-страниц.

• Надо полагать, именно отсюда пошел термин «семантическая сеть».

Это верно: придать web-страницам смысл, а не стиль.

• Как сюда вписывается CSS?

Мы согласились, что CSS – это каскадные таблицы стилей; а точнее – это код, назначающий стили элементам страницы. В семантической сети у самих страниц нет стиля – они содержат только структуру документа. А потом применяется CSS, чтобы описать цвет, шрифт и так далее. Приятно то, что CSS обычно хранится в отдельном от HTML файле, и для переделки дизайна всего сайта – например, если ваша компания затеяла смену униформы – надо будет просто отредактировать один файл.

• Значит, CSS даст дизайнерам возможность наводить лоск, а разработчикам маяться с HTML-кодом?

Вы уверены, что так не было и раньше? Конечно, полный контроль дизайнеров над web-страницами вносит определенную долю проблем. Например, многие ранние (да и современные) сайты на основе CSS использовали фиксированные размеры шрифта, ради совершенства дизайна. При мониторе с большим разрешением, плохом зрении или желании, чтобы текст легко читался издалека, приходилось молча страдать – дизайнеры считали, что шрифт хорошо смотрится в выбранном размере, значит, нечего и менять его.

• Вот и верь, что CSS делает мир лучше...

Ну, история еще не закончена. Первые разработчики CSS исправлялись и учились использовать мощь CSS для улучшения сайтов, а не дешевого трюкачества. В CSS 2 добавили массу новых возможностей – в частности, селекторы, позволяющие указать, каким элементам нужно задать стиль: например, вы хотите, чтобы все ссылки внутри таблиц были одного цвета, а все остальные ссылки – другого. Там, где CSS 1 определяли высоту и ширину элементов, CSS 2 определяют минимальные и максимальные ширину и высоту элементов.

• Итак, мы получаем больший контроль?

Именно.

• А CSS 3 даст еще больший контроль?

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

• Становится уже интересно!

Рассмотрим пример с окантовкой объектов. Как получить скругленные края? Раньше приходилось создавать изображения для углов и накладывать их на элемент, чтобы он хорошо выглядел [в браузерах Mozilla был специальный атрибут CSS, но он не являлся стандартным, – прим. ред.]. Оно, конечно, работало, но отнимало уж больно много времени. С помощью CSS 3 вы можете указать радиус скругления, и все будет сделано за вас.

• Те целых два парня, что действительно мечтали о закругленной окантовке, будут в экстазе. Как насчет чего-нибудь посерьезнее?

Хорошо, а прозрачность? Раньше это приходилось делать с помощью либо альфа-канала PNG, интенсивно нагружающего CPU (причем без поддержки IE), либо чисто Microsoft’овских расширений, использовавших преимущества DirectX. А в CSS 3 для этого появилось два стандартных способа, одобренных W3C.

• То вообще не было стандартов много лет, а то вдруг сразу два?

Верно! Первый способ задать прозрачность состоит в задании цвета элемента как RGBA. Это означает Красный, Зеленый, Синий и Альфа, и вы можете определить каждое из первых трех значений в диапазоне от 0 (нет цвета в этом канале) до 255, а альфа определить в диапазоне от 0 до 1 (1 означает совершенно непрозрачный). Если у вашей страницы черный фон и вы помещаете на нее элемент <div> со значением цвета 255, 255, 255, 0.5, то он отобразится серым, потому что смешается в отношении 50% с черным цветом фона. Другой способ состоит в задании атрибута непрозрачности объекта между 0 и 1.

• Какие же это стандарты, если их два?

Ну, очевидно, атрибут «непрозрачность» (opacity) надо использовать, когда требуется, чтобы объект просвечивал, но не имел никакого специального цвета. Изображения, например, должны использовать opacity, а не значение RGBA. Они также имеют более тонкое отличие: установка цвета фона элемента <div> с помощью RGBA сделает его прозрачным, но не повлияет на объекты, которые он содержит, например, текст. Но если вы используете атрибут opacity, то <div> будет прозрачным, как и все объекты внутри него.

• Здорово! Почти рыдаю от счастья. Есть еще какие-нибудь чудеса?

Например, вот это: несколько фоновых картинок для любого элемента.

• Зачем это нужно?

Ну, положим, вы делаете страничку о мореплавании. Вы хотите, чтобы на вашей страничке фоном были облака, а также, чтобы внизу экрана был океан, слева вверху располагался компас, а справа внизу пиратский флаг. С помощью CSS 2, вам пришлось бы определить несколько элементов и попытаться расположить их, отслеживая прокрутку экрана и изменение размеров. А с CSS 3 – уже догадались? – сделать это гораздо проще. Вы можете теперь определить много различных картинок, а также их положение на экране (абсолютное или относительное), и браузер автоматически расположит их для вас.

• Благодаря CSS 3, ленивые разработчики станут еще ленивее?

Нет – все эти примеры говорят о тех вещах, которые делают все в любом случае, но определение их как стандартных позволит а) работать им в любом браузере и б) для их кодирования потребуется намного меньше кода. Возьмите, например, столбцы – мы все читаем текст по колонкам в газетах и журналах (включая этот), а на web-странице мы читаем очень длинные строки текста, ограниченные только размером нашего экрана. До CSS 3 не было возможности создать непрерывный переход текста от одного столбца к другому – вам приходилось создавать все столбцы вручную, затем прикидывать, сколько текста умещается в каждом из них. Начиная с CSS 3, вы можете определить, на сколько столбцов вы хотите разбить элемент, а так-же размер интервалов между столбцами.

• Но сеть-то выглядит намного лучше без столбцов?

Эта статья отвечает на вопрос «что», а не «почему»: я не собираюсь судить о новых свойствах CSS 3! По мне, так больший выбор – это хорошо.

• Хватит о примочках для дизайнеров. Вы сказали, что разработчики будут иметь больший контроль с CSS 3 – вот об этом я хочу услышать!

Ладно, поговорим о селекторах. В CSS 3 вы можете выбирать элементы, к которым присоединены определенные атрибуты – строго соответствующие атрибуты (используя ~), соответствия подстрок (с помощью *), строки, начинающиеся с определенного шаблона (с помощью ^) или заканчивающиеся определенным шаблоном (с помощью $). Так, если вы хотите отобразить зеленым все ссылки на сайты Великобритании, то напишите следующее:

a[href$=”.co.uk”]{color:green}

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

img:not([alt]){border:3px solid red;}

• Все, я подсел на CSS 3 – прямо сейчас за это и возьмусь!

Не гоните коней: CSS 3 – отличная спецификация, но ее надо еще реализовать во всех браузерах.

• То есть вы мне тут всякого наговорили, а пользоваться этим нельзя?

Кое-что уже можно использовать прямо сейчас, но всеобщей поддержки пока нет. Некоторые браузеры поддерживают довольно большой набор, но по крайней мере один (Internet Explorer) из них не поддерживает CSS 3 совсем.

• Какие браузеры уже используют CSS 3?

Konqueror – на данный момент – возглавляет список, имея полную поддержку всех новых селекторов, а также некоторые другие новые возможности. Mozilla Firefox наступает ему на пятки, как и Opera 9. Приятно, что довольно большая часть новых функций реализуется в Internet Explorer 7, поэтому к моменту выхода Vista все основные браузеры уже будут поддерживать CSS 3.

• Журнальная площадь исчерпана, задаю обязательный финальный вопрос: на каких URL можно узнать побольше?

Каких URL? А, хороший вопрос – я ж еще про них не сказал! Официальные спецификации – по адресу http://www.w3.org/Style/CSS/current-work, полезный сайт с предварительной информацией – http://www.css3.info, а о том, какие браузеры в каком объеме поддерживают селекторы CSS, можно узнать на странице http://dev.l-c-n.com/CSS3-selectors/browser-support.php. LXF