Фильтрация и скрытие стилей от определенных браузеров часто применяется при сложной кросс-браузерной верстке, в этой статье мы небудем вдаваться в мириады возможных ситуаций, когда такие дизайнерские "хаки" необходимы, а прямо перейдем к рассмотрению примеров скрытия CSS стилей.

Скрываем CSS от IE3, IE4, NS4

В этом методе используется JavaScript, который позволяет скрыть CSS стили от IE3, IE4, NS4, и любых других браузеров не поддерживающих document.getElementById. Скрипт должен быть написан в одну строку.

<script type="text/javascript">


<!--//--><![CDATA[//><!--


if(document.getElementById) document.write('<style type="text\/css"> h1 { color: red } \/* hides from old browsers *\/ <\/style>');


//--><!]]>


</script>

Скрываем CSS от NS6, Moz1, Op5.12, Op6.0

Этот метод так же использует JavaScript для фильтрации стилей в браузерах NS6, Moz1, Op5.12, Op6.0. Так же как и в предыдущем примере скрипт должен быть записан в одну строку.

<script type="text/javascript">



<!--//--><![CDATA[//><!--



if(!(document.getElementById&&!document.all)) document.write('<style type="text\/css"> h1 { color: green } \/* hides from NS6.1, Moz1.0 *\/ <\/style>');



//--><!]]>



</script>

Фильтрация CSS во всех IE <7

В этом методе используются комментарии с условием, которые позволяют скрыть стили от всех версий IE ниже IE7. Экстраполяция этого метода позволяет фильтровать CSS для любых версий IE.

Note: последняя строка этого метода может вызывать ошибки при валидации.

<!--[if gte IE 7]>



<link rel="stylesheet" type="text/css" href="ie-hacks.css" media="screen" />



<![endif]-->

Так же эти комментарии могут быть использованы для фильтрации скриптов и разметки.
В этом примере файл JavaScript скрыт от всех версий IE кроме IE7:

<!--[if gte IE 7]>



<script src="http://domain.com/javascript.js" type="text/javascript"></script>



<![endif]-->

В этом примере показано как скрыть CSS стили от всех версий IE строго до версии IE6.0:

<!--[if gte IE 6.0]>



<style type="text/css">h1 { color: red }</style>



<![endif]-->

Скрываем CSS от NS4.x, IE3Win, IE4win+mac, IE5win, и IE6win

Этот метод скрывает стили от NS4.x, IE3Win, IE4win+mac*, IE5win, и IE6win. Этот метод основан на исключении кавычек из url() атрибута:

<style type="text/css">



<!--



@import url(hidden.css) screen; /* hide from NS4.x, IE3Win, IE4win+mac, IE5win, and IE6win */



-->



</style>

* Note: IE4/Win выберет CSS файл расположенный в той же директории, что и ссылающийся файл, так же этот метод не сработает в IE4.72/Win

Скрываем CSS от NS4

Этот метод скрывает CSS от всех версий NS4:

<style type="text/css" media="screen, projection">



<!--



.hidden {color: red } /* hides from NS4 */



-->



</style>

Скрываем CSS от NS4, IE4win+mac

Так можно скрыть CSS от NS4 и IE4win+mac:

<style type="text/css">



<!--



@import "hidden.css"; /* hides from NS4, IE4win+mac */



-->



</style>

Еще один метод скрытия стилей от NS4 и IE4win+mac:

<style type="text/css">



<!--



.hidden {color: red } /* hides from NS4, IE4win+mac */



.pseudo {/* perhaps not needed */}



-->



</style>

Скрываем CSS от браузеров Opera 5, Opera 6, Opera 7

Этот метод позволяет скрыть CSS от Opera 5, Opera 6, Opera 7:

<style type="text/css" media="sc&#82;een">



<!--



.hidden {color: red } /* hides from Opera 5,6,7 */



-->



</style>

Скрываем CSS от NS6.1 и Mozilla

Добавление комментария между элементом и связанным с ним классом или id позволяет скрыть CSS стили от браузеров Netscape 6.1 и Mozilla:

<style type="text/css">



<!--



span/*comment*/.hidden { color: red } /* hides from NS6.1 and Mozilla */



-->



</style>

Использование директивы @import

Скрываем CSS от NS4.x, IE3win, IE4win (кроме 4.72), IE4.01mac, IE4.5mac, Konq2.1.2, Amaya5.1win

Этот метод скрывает стили CSS от браузеров NS4.x, IE3win, IE4win (кроме 4.72), IE4.01mac, IE4.5mac, Konq2.1.2, и Amaya5.1win. в нем используется url() атрибут с кавычками:

@import url("style.css");

Скрытие стилей CSS от NS4.x, IE3, IE4* (кроме 4.72)

Этот метод скрывает стили от NS4.x, IE3, IE4* (кроме 4.72). используется атрибут url() без кавычек:

@import url(../style.css);

* Note: IE4win выберет CSS файл расположенный в пределах той директории где расположен HTML файл.

Скрываем стили от NS4.x, IE6win и ниже

Этот метод скрывает CSS от NS4.x, IE6win и ниже. Метод использует url() с атрибутом media в значении screen:

@import url(style.css) screen;

Скрываем стили от NS4.x, IE4win и ниже, IE4.01mac, Konq2.1.2

Этот метод позволяет скрыть CSS стили от NS4.x, IE4win и ниже, IE4.01mac, Konq2.1.2.Метод использует директиву import без атрибута url():

@import "style.css";

Скрываем CSS от определенных (X)HTML тегов

Объявляя более одного класса мы скрываем CSS от этого тега:

<div class="class1 class2">The CSS from either class will not affect this tag</div>

Стили для IE5/Win

Используя частные фильтры можно применять стиль только для IE5/Win:

@media tty {



i{content:"\";/*" "*/}} @import 'ie5-win.css'; /*";}



}/* */

Стили для IE5/Mac

Очередной пример фильтрации:

<style type="text/css">



/*\*//*/



@import "ie5mac.css";



/**/



</style>

Стили IE5/Win

Еще один пример фильтров:

<style type="text/css">



@media tty {



i{content:"\";/*" "*/}}; @import 'styles.css'; {;}/*";}



}/* */



</style>