Кросс-браузерный CSS. Часть II. Селекторы

Кросс-браузерный CSS. Часть II. Селекторы

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

Вообще достаточно сложно классифицировать те или иные методы сокрытия таблиц стилей с помощью селекторов. Так что ограничимся простым перечислением методов.

Селекторы по атрибутам
Эти виды селекторов появились в спецификации CSS-2. Но некоторые из них уже поддерживаются браузерами Opera 5+ и Netscape 6 (еще их поддерживает достаточно популярный браузер под Linuх, который называется Konqueror). На данный момент поддерживается три вида селекторов по атрибутам

[attr]
Стили применяются к элементу, в котором имеется указанный атрибут. Например, если в коде написать
<P CLASS="first"> Абзац текста</P>
то сделать текст красным внутри этого элемента можно таким образом:
P[CLASS] {
color: #F00}
Но заметьте, что, если у нас в коде будет присутствовать элемент <P> с другим классом, то он все равно станет красным (если, конечно, на данный класс уже не указан в стиле другой цвет). Например, в таком коде
P[CLASS] {
color: #F00}
. . .
<P CLASS="first"> Абзац текста</P>
<P CLASS="second"> Абзац текста</P>
Все абзацы будут красными. Но если задать цвет для класса явно
P[CLASS] {
color: #F00}
P.second {
color: #000}
. . .
<P CLASS="first"> Абзац текста</P>
<P CLASS="second"> Абзац текста</P>

то второй абзац будет черным. Этот селектор корректно поддерживается браузерами Opera 5+ и Netscape 6. Для более точной выборки существует еще селектор
[attr=val]
В этом случае стили применяются к элементу, который имеет атрибут с определенным значением. В нашем примере это делается так:
P[CLASS=first] {
color: #F00}
. . .
<P CLASS="first"> Абзац текста</P>
Браузер Netscape 6 корректно поддерживает этот селектор, а вот у браузера Opera 5+ есть некоторые проблемы. Дело в том, что он понимает этот селектор, если атрибутом является, например, CLASS="first", но не понимает, если атрибутом является ALIGN="right". Как видим, для такого селектора могут использоваться не все атрибуты. Какие именно, надо устанавливать опытным путем.

Третий вид формируется так:
[attr~=val]
В этом случае стили применяются к элементу, который имеет атрибут с некоторым набором значений, разделенных пробелами, причем одно из значений, указанное в селекторе, имеется среди значений атрибута. Для чего это вообще надо? Вот возможный способ применения. Например, нам надо к одному из абзацев текста применить такие стили, чтобы текст выводился полужирным красным шрифтом. А к другому — чтобы текст выводился полужирным синим шрифтом. Конечно, можно просто написать такие классы:
P.first {
color: #F00;
font-weight: bold}
P.second {
color: #00F;
font-weight: bold}
. . .
<P CLASS="first"> Красный абзац текста</P>
<P CLASS="second"> Синий абзац текста</P>

Получается, что у нас есть несколько разных классов, где применяется полужирный шрифт, но зато там разные цвета.
А можно поступить следующим образом: сделать отдельный класс для полужирного шрифта и совмещать затем его с другими классами, которые имеют другой цвет. Тогда таблица стилей для двух абзацев разного цвета будет выглядеть так:
.bld {
font-weight: bold}
P.first {
color: #F00}
P.second {
color: #00F}
А в коде мы укажем классы через пробел:
<P CLASS="first bld"> Красный абзац текста</P>
<P CLASS="second bld"> Синий абзац текста</P>

Произойдет как бы микширование классов. Если какое-то объявление часто кочует из класса в класс (как font-weight: bold в нашем случае), то создание для него отдельного класса с последующим микшированием сократит код.
Кстати, такое микширование корректно поддерживается шестыми версиями всех браузеров. А селектор [attr~=val] понимают браузеры Netscape 6 и Opera 5+.
Итак, чтобы скрыть стили от браузеров Netscape 4 и Internet Explorer всех версий, надо обратиться к элементу через атрибут.
Все нижеприведенные примеры скрывают стили от Netscape 4 и Internet Explorer:
TD[class] {
border: 1px solid #000}
TD[class=brd] {
border: 1px solid #000}
TD[class~=brd] {
border: 1px solid #000}
. . .
<TABLE>
<TR>
<TD CLASS="brd"> ячейка с рамкой</TD>
</TR>
</TABLE>
В указанных выше браузерах таблица будет без рамки, а вот в Opera 5+ и Netscape 6 рамка будет.

Селектор наследника
В CSS-2 есть достаточно удобный селектор, который позволяет применять стили к потомкам элемента.
Например, у нас в коде встречаются абзацы текста, заключенные в теги <P> </P> . Встречаются они непосредственно внутри элемента <body>, а также вложенными в отдельные блоки, образованные элементами <div> (допустим, это может быть блок новостей).
<body>
<P> Текст на сайте</P>
<div id="news">
<P> Текст новости</P>
</div>
</body>

Нам надо, чтобы внутри <body> текст был черного цвета, а внутри блоков новостей — серого. Можно написать отдельный класс, но можно воспользоваться селектором наследника. Наша задача решается такой таблицей стилей:
body> P {
color: #000}
div> P {
color: #CCC}

Но данные стили не увидят браузеры Netscape 4 и Internet Explorer 4+, так что селектором наследника можно с успехом пользоваться для сокрытия стилей от этих браузеров (что, собственно, и делается в методе Целика).
Кроме селекторов, есть еще и баги браузеров, с помощью которых можно писать кросс-браузерный код.
О них поговорим в следующий раз.

Михаил Дубаков,
http://wa.artel.by