Тонкая настройка 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)
something {}
/**/
Старые Gecko, точные версии неизвестны (работает для OmniWeb 5)
Есть подозрение, что работает только в Gecko 1.2
Старые Gecko, точные версии неизвестны (не работает для OmniWeb 5)
Есть подозрение, что работает только в Gecko 1.2
Не валидирующийся CSS
Gecko 1.0+
Gecko 1.0-1.8 включительно
Данный хак основан на том, что значения атрибутов id
и class
не чувствительны к регистру для этих версий Gecko.
html:not([xmlns*=""]) .class[class="CLASS"] something {}
Gecko 1.8+
Gecko 1.9
Gecko 1.9 чувствителен к регистру для значений атрибутов id
и class
(что согласуется со спецификацией CSS).
html:not([xmlns*=""]) .class:not([class="CLASS"]) something {}
Фильтры для Gecko
Старые Gecko (1.0?), включая OmniWeb 5
OmniWeb 4 и Netscape 4
Netscape 4:
Netscape 4 понимает только media="screen"
, другие значения (или их комбинацию с screen
) Netscape 4 понимать отказывается.
Netscape 4 принципиально не поддерживает @import
:
Netscape 4 (и IE8 beta1)
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
Trident I-IV (IE4-6)
* html something {}
/**/
Так получилось, что * html
понимает и IE/Mac, поэтому когда нужно спрятать правило от IE/Mac, приходится использовать /*\*/ ... /**/
. В случае, когда правило нужно применить ко всем IE, младше седьмого, можно просто использовать * html
.
Есть альтернативный способ (не валидирующийся CSS; по непроверенным данным, затрагивает IE4-5/Mac):
_property: value;
}
Trident II-V (IE5-7)
Не валидирующийся CSS
*property: value;
}
Trident II (IE5)
В народе носит название "IE5/Win Bandpass Filter"
i { content: "\";/*" "*/}}; @import 'ie5.css'; {}{;}/*";}
}/**/
Trident III (IE5.5)
В народе носит название "IE5.5 Bandpass Filter"
i {content: "\";/*" "*/}}@m; @import 'ie55.css'; /*";}
}/**/
Trident II/III (IE5.x)
В народе носит название "Mid Pass Filter"
i {content: "\";/*" "*/}} @import 'ie5x.css' /*";}
}/**/
Trident IV (IE6)
Trident V (IE7)
Trident VI (IE8)
/*/ something {} /**/
head/*/+body/**/ something {}
Trident V-VI (IE7-8)
something.class[className="class"] {}
Фильтры для Trident
Trident (IE4)
Также затрагивает IE4/Mac и Netscape 4
Trident I-III (IE4-5.5)
Также затрагивает Netscape 4
voice-family: "\"}\"";
voice-family: inherit;
property: value;
}
Trident V-VI (IE7-8)
Trident VI (IE8)
CSS-хаки для Tasman
Tasman — движок для IE/Mac. Microsoft больше не поддерживает IE/Mac, поэтому данный браузер можно считать мёртвым.
Правила, которые понимает только Tasman
IE5
Известен в народе как "IE5 Mac Bandpass Filter".
something {}
/**/
По последним сведениям, хак срабатывает в IE8 beta1.
Фильтры для Tasman
IE4
Также затрагивает IE4/Win и Netscape 4
IE5
something {}
/**/
CSS-хаки для Presto
Presto — движок, используемый в Opera 7+.
Opera 7.5-9.2x
html:lang(e) something {}
}
Opera 9-9.2x
html:lang(e) head~body something {}
}
Opera 9
Opera 9+
head~body:lang(en) something {}
}
Opera 9.5+
: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
body:last-child:not(:root:root) something {}
Safari 3
WebKit
body:not(:root:root) something {}
}
Список источников:
- centricle : css filters (css hacks): Will the browser apply the rule(s)?
- Chart of Support for CSS Filters/Hacks
- CSS hack series
- CSS Hacks
- CSS Test
- 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 |
[...] Подборка CSS-хаков для различных браузеров. [...]
В дополнении к “Поддержка CSS-селекторов различными браузерами” посмотри сайт http://www.webdevout.net/browser-support-html поддержка CSS1 - CSS3, HTML/XHTML и т.д. может заинтересует…
Спасибо за подборку.
Николай, большое спасибо! Кстати, я видел эту страницу…
Теперь немного экзотики.
Хаки:
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; }
}
Разметка:
<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
Trident IV (IE6) ???
Что-то не так?
[...] В этой статье можно ознакомится с CSS-хаками для Gecko, Trident…. [...]