специи по вкусу

ВЯЧЕСЛАВ БАЕВ

Спецвыпуск: Хакер, номер #073, стр. 073-010-1

WEB DEVELOPER (WWW.ART-GALS.RU)

ТОНКОСТИ CSS

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

[задача.]

По дизайн-макету в контентной части используется буквица.

[решение.]

Понадобятся псевдоэлементы (pseudo-elements) и псевдоклассы (pseudo-classes), они в ограниченном количестве появились еще в CSS Level 1. В CSS Level 2 они были переработаны, и их стало больше.

Браузер Netscape Navigator версии 4 понимает только :link, :visited и :active псевдоклассы в отношении гиперссылок. А вот Internet Explorer 4+, Netscape Navigator 5+ и Opera 4+ поддерживают также :hover. Браузеры Internet Explorer 5+, Netscape Navigator 5+ и Opera 4+ еще и распознают следующие полезные псевдоэлементы: :first-line (первая строка текста) и :first-letter (первая буква текста). Псевдоэлемент :first-letter отлично подходит для создания эффекта буквицы. А если ты хочешь, к примеру, чтобы первая строка каждого параграфа на странице состояла из заглавных букв, то определи следующий стиль: p:first-line {text-transform:uppercase}.

Надо учесть, однако, что браузеры по разному интерпретируют :first-line и :first-letter, когда в стиле используются такие CSS свойства как vertical-align и clear. В CSS Level 2 существуют также псевдоэлементы :before (содержимое до элемента) и :after (содержимое после элемента).

[задача.]

На сайте выводятся очень большие таблицы и необходимо ускорить их обработку.

[решение.]

Дело в том, что традиционно браузер сперва загружает табличный макет (включая сам контент), вычисляет необходимые размеры ячеек, и только потом отображает таблицу на экране. А поскольку многие сайты обычно верстаются по старинке, то есть с применением таблиц, а не с помощью DIV'ов, то свойство table-layout со значением fixed может значительно уменьшить время загрузки страницы.

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

Верстается эта таблица таким образом:

ЛИСТИНГ

<table style="table-layout:fixed">

<col style="width:100px"><col style="width:100px"><col style="width:100px">

<tr style="height:10px"><td>Ячейка 0</td><td>Ячейка 1</td><td>Ячейка 2</td></tr>

<tr style="height:10px"><td>Ячейка 0b</td><td>Ячейка 1b</td><td>Ячейка 2b</td></tr>

</table>

Минус данного метода — весь механизм table-layout работает только в Internet Explorer 5+, что очень прискорбно, ибо такое полезное свойство пригодилось бы и в Netscape Navigator или Opera. Кстати, в Internet Explorer 6 в режиме совместимости со стандартами контент не обрезается, если он превышает высоту ячейки.