Тонкая настройка CSS в различных браузерах

В Internet есть много статей, посвященных вопросу "to hack or not to hack". Я не хочу обсуждать этот "извечный вопрос", только замечу: что бы там ни говорили противники хаков, хаки весьма и весьма популярны (к счастью или сожалению). Я решил сделать небольшую подборку CSS-хаков для различных браузеров. По сути дела, эта статья является компиляцией очень многих источников.

CSS-хаки для Gecko

Gecko — движок для отображения web-страниц, используемый в браузерах на основе Mozilla: Firefox, Netscape, SeaMonkey, Flock, Songbird, Beonex, K-Meleon, Camino, Galeon, Epiphany, Kazehakase, Skipstone.

  • Gecko 0.6: Netscape 6.0;
  • Gecko 0.9.4: Netscape 6.2;
  • Gecko 0.9.7: Galeon 1.0.2;
  • Gecko 1.0.1: Netscape 7.0, Beonex 0.8.2;
  • Gecko 1.1: Skipstone 0.8.3;
  • Gecko 1.2b: FireFox 0.1;
  • Gecko 1.4.1: Epiphany 1.0.4
  • Gecko 1.5: K-Meleon 0.8.2;
  • Gecko 1.7.5: Netscape 8, Galeon 2.0, Kazehakase 0.2.8;
  • Gecko 1.7.13: FireFox 1.0.8;
  • Gecko 1.8.0: FireFox 1.5, SeaMonkey 1.0, Flock 0.7, Songbird 0.2, K-Meleon 1.02, Camino 1.0;
  • Gecko 1.8.1: FireFox 2.0, Netscape 9, SeaMonkey 1.1, Flock 1.0, K-Meleon 1.1, Camino 1.5.5, Epiphany 2.16, Skipstone 1.0.0;
  • Gecko 1.9b: FireFox 3.0b, SeaMonkey 2.0, Songbird 0.3.

Правила, которые понимает только Gecko/Netscape 4

Netscape 4

Данный хак известен как "Caio hack" (в честь Caio Chassot, его обнаружевшего).
Срабатывает в Opera 5 (Win и Mac)

[-]
View Code CSS
/*/*/ /*/
something {}
/**/

Старые Gecko, точные версии неизвестны (работает для OmniWeb 5)

Есть подозрение, что работает только в Gecko 1.2

[-]
View Code CSS
html*#id:not([lang*=""]) something {}

Старые Gecko, точные версии неизвестны (не работает для OmniWeb 5)

Есть подозрение, что работает только в Gecko 1.2
Не валидирующийся CSS

[-]
View Code CSS
html:not([lang*=""])*#id something {}

Gecko 1.0+

[-]
View Code CSS
html:not([xmlns*=""]) something {}

Gecko 1.0-1.8 включительно

Данный хак основан на том, что значения атрибутов id и class не чувствительны к регистру для этих версий Gecko.

[-]
View Code CSS
html:not([xmlns*=""]) #id[id="ID"] something,
html:not([xmlns*=""]) .class[class="CLASS"] something {}

Gecko 1.8+

[-]
View Code CSS
html:not([xmlns*=""]):not(:only-child) something {}

Gecko 1.9

Gecko 1.9 чувствителен к регистру для значений атрибутов id и class (что согласуется со спецификацией CSS).

[-]
View Code CSS
html:not([xmlns*=""]) #id:not([id="ID"]) something,
html:not([xmlns*=""]) .class:not([class="CLASS"]) something {}

Фильтры для Gecko

Старые Gecko (1.0?), включая OmniWeb 5

[-]
View Code CSS
html:/* */not([xmlns*=""]) something {}

OmniWeb 4 и Netscape 4

[-]
View Code HTML
<link rel="stylesheet" href="style.css" media="All"> <!-- All с заглавной A -->

Netscape 4:

Netscape 4 понимает только media="screen", другие значения (или их комбинацию с screen) Netscape 4 понимать отказывается.

[-]
View Code HTML
<link rel="stylesheet" href="style.css" media="all">

Netscape 4 принципиально не поддерживает @import:

[-]
View Code CSS
@import url(style.css);
[-]
View Code CSS
element#id {}

Netscape 4 (и IE8 beta1)

[-]
View Code CSS
/*/*/
something {}
/**/

CSS-хаки для Trident

Trident — движок, используемый Internet Explorer for Windows, начиная с IE4.

  • Trident: IE4;
  • Trident II: IE5;
  • Trident III: IE5.5;
  • Trident IV: IE6;
  • Trident V: IE7;
  • Trident VI: IE8.

Правила, которые понимает только Trident

Trident I-II (IE4-5)

Также затрагивает IE5/Mac

[-]
View Code CSS
* > html something {}

Trident I-IV (IE4-6)

[-]
View Code CSS
/*\*/
* html something {}
/**/

Так получилось, что * html понимает и IE/Mac, поэтому когда нужно спрятать правило от IE/Mac, приходится использовать /*\*/ ... /**/. В случае, когда правило нужно применить ко всем IE, младше седьмого, можно просто использовать * html.

Есть альтернативный способ (не валидирующийся CSS; по непроверенным данным, затрагивает IE4-5/Mac):

[-]
View Code CSS
something {
    _property: value;
}

Trident II-V (IE5-7)

Не валидирующийся CSS

[-]
View Code CSS
something {
    *property: value;
}

Trident II (IE5)

В народе носит название "IE5/Win Bandpass Filter"

[-]
View Code CSS
@media tty {
    i { content: "\";/*" "*/}}; @import 'ie5.css'; {}{;}/*";}
}/**/

Trident III (IE5.5)

В народе носит название "IE5.5 Bandpass Filter"

[-]
View Code CSS
@media tty {
    i {content: "\";/*" "*/}}@m; @import 'ie55.css'; /*";}
}/**/

Trident II/III (IE5.x)

В народе носит название "Mid Pass Filter"

[-]
View Code CSS
@media tty {
    i {content: "\";/*" "*/}} @import 'ie5x.css' /*";}
}/**/

Trident IV (IE6)

[-]
View Code CSS
 

Trident V (IE7)

[-]
View Code CSS
*+html/*/* /**/ body something {}

Trident VI (IE8)

[-]
View Code CSS
*:first-child+/**/html something {}

/*/ something {} /**/

head/*/+body/**/ something {}

Trident V-VI (IE7-8)

[-]
View Code CSS
*:first-child+html something {}

something.class[className="class"] {}

Фильтры для Trident

Trident (IE4)

Также затрагивает IE4/Mac и Netscape 4

[-]
View Code CSS
@import "styles.css"

Trident I-III (IE4-5.5)

Также затрагивает Netscape 4

[-]
View Code CSS
something {
    voice-family: "\"}\"";
    voice-family: inherit;
    property: value;
}

Trident V-VI (IE7-8)

[-]
View Code CSS
something.class:not([className="class"]) {}

Trident VI (IE8)

[-]
View Code CSS
html/*/* /**/ body something {}

CSS-хаки для Tasman

Tasman — движок для IE/Mac. Microsoft больше не поддерживает IE/Mac, поэтому данный браузер можно считать мёртвым.

Правила, которые понимает только Tasman

IE5

Известен в народе как "IE5 Mac Bandpass Filter".

[-]
View Code CSS
/*\*//*/
something {}
/**/

По последним сведениям, хак срабатывает в IE8 beta1.

Фильтры для Tasman

IE4

Также затрагивает IE4/Win и Netscape 4

[-]
View Code CSS
@import "styles.css"

IE5

[-]
View Code CSS
/*\*/
something {}
/**/

CSS-хаки для Presto

Presto — движок, используемый в Opera 7+.

Opera 7.5-9.2x

[-]
View Code CSS
@media all and (min-width:0px) {
    html:lang(e) something {}
}

Opera 9-9.2x

[-]
View Code CSS
@media all and (min-width:0px) {
    html:lang(e) head~body something {}
}

Opera 9

[-]
View Code CSS
html:first-child something {}

Opera 9+

[-]
View Code CSS
@media all and (min-width:0px) {
    head~body:lang(en) something {}
}

Opera 9.5+

[-]
View Code CSS
@media all and (min-width:0px) {
    :root head~body:lang(en) something {}
}

@media all and (min-width:0px) {
    head~body:last-child something {}
}

Safari, WebKit, Shiira и OmniWeb

Safari 2-, KHTML, Shiira 1.22, Shiira 2 и OmniWeb 5/5.5

[-]
View Code CSS
html[xmlns*=""] body:last-child something {}

body:last-child:not(:root:root) something {}

Safari 3

[-]
View Code CSS
body:first-of-type something {}

WebKit

[-]
View Code CSS
@media all and (min-width: 0px) {
    body:not(:root:root) something {}
}

Список источников:

  1. centricle : css filters (css hacks): Will the browser apply the rule(s)?
  2. Chart of Support for CSS Filters/Hacks
  3. CSS hack series
  4. CSS Hacks
  5. CSS Test
  6. css-discuss - CssHack

Поддержка CSS-селекторов различными браузерами

Оригинальная версия

  Trident Tasman Gecko WebKit KHTML Presto iCab
* 7.0 0 1.0 85 Yes 7.0 3.0
E 4.0 0 1.0 85 Yes 7.0 Yes
E.class 7.0 Buggy 1.0 85 Yes 7.0 Yes
E#id 4.0 0 1.0 85 Yes 7.0 Yes
ns|E No No 1.0 No Yes 8.0 No
E F 4.0 0 1.0 85 Yes 7.0 Yes
E > F 7.0 0 1.0 85 Yes 7.0 3.0
E + F 7.0 0 1.0 85 Yes 7.0 3.0
E ~ F 7.0 0.9 1.7 412 3.3.2 9.0 3.0
E[attr] 7.0 0.9 1.0 85 Yes 7.0 3.0
E[attr="value"] 7.0 0.9 1.0 Yes Yes 7.0 3.0
E[attr~="value"] 7.0 0.9 1.0 Yes Yes 7.0 3.0
E[attr|="value"] 7.0 0.9 1.0 Yes Yes 7.0 3.0
E[attr^="value"] 7.0 No 1.0 Yes 3.4 8.02 3.0
E[attr$="value"] 7.0 No 1.0 Yes 3.4 9.0 3.0
E[attr*="value"] 7.0 No 1.0 Yes 3.4 9.0 3.0
E[ns|attr] No No 1.0 No 3.4 9.0 No
E:link 3.0 0 1.0 85 Yes 7.0 Yes
E:visited 3.0 0 1.0 85 Yes 7.0 Yes
E:active Partial 0 1.0 85 Yes 7.0 Yes
E:hover 7.0 0.9 1.0 419.3 Yes 7.0 3.0
E:focus No 0 1.0 Yes Yes 7.0 Yes
E:first-child 7.0 0 1.0 85 Yes 7.0 3.0
E:lang() No 0 1.2 522 3.4 7.5 3.0
E:root No 0.1 1.0 85 3.4 9.5a No
E:first-of-type No 0.9 No 522 3.4 9.5a No
E:last-child No 0.9 1.0 Buggy 3.4 9.5a No
E:last-of-type No 0.9 No Buggy 3.4 9.5a No
E:only-child No 0.9 1.8 Buggy 3.4 9.5a No
E:only-of-type No 0.9 No Buggy 3.4 9.5a No
E:nth-child No 0.9 No No 3.4 9.5a No
E:nth-last-child No 0.9 No No 3.4 9.5a No
E:nth-of-type No 0.9 No No 3.4 9.5a No
E:nth-last-of-type No 0.9 No No 3.4 9.5a No
E:target No 0.9 1.3 Partial 3.4 9.5a No
E:empty No 0.9 1.8 412 3.4 9.5a No
E:not() No 0.9 1.0 85 3.4 9.5a No
E:enabled No 0.9 1.8 522 3.4 9.0 No
E:disabled No 0.9 1.8 522 3.4 9.0 No
E:checked No No 1.0 522 3.4 9.0 No
E:indeterminate No 0.9 No No No No No
E:default No No 1.9 No No 9.0 No
E:valid No No 1.8 No No 9.0 No
E:invalid No No 1.8 No No 9.0 No
E:in-range No No 1.8 No No 9.0 No
E:out-of-range No No 1.8 No No 9.0 No
E:required No No No No No 9.0 No
E:optional No No No No No 9.0 No
E:read-only No No Experimental No No 9.0 No
E:read-write No No Experimental No No 9.0 No
E:first-letter 5.5 0 1.0 85 Yes 7.0 3.0
E:first-line 5.5 0 1.0 85 Yes 7.0 3.0
E:before No No 1.0 85 Yes 7.0 3.0
E:after No No 1.0 85 Yes 7.0 3.0
E::before No No 1.5 85 3.4 7.0 Yes
E::after No No 1.5 85 3.4 7.0 Yes
E::first-letter No 0.9 1.5 85 3.4 7.0 Yes
E::first-line No 0.9 1.5 85 3.4 7.0 Yes
E::selection No 0.9 Experimental 412 3.4 No No
E::value No No No No No No No
E::choices No No No No No No No
E::repeat-item No No No No No No No
E::repeat-index No No No No No No No




Добавить в закладки

Связанные записи

24
Март
2008

Комментарии к статье «Подборка CSS-хаков для различных браузеров» (7)  »

  1. Николай says:

    В дополнении к “Поддержка CSS-селекторов различными браузерами” посмотри сайт http://www.webdevout.net/browser-support-html поддержка CSS1 - CSS3, HTML/XHTML и т.д. может заинтересует…
    Спасибо за подборку.

  2. Vladimir says:

    Николай, большое спасибо! Кстати, я видел эту страницу…

  3. Vladimir says:

    Теперь немного экзотики.

    Хаки:

    [-]
    View Code CSS
    /* Красный цвет - хаков нет */
    div {
        background: red;
        width: 200px;
        height: 30px;
        color: #FFF;
    }

    body:last-child:not(:root:root) div.div1 { background: green; }
    html:not(:nth-child(1)) div.div2 { background: yellow; }
    @media all and (min-width: 0px) {
        body:not(:root:root) div.div3 { background: cyan; }
    }

    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
        div.div4 { background: blue; }
        head ~ body div.div5 { background: black; }
        :root div.div6 { background: silver; }
    }

    @media all and (-webkit-min-device-pixel-ratio:10000) {
        div.div7 { background: fuchsia; }
    }

    Разметка:

    [-]
    View Code HTML
        <div class="div1">Come here, go there, try another one</div><br/> <!-- Safari 1.3.2, Safari 2.0.4/Mac, Safari 3.1, Safari 4.0/WinXP, Konqueror 3.5 -->
        <div class="div2">Come here, go there, try another one</div><br/> <!-- Safari 3.1, Safari 4.0/WinXP, Konqueror 3.5 -->
        <div class="div3">Come here, go there, try another one</div><br/> <!-- Safari 3.0, Safari 3.1, Safari 4.0/WinXP -->
        <div class="div4">Come here, go there, try another one</div><br/> <!-- Opera 9.23-27, Opera 9.50 -->
        <div class="div5">Come here, go there, try another one</div><br/> <!-- Opera 9.23-27, Opera 9.50 -->
        <div class="div6">Come here, go there, try another one</div><br/> <!-- Opera 9.50 -->
        <div class="div7">Come here, go there, try another one</div><br/> <!-- Opera 9.23-27 -->

    Тестовая страница
    Результат на browsershots.org

  4. 40a says:

    Trident IV (IE6) ???

  5. Условные комментарии и CSS-хаки. Round 2. 15 основных CSS-хаков. | ShuBlog says:

    [...] В этой статье можно ознакомится с CSS-хаками для Gecko, Trident…. [...]

Подписаться на RSS-ленту комментариев к статье «Подборка CSS-хаков для различных браузеров» Trackback URL: http://blog.sjinks.org.ua/css/55-css-hacks-and-filters-for-different-browsers/trackback/

Оставить комментарий к записи «Подборка CSS-хаков для различных браузеров»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя