Брутальное руководство по эффективному использованию CSS

Владимир Синельников

Спецвыпуск: Хакер, номер #067, стр. 067-018-5

Классификация элементов в соответствии со спецификацией HTML 4 Strict

Строчные элементы:

<A>

<ABBR>

<ACRONYM>

<B>

<BDO>

<BIG>

<BR>

<CITE>

<CODE>

<DFN>

<EM>

<I>

<IMG>

<INPUT>

<KBD>

<LABEL>

<Q>

<SAMP>

<SELECT>

<SMALL>

<SPAN>

<STRONG>

<SUB>

<SUP>

<TEXTAREA>

<TT>

<VAR>

Следующие элементы могут выступать, в зависимости от контекста, как строчные либо блочные. Если они используются как строчные (например, внутри параграфа или другого строчного элемента), они не должны содержать блочных элементов внутри себя.

<APPLET>

BUTTON>

<DEL>

<IFRAME>

<INS>

<MAP>

<OBJECT>

<SCRIPT>

Блочные элементы:

<ADDRESS>

<BLOCKQUOTE>

<CENTER>

<DIR>

<DIV>

<DL>

<FIELDSET>

<FORM>

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

<HR>

<ISINDEX>

<MENU>

<NOFRAMES>

<NOSCRIPT>

<OL>

<P>

<PRE>

<TABLE>

<UL>

<DD>

<DT>

<FRAMESET>

<LI>

<TBODY>

<TD>

<TFOOT>

<TH>

<THEAD>

<TR>

[хаки без хакеров] Специфика реализации каскадных стилей в различных смотрелках заставляет 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" />