Skjule CSS for browsere
Indledning | Oversigt | @import url("...") | @import url(...) | @import url(...) screen | @import "..." | media="" | @media | kommentar | attribute | child | Tantek | Owen | backslash | Liorean | Mid Pass FilterIndledning
Jeg har samlet nogle forskellige hacks til at skjule CSS for forskellige browsere.
Til hvert eksempel er der en test linie "Hvis denne tekst er grøn forstår browseren reglen".
Hvis linien er grøn forstår din browser CSS'en.
Er den rød forstår browseren ikke CSS'en,
og du kan på den måde skjule noget stylesheet for din browser.
Denne side vil løbende blive opdateret når jeg finder nye hacks.
Oversigt
| Browser | IE 4 win | IE 5 win | IE 5.5 win | IE 6 win | IE 5 Mac | Netscape 4 | Netscape 6 | Mozilla 1.0 | Opera 6 | Opera 7 |
|---|---|---|---|---|---|---|---|---|---|---|
| Oversigt over Hacks og hvilke browsere de skjules for. | ||||||||||
| @import url("...") | x | |||||||||
| @import url(...) | x | |||||||||
| @import url(...) screen | x | x | x | x | x | |||||
| @import "..." | x | x | ||||||||
| media="" | x | |||||||||
| @media | x | x | x | |||||||
| kommentar | x | x | x | |||||||
| attribute | x | x | x | x | x | x | ||||
| child | x | x | x | x | x | |||||
| Tantek | x | x | x | x | ||||||
| Owen | x | (x) | (x) | (x) | x | x | ||||
| backslash | x | |||||||||
| Liorean | (x) | (x) | ||||||||
| Mid Pass Filter | x | x | ||||||||
@import url("...")
url() med gåseøjne
@import url("hide1.css");Hvis denne tekst er grøn forstår browseren reglen
@import url(...)
url() uden gåseøjne
@import url(hide2.css);Hvis denne tekst er grøn forstår browseren reglen
@import url(...) screen
url() med media
@import url(hide3.css) screen;Hvis denne tekst er grøn forstår browseren reglen
@import "..."
uden url()
@import "hide4.css";Hvis denne tekst er grøn forstår browseren reglen
media=""
<link href="hide5.css" type="text/css" rel="stylesheet" media="all" />Hvis denne tekst er grøn forstår browseren reglen
@media
CSS:
@media all {
... /* stylesheet rules here */
}Hvis denne tekst er grøn forstår browseren reglen
kommentar
Indsæt en kommentar /* */ lige efter en selector.
#hide7/* */ { color: green; }Hvis denne tekst er grøn forstår browseren reglen
attribute
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
p[id] { color: green; }Hvis denne tekst er grøn forstår browseren reglen
child
http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors
p>span { color: #00f; }Hvis denne tekst er grøn forstår browseren reglen
Tantek
http://tantek.com/CSS/Examples/boxmodelhack.html
p#tantek {
voice-family: "\"}\""; /* Nogle browsere har en overstættelses fejl */
/* og vil ignorere følgende regel. */
voice-family: inherit;
color: #f00;
}Hvis denne tekst er grøn forstår browseren reglen
Owen
http://www.albin.net/CSS/OwenHack.html
Dette hack skjuler CSS for Opera 6 og MSIE (version 6 og før)
head:first-child+body p#owen {color: green;}
Hvis denne tekst er grøn forstår browseren reglen
Dette hack skjuler kun CSS for Opera 6
p#owen2 {
color: green;
}
/* Vær sød mod Opera */
html>body p#owen2 {
color: green;
c\olor: red; /* Vær ond mod Opera 6 */
}
head:first-child+body p#owen2 {color: green;}Hvis denne tekst er grøn forstår browseren reglen
Backslash
Backslash hack som skjuler den næste regel i stylesheet'et for MacIE5.
#backslash { color:red; }
/* backslash udkommentar hack \*/
#backslash { color:green; }
/* forsætter efter hack */Hvis denne tekst er grøn forstår browseren reglen
Liorean's Alternate Stylesheet Hack
http://liorean.web-graphics.com/css/althack/
Dette hack er ikke baseret på CSS specifikationerne, men på [HTML401] 14.3 External style sheets. Det er kun linket med titlen 'default' der skal farves grøn, de andre skal parses som alternativer og farves rød.
<link type="text/css" rel="Stylesheet" href="default.css" title="default">
<link type="text/css" rel="Stylesheet" href="%20junk%20.css" title=" junk ">
<style type="text/css" title=" embedded junk ">@import url("%20embedded%20junk%20.css");</style>Mid Pass Filter
Dette hack parser et eksternt stylesheet til Internet Explorer version 5.x for windows, men ikke til tidliger / ældre browsere og heller ikke til nyere / mere modernet browsere.
Du kan læse mere om det på tanteks hjemmeside.
@media tty {
i{content:"\";/*" "*/}} @import 'midpassbefore.css'; /*";}
}/* */
p.test { color:green; padding:1em }
p.test strong { color:black; background:#fff; padding:0 2px; margin:-2px }
@media tty {
i{content:"\";/*" "*/}} @import 'midpassafter.css'; /*";}
}/* */Dette afsnit har en grøn tekst i alle browsere, der understøtter det mest basale CSS. Afsnittet vil have en rød baggrundsfarve i IE5.x/windows fra det @importeret stylesheet "midpassbefore.css" i starten af det inline stylesheet og en tyk gul ramme fra det @importeret stylesheet "midpassafter.css" i slutningen af det inline stylesheet.