Бережливые CSS

О том, что сайт не должен быть слишком “тяжелым”, говорится в любом более-менее приличном пособии по web-дизайну. Следовательно, уже начинающие сайтостроители знают, что “пустые” килобайты и мегабайты их творений аукнутся для потенциального гостя минутами нахождения в Инете и (или) рублями, а для хозяев сайта — его посещаемостью. И начинается критический разбор своего нетленного произведения: что бы тут такое еще подсократить?

Вдобавок ко всему, в один прекрасный момент обнаруживается весьма неприятный факт: “классический” HTML довольно скуден, не всегда эстетичен и образует порой длинные тяжеловесные конструкции, где на пару слов контента приходится пять-шесть тэгов со своими атрибутами. К счастью, над прочной неуклюжей глыбой здания HTML высится множество надстроек. И одна из них — каскадные таблицы стилей, или CSS.
Поймите меня правильно (особенно это относится к наивным любителям халявы под названием “поклонники WYSIWYG”): я очень уважаю HTML. Более того, я считаю, что человек, не написавший одну из первых страниц “по-честному”, ручками, в Блокноте, не получающий удовольствия от красивого кода и могущий спокойно уснуть, не разложив незнакомый дизайнерский прием по косточкам в своем любимом plaintext-редакторе, не способен стать мастером. Но знать приемы HTML часто нужно для того, чтобы ими НЕ пользоваться. Это относится к тяжелым неблагодарным операциям (типа забивки частей рисунка в таблицу или разметки карты изображения), которые даже самые ярые поклонники “ручного” кода делают при помощи специальных программ. И это же относится к CSS.

Введем в курс дела тех, кто еще не знаком с предметом разговора. Cascading Style Sheets, они же CSS, есть средство форматирования web-страниц.
Предположим, согласно вашей гениальной задумке все заголовки первого уровня на сайте выровнены по центру и имеют зеленый цвет. Для этого вы обрамили каждый из них следующей конструкцией:

<h1 align="center"><font color="006600"> … </font></h1>

Вопрос на засыпку: какими словами вы будете ругаться, когда вам захочется поменять цвет всех заголовков сайта на серо-буро-малиновый?
Теперь иной случай. Имеется некий файл mystyles.css, где записано следующее:

h1 {
color: #006600;
text-align: center;
}

(То, что вне фигурных скобок, называется селектором, внутри — описанием стиля.)

А в головную часть каждого документа (head) вы внесли строку:

<link rel="stylesheet" href="mystyles.css" type="text/css"></link>

Все! Можете обрамлять заголовки “голым” тэгом <h1></h1> и спать спокойно: браузер сам позаботится о необходимом форматировании.
(Если честно, я немного утрирую. Некоторые авторы рекомендуют явно прописать все параметры стиля: размер и начертание букв, отступы и тому подобное, не надеясь на умолчания браузера.)
Окрыленные успехом, вы решаете отформатировать все абзацы в тексте: выравнивание по ширине, полтора сантиметра отступа в первой строке и нулевые промежутки между абзацами. Вы добавляете в файл mystyles.css:

p {
text-align: justify;
text-indent: 1.5cm;
margin:0;
}

(о свойстве margin и родственном ему padding мы еще поговорим).
И тут вам приходит в голову мысль сделать к каждой главе эпиграфы. Разумеется, их абзацы должны иметь несколько иное форматирование. Например, такое:

.epigr {
font-style: italic;
margin-left: 50%;
text-indent: 0;
text-align: right;
}

Этот селектор начинается с точки и называется селектором класса. Одноименные элементы разных классов могут иметь разные стили.
В html-файлах это отражается так:

<p сlass="epigr"> … </p>

Вдруг выясняется, что один из эпиграфов — стихотворение. Выравнивать его по правому краю неэстетично, но загромождать файл mystyles.css не хочется. Вы вносите описание стиля только в код сей уникальной странички, поместив его все в той же головной части документа:

<style type="text/css">
<!--
p.epigr {
text-align: left;
}
-->
</style>

Это второй уровень нашего каскада. Есть еще и третий. Допустим, стихотворение писал Маяковский, и некая строчка выбивается из общей колеи. Обрамим ее конструкцией:

<p сlass="epigr" style="margin-left:55%"> … </p>

Все как в программировании: локальное описание “сильнее” глобального. А уж глобальное-то позволит вам сэкономить чертову уйму нервов, времени и кода.
Знающие люди возразят: время — да, нервы — да, но объем… Все “выигранные” байты html-файлов с лихвой перекроются одной дурно оптимизированной картинкой. Графика — вот одна из самых тяжелых частей сайта, и никакие CSS здесь не помогут… Не скажите!

Предположим, вы создаете кнопки. При наведении мыши они подсвечиваются, ну, скажем, сиреневым, при щелчке “утапливаются”, а кнопки, соответствующие посещенным ссылкам, бледнеют. Напрашивается решение: ролловеры, созданные либо вручную, либо при помощи программ, делающих это автоматически. Более продвинутый вариант — технология flash. Но…

Подобные операции имеют смысл, если кнопки очень уж нестандартные. Простые симпатичные кнопки (рис. 1) можно “нарисовать” средствами CSS:

a {
background: #cccccc;
color: #000000;
text-decoration: none;
padding: 6;
border-style: solid;
border-width: 2;
border-top-color: #ffffff;
border-left-color: #ffffff;
border-bottom-color: #666666;
border-right-color: #666666;
}
a:visited {
color: #666666;
}
a:active {
border-top-color: #666666;
border-left-color: #666666;
border-bottom-color: #ffffff;
border-right-color: #ffffff;
}
a:hover {
background: #ccccff;
}

Те, кому что-то неясно, могут обратиться за справкой к англо-русскому словарю. Поясню только два момента. Во-первых, псевдокласс a:hover соответствует гипер­ссылке, на которую наведен мышиный курсор. Во-вторых, padding есть внутренний отступ, от края элемента до бордюра, тогда как margin — отступ внешний, от бордюра до других элементов.
А теперь сравните вес этого описания и трех-четырех картинок с кнопками.
Еще два преимущества такого подхода. Во-первых, раз создав код, вы можете не задумываться над видом ссылок в дальнейшем: все они автоматически придут к единому образцу. А во-вторых, подобные кнопки не изменят своего вида и при отключенной графике. Согласитесь, это несколько выделит вашу страничку среди других.

* * *
Теперь попробуем наложить две картинки друг на друга. Зачем? Предположим, где-то в оформлении страницы используется рисунок, большей частью немногоцветный, но с небольшими яркими фрагментами (рис. 2). Оптимизировать такой рисунок сердце кровью обливается: либо многоцветная часть теряет качество, либо размер файла непозволительно велик.

Распространенный выход — разбить картинку на части и оптимизировать их по отдельности. Это можно сделать при помощи сегментирования. Неплохо, но только если вы справитесь с совмещением цветов на стыках оптимизированных по-разному фрагментов.
Более извращенный вариант, рекомендуемый некоторыми авторами: большая картинка заносится в таблицу как фон, а в отдельных ее ячейках лежат .gif-файлы на прозрачной основе. Но как быть, например, если фрагменты перекрываются лишь частично (рис. 3)?

А ведь нужно подумать и о том, как эти рисунки будут соотноситься с текстом…
Теперь взгляните на это описание стилей:

#pict1 {
position: absolute;
left: 10;
top: 10;
z-index: 1;
}
#pict2 {
position: absolute;
left: 10;
top: 15;
z-index: 2;
}
#pict3 {
position: absolute;
left: 125;
top: 78;
z-index: 3;
}

К координатам left и top (X и Y левого верхнего угла объекта) добавляется еще одна — z-index. Она отражает “очередность” наложения объектов (в данном случае — частей картинки) друг на друга и отсчитывается как бы из глубины экрана на зрителя.
Свойство position указывает нам сейчас, что позиция наших картинок задается не относительно других объектов, а абсолютно, “как есть” на странице. А вот что это за решетка перед селектором?
Она говорит о том, что pict1 и так далее — не имена классов, а идентификаторы отдельных объектов — наших картинок. И писать о картинках нужно теперь так:

<div id="pict1"><img src="… "/></div>

Почему id, а не class? Идентификаторы используются там, где элемент имеет более-менее уникальное форматирование (является своего рода исключением из класса).

* * *
А вот этот текст с тенью (рис. 4) — не картинка, как вы могли подумать. Два слова — темное и светлое — наложены одно на другое уже знакомым нам методом.

Теперь вы уже сами можете сказать, как выполнена эта композиция (рис. 5).

Итак, даже столь узкая тема (уменьшение размеров сайта) позволяет с высоты орлиного полета обозреть возможности CSS. А более близкое с ними знакомство не мешает и тем, кто работает непосредственно с кодом, и тем, кто предпочитает визуальные редакторы.


Рекомендуем почитать: