CSS-фільтр

CSS-фільтр — метод програмування, який використовується, щоб приховати або показати CSS-розмітку залежно від браузера, його версії чи можливостей. Різні браузери по-різному підтримують стандарти W3C і по-різному інтерпретують CSS-інструкції. Тому виникає необхідність у механізмі підгонки сайту для різних браузерів.

До різновидів CSS-фільтрів можна віднести умовні коментарі та CSS-хаки.

Умовні коментарі — інструкції для браузера Internet Explorer, які дозволяють написати платформо залежний код і код, залежний від версії браузера. За допомогою коментарів умов можна внести у вебсторінку фрагменти коду, який буде виконуватися тільки в Internet Explorer, або тільки в його конкретній версії. Internet Explorer погано відповідає рекомендаціям W3C стосовно відповідності стандартам HTML і CSS, тому постійно виникає потреба у використанні платформо залежного коду.

Нижче наведений приклад використання коментарів умов для включення в HTML-документ файлу ie.css із специфічними для IE каскадними стилями.

 <!--[if lte IE 6]> < link rel="stylesheet" type="text/css" href="ie.css"> <![endif]--> 

Цей фрагмент коду всі браузери крім IE сприймуть як коментар, заключений в <!-- -->; Internet Explorer інтерпретує фрагмент як повноцінний HTML-код.

CSS-хаки — недокументовані способи опису CSS-стилів, які використовуються для присвоєння різним браузерам інших значень CSS-стилів. На відміну від коментарів умов, даний спосіб написання платформо-залежного коду не є задокументованим виробниками браузерів. Крім того, при виході нової версії браузера хаки можуть не використовуватися (відмінності інтерпретації конкретного хаку різними версіями одного браузера можна використати для написання коду, залежного від версії браузера).

CSS-хаки для браузера Mozilla Firefox:

 .some_class_name, x:-moz-any-link { attr: value; } 

CSS-хаки для браузера Safari:

 html:root.some_class_name { attr: value; } body:first-of-type .some_class_name { attr: value; } html* .some_class_name { attr: value; } 

CSS-хаки для браузера Opera:

 @media all and(min-width:0){ .some_class_name { attr: value; } } html:first-child .some_class_name { attr: value; } 

CSS-хаки для браузера Internet Explorer
IE6:

 .some_class_name { _attr: value; } *html .some_class_name { attr: value; } 

IE7:

 *:first-child+html .some_class_name { attr: value; } *+html .some_class_name { attr: value; } .some_class_name { //attr: value; } /* this one works also on ie6 */ .some_class_name { *attr: value; } /* this one works also on ie6 */ 

Посилання

• — CSS-only Filters Summary — More CSS filters
• CSS hacks — CSS hacks in Developer's F1 blog