Crazy Rebel: викификация, оформление

Crazy Rebel — Mon, 19 Jan 2009 08:10:48 GMT

викификация, оформление

Новая статья

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

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

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

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

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

Вообще-то, перемены уже идут. CSS позволяют разработчикам сократить объем кода HTML, дав
возможность указать элементам страницы их цвет,
используемый шрифт и т.п., не смешивая эту информацию со смысловой частью кода. Когда-то давно,
семантические тэги, типа '''<nowiki><h1></nowiki>''' и '''<nowiki><p></nowiki>''', шли вперемешку с тэгами стиля, типа '''<nowiki><font></nowiki>''' и '''<nowiki><b></nowiki>'''. Семантические тэги описывают структуру документа – определяют части, которые должны быть заголовками, телом документа, вставками и прочее. Тэги стиля описывают стиль документа – например, размер шрифтов и цвета Если тэг '''<nowiki><font></nowiki>''' использовать для отделения различных частей страницы, то компьютерам не понять, где главный заголовок, где подзаголовок, а где тело документа. Структурные тэги вроде '''<nowiki><h1></nowiki>''' для определения
заголовков первого уровня и '''<nowiki><p></nowiki>''' для параграфов помогают компьютерам разобраться в содержании 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 означает совершенно
непрозрачный). Если у вашей страницы черный фон и вы помещаете на нее элемент '''<nowiki><div></nowiki>''' со значением цвета 255, 255, 255, 0.5, то он отобразится серым, потому что смешается в отношении 50% с черным цветом фона. Другой способ состоит в задании атрибута непрозрачности объекта между 0 и 1.

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

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

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

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

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

Ну, положим, вы делаете страничку о мореплавании. Вы хотите, чтобы на вашей страничке фоном были облака, а также, чтобы внизу экрана был океан, слева вверху располагался компас, а справа внизу пиратский флаг. С помощью 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'''

LXF85:WOA - История изменений

Crazy Rebel: викификация, оформление