ТЕХНОЛОГИЯ CSS (CASCADING STYLE SHEETS) ПРЕДНАЗНАЧЕНА ДЛЯ ОФОРМЛЕНИЯ СТРУКТУРИРОВАННЫХ ДОКУМЕНТОВ В ФОРМАТАХ HTML, XHTML, XML. МЫ РАССМОТРИМ СУТЬ ДАННОЙ ТЕХНОЛОГИИ И ОСОБЕННОСТИ ЕЕ ИСПОЛЬЗОВАНИЯ НА WEB’Е. НАЧИНАЮЩИМ ИНТЕРНЕТ-РАЗРАБОТЧИКАМ ЭТА СТАТЬЯ ПОМОЖЕТ ОБОЙТИ ЧНГ (ЧАСТО НАСТУПАЕМЫЕ ГРАБЛИ) И ПОЗВОЛИТ СОЗДАВАТЬ ДИЗАЙН, ОДИНАКОВО ПОДХОДЯЩИЙ ПОД РАЗНЫЕ ТИПЫ БРАУЗЕРОВ

Данная публикация не является академическим трудом и не претендует на полноту и всесторонность. Она отражает мой опыт и призывает умного читателя не допускать ошибки, сделанные когда-то другими людьми. Несмотря на то, что сейчас практически ни один сайт не обходится без CSS, по-настоящему грамотно эту технологию использую немногие. Есть стандарты, куча хороших доков, мануалов и пудовых книг. Существует даже иллюзия того, что сайты работают правильно и выглядят так, как нужно. Однако стоит разработчику или тестировщику открыть альтернативный браузер, перегрузиться в альтернативную операционку или сесть за компьютер, работающий на «иной» платформе, — как его озаряет откровение. Почему? Дело в том, что различные браузеры по-своему трактуют стили, которые ты так тщательно оттачивал, руководствуясь благими стремлениями сделать сайт-конфетку. В большей мере баги при работе со стилями относятся к устаревшим браузерам, однако некоторые вполне современные программы не перестают удивлять web-дизайнеров. Но об этом чуть позже... Я уже слышу злобное ворчание поборников стандартов и фанатов валидных сайтов. Спешу провозгласить: «плохих и дурацких браузеров» нет! Стандарты хороши там, где их соблюдение не доставляет неудобства конечному потребителю — пользователю сайта. В ситуации, когда сколько-нибудь значительная часть интернет-аудитории продолжает пользоваться смотрелками, не поддерживающими (полностью) рекомендации W3C, web-девелоперам не остается ничего, кроме как учитывать особенности этих программ при разработке своих проектов. Итак, обратим взоры в далекое, по меркам отрасли, прошлое.

экскурс в историю
В начале было слово, точнее — целый язык, отцом которого стал англичанин Тим Бернерс-Ли. Язык предназначался для разметки и элементарного структурирования гипертекстовых документов и был назван HTML. Вместе с ним были разработаны первые web-сервер и браузер, что ознаменовало рождение web’а — всемирной паутины в том виде, в котором мы привыкли видеть его. До тех пор пока этим достижением научной мысли пользовались его создатели, ученые, все было замечательно.

Через пару лет после рождения web’а им заинтересовался Большой Бизнес, узрев в нем потенциальные сверхприбыли. Скучный «первородный» язык разметки web-страниц в силу скудости оформительских возможностей не отвечал растущим потребностям, и HTML начал обрастать дополнениями, которые позволили перевоплотить внешний вид сайтов из унылых листовок в красочные проспекты. В индустрию потянулись новые люди — дизайнеры, и постепенно стало забываться слово «web-мастер», которым на заре интернета называли человека, разрабатывающего и поддерживающего сайт.

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

Браузер работает с CSS следующим образом:

1 ПАРСИНГ HTML-ДОКУМЕНТА И СОЗДАНИЕ ДЕРЕВА ЭЛЕМЕНТОВ;

2 ИДЕНТИФИКАЦИЯ ЦЕЛЕВОГО ТИПА МЕДИА (УСТРОЙСТВА ОТОБРАЖЕНИЯ);

3 ПОЛУЧЕНИЕ ВСЕХ СТИЛЕЙ ДОКУМЕНТА В СООТВЕТСТВИИ С УКАЗАННЫМИ ТИПАМИ МЕДИА;

4 АННОТАЦИЯ КАЖДОГО ЭЛЕМЕНТА ПУТЕМ ПРИСВОЕНИЯ СВОЙСТВАМ ЭЛЕМЕНТОВ ЗНАЧЕНИЙ ИСХОДЯ ИЗ УКАЗАННЫХ ДЛЯ НИХ СТИЛЕЙ, А ТАКЖЕ С УЧЕТОМ НАСЛЕДОВАНИЯ РОДИТЕЛЬСКИХ;

5 ГЕНЕРАЦИЯ СТРУКТУРЫ ФОРМАТИРОВАНИЯ НА ОСНОВЕ ДЕРЕВА ДОКУМЕНТА;

6 ПЕРЕДАЧА ФОРМАТИРОВАННОГО ДОКУМЕНТА НА ВЫВОД (ДИСПЛЕЙ, НА ПЕЧАТЬ И Т.Д.).

Для web-страниц существует три типа подключения стилей, которые разграничивают по источнику:

1 АВТОРСКИЕ СТИЛИ (СОЗДАННЫЕ РАЗРАБОТЧИКАМИ САЙТА), КОТОРЫЕ, В СВОЮ ОЧЕРЕДЬ, МОГУТ ПРИМЕНЯТЬСЯ ТРЕМЯ РАЗЛИЧНЫМИ СПОСОБАМИ:

А) ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ.

РАСПОЛАГАЮТСЯ В ОТДЕЛЬНОМ ФАЙЛЕ *.CSS, НА КОТОРЫЙ ДАЕТСЯ ССЫЛКА В HTML-ДОКУМЕНТЕ. НАПРИМЕР:

<style type="text/css" media="screen">@import url(/styles/screen.css);</style>

В) ВСТРОЕННЫЕ СТИЛИ.

КОД CSS ПОМЕЩАЕТСЯ В ТЕЛЕ HTML-ДОКУМЕНТА: <style type="text/css" media="screen">.style {font-family: Verdana,sans-serif}</style>

С) СТРОЧНЫЕ СТИЛИ, КОТОРЫЕ ПРИМЕНЯЮТ ИНДИВИДУАЛЬНО ДЛЯ КОНКРЕТНОГО ЭЛЕМЕНТА И УКАЗЫВАЮТСЯ В АТРИБУТЕ STYLE НУЖНОГО НАМ ТЕГА:

<p style="font-weight:bold">

2 ПОЛЬЗОВАТЕЛЬСКИЕ СТИЛИ.

НЕКОТОРЫЕ БРАУЗЕРЫ (НАПРИМЕР OPERA) ПОЗВОЛЯЮТ ПОЛЬЗОВАТЕЛЮ СОЗДАВАТЬ СОБСТВЕННЫЕ СТИЛИ, КОТОРЫЕ ХРАНЯТСЯ В ЛОКАЛЬНОМ CSS-ФАЙЛЕ И ИСПОЛЬЗУЮТСЯ ДЛЯ ОПРЕДЕЛЕНИЯ СТИЛЕЙ НА ВСЕХ ПРОСМАТРИВАЕМЫХ СТРАНИЦАХ. ЭТУ ВОЗМОЖНОСТЬ ОБЫЧНО ИСПОЛЬЗУЮТ ЛЮДИ С ПЛОХИМ ЗРЕНИЕМ ИЛИ С ДЕФЕКТАМИ ЦВЕТОВОГО ВОСПРИЯТИЯ.

3 СТИЛЬ БРАУЗЕРА.

«ЗАВОДСКИЕ НАСТРОЙКИ», ПРЕДУСМОТРЕННЫЕ РАЗРАБОТЧИКАМИ ДЛЯ ОПРЕДЕЛЕНИЯ ПРЕДСТАВЛЕНИЯ ЭЛЕМЕНТОВ HTML ПО УМОЛЧАНИЮ.

Пользовательские стили имеют самый высокий приоритет и позволяют переопределять авторские. Исключение составляют стили с параметром !important, который был введен специально для защиты авторских стилей от переопределения на стороне пользователя. Если ни пользователь, ни автор сайта не определили стиль для некого элемента, он будет отображен в соответствии с собственными стилями браузера. В различных браузерах они могут отличаться, поэтому не стоит полагаться на совесть производителя программы-бродилки.

практика
Для успешного освоения CSS-верстки нужно усвоить особенности реализации блочной модели в различных браузерах. В соответствии со стандартной моделью, ширина блока не включает в себя отступы (padding) и границы (borders). Эта модель поддерживается во всех современных браузерах за исключением Internet Explorer (до версии 6), который имеет собственное мнение по данному вопросу. В блочной модели IE ширина отступов и границ включается в ширину блока за счет уменьшения размера области контента, как показано на иллюстрации. Такая же модель используется и в бродилках Netscape 4 и Opera 7.

Грядущая спецификация CSS3 вводит свойство «box-sizing», позволяющее выбирать нужную модель, указывая значение «content-box» для использования стандартной модели, и «border-box» — для использования модели IE. Браузер Mozilla, поддерживающий черновые рекомендации CSS3, уже поддерживает это свойство под собственным именем «-moz-box-sizing». Разработчики также ввели еще одно, на данный момент нестандартное значение (и еще одну блочную модель) — «padding-box», которым подразумевается, что ширина блока равна ширине области контента и отступов, исключая границы.

Хороший и правильный (X)HTML-код начинается с правильного указания типа документа (DOCTYPE). Эти сведения необходимы браузеру для выбора режима рендеринга документа. Если тип не декларируется либо при его объявлении допущены ошибки, документ рендерится в особом «режиме несоответствия стандартам» (quirks-mode) и руководствуется при этом не логикой рекомендаций W3C, а собственным разумением. Хотелось бы обратить внимание web-девелоперов на необъяснимый глюк в IE6: верстая в XHTML 1.0 Transitional, нельзя указывать пролог (<?xml version="1.0"?> ), так как он приводит к рендерингу документа в quirks-mode, несмотря на то, что все сделано правильно. К счастью, пролог является необязательным элементом и его можно смело удалить.

Для CSS справедливы «правила хорошего тона», которыми программеры пользуются при написании кода. Аккуратность, выверенная логика, привычка комментировать код и стремление к оптимизации сослужат тебе хорошую службу. Код, подобный приведенному ниже, запросто может быть оптимизирован на 20%-30%, приобретя при этом приятную чистоту и прозрачность. Нужно ли говорить о том, насколько благотворно это отразится на быстроте загрузки файла со стилями?

Было	Стало
P { color: #336699; border-style : solid; border-width : 1px; border-color : #ff0000; font-weight : bold; line-height : 1.3em; margin-bottom : .7em; margin-left : .4em; margin-right : 1.3em; margin-top : .7em; border-color: #c06565; }	P { border: 1px solid #f00; font-weight : bold; color: #369; line-height : 1.3em; margin: .7em 1.3em .7em .4em }

хаки без хакеров

Специфика реализации каскадных стилей в различных смотрелках заставляет web-разработчиков искать способы «вправить мозги» программам, имеющим собственный, оригинальный взгляд на вещи. В результате получаем: одинаковое отображение страницы в большинстве браузеров... и невозможность пройти валидацию CSS. Такие хитрости называют хаками либо CSS-фильтрами. Избирательность возможна благодаря глюкам отдельных версий браузеров, что позволяет «скармливать» нужный код конкретной программе, в то время как другие его проигнорируют. Соответственно, о соблюдении стандартов не может быть и речи.

Например:

/* Стандартная блочная модель */
селектор { width: 100px; padding: 10px; border:10px; }
/* Подгоняем внешний вид блока в IE под стандартную модель*/
* html селектор { width: 140px; padding: 10px; border:10px; }

Код, приведенный выше, поможет в борьбе с монстром от Microsoft, но для Opera 5 и Netscape 4 придется подыскать другие способы наставить их на путь истинный. К примеру, для Netscape можно использовать его неприятие конструкции @import, а для Opera — . Если ты готов пожертвовать валидностью своего кода, хаки здорово облегчат тебе жизнь. Нужно лишь помнить о том, что универсальных хаков не существует, — вставая на скользкий путь одурачивания браузеров, нужно припасти лекарства для обширного зоопарка смотрелок. Богатая библиотека CSS-фильтров расположилась по адресу www.dithered.com/css_filters/css_only.

Нельзя обойти вниманием еще один курьез от Microsoft: корпорация сама создала лекарство для лечения болезней собственных браузеров. Речь идет о проприентарных тегах (в терминологии авторов — Conditional Comments), позволяющих «подсунуть» нужные стили для Internet Explorer 5.x

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="css/IE5.css" />
<![endif]-->

Более разумной, с точки зрения стандартов, альтернативой хакам и проприентарным тегам может послужить использование Javascript для определения типа браузера. Однако параноидальные пользователи, отключая исполнение скриптов в браузерах, не позволяют использовать данное решение как панацею.

печать

CSS предоставляет нам блестящую возможность больше не заботиться о создании страниц с printer-friendly версиями документов. В первую очередь скроем функциональные блоки, бесполезные в твердой копии страницы, при помощи значения «none» свойства display;. Это большая часть дизайнерских наворотов в шапке и подвале страницы, а также навигация, баннеры и все прочее, что не имеет прямого отношения собственно к контенту. Поскольку принтеры имеют более высокое разрешение, имеет смысл скрыть также и логотип сайта и отдать принтеру другой (можно даже черно-белый) — с более высоким разрешением. Для этого создай блок со вторым логотипом и скрывай его в версии для дисплея. Подобным образом, например, поступила команда Артемия Лебедева — они создали таблицу стилей для печати страниц сайта Студии.

Для печати принято задавать размер кегля шрифта в пунктах (типографская единица измерения), и будет вполне логичным поступить таким же образом и при создании стилей для принтера. В результате пользователи получат буквы оптимального размера, привычные им по распечаткам документов Microsoft Office.

Отдельного упоминания заслуживают фоновые изображения. Поскольку шансы на то, что текст будет читаться так же хорошо, как и на экране, минимальны (большинство пользователей печатают на ч/б), смело отменяем использование картинок на бэкграунде. Также не помешает оптимизация палитры для придания ей максимальной контрастности. Идеал — белый фон и черный текст. Если ты все же решил использовать в стилях для печати не только оттенки серого, не поленись проверить, как будет выглядеть твое буйство красок, если его распечатают на стареньком монохромном лазернике.

На благодарном поприще создания стилей для печати разработчика поджидают несколько подводных камней. Один из них — ошибка в Mozilla (касается всех браузеров, основанных на движке Gecko — Firefox, Netscape, Camino и др.), связанная с печатью блочных элементов, для которых задано свойство float. Баг выражается в том, что независимо от размеров блок распечатывается только на одной странице. Все, что не поместилось на нее, игнорируется. Решение проблемы просто, как советские трусы за рупь двадцать: назначаем свойству float значение «none» и радуемся жизни.

Хотелось бы упомянуть рацпредложение Эрика Майера, выдвинутое в его статье «CSS. Going to Print» на сайте A List Apart. Суть новации такова: при распечатывании документа, содержащего ссылки, естественным образом теряются адреса URL (кто там кликает на листе бумаги?). Пытливый ум нашего буржуйского коллеги нашел выход из данной ситуации — применил в стилях для печати достижения CSS2. Результатом их работы станет появление после текста самой ссылки адреса URL в скобках. Эта красота работает в браузерах Mozilla и Netscape 6.x.

a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

Кроме принтеров, есть смысл создавать отдельные стили и для наладонников, которые отличаются маленьким экраном с ограниченным разрешением и медленным (и часто дорогим) соединением с интернетом. Как сделать это, читай на сайте Александра Качанова (снимаю шляпу!) www.webmacson.com. Прочие типы устройств вывода, равно как и голосовые браузеры, пока недостаточно распространены... хотя бы для того, чтобы протестировать на них свой сайт. Так что можно не распыляться и сосредоточиться на популярных медиа :). Исключение составляет, пожалуй, телеприставка WebTV, в прошлом популярная в Штатах. Она характеризуется низким разрешением, меньшей четкостью и более узким, чем RGB, цветовым пространством — все это издержки конструктивных особенностей телевизоров, которые используются как приставки в качестве монитора.

Автор: ВЛАДИМИР СИНЕЛЬНИКОВ, Спецвыпуск: Хакер, номер 67