Библиотека Интернет Индустрии I2R.ru

Предыдущий материал

• Кросс-браузерный CSS. Введение в проблему

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

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

Селекторы по атрибутам

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

[attr]

Стили применяются к элементу, в котором имеется указанный атрибут. Например, если в коде написать

<P CLASS="first">Абзац текста</P>

то сделать текст красным внутри этого элемента можно таким образом:

P[CLASS] {
color: #F00}

Но заметьте, что если у нас в коде будет присутствовать элемент

с другим классом, то он все равно станет красным (если, конечно, на данный класс уже не указан в стиле другой цвет). Например, в таком коде

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+, так что селектором наследника можно с успехом пользоваться для сокрытия стилей от этих браузеров (что, собственно, и делается в методе Целика). Кроме селекторов, есть еще и баги браузеров, с помощью которых можно писать кросс-браузерный код. О них поговорим в следующий раз.

Предыдущий материал

• Кросс-браузерный CSS. Введение в проблему