Ved hjelp av betingede kommentarer er det enkelt å målrette Internet Explorer med nettleserspesifikke CSS-regler:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Noen ganger er det Gecko-motoren (Firefox) som oppfører seg dårlig. **Hva er den beste måten å målrette CSS-reglene mot bare Firefox og ikke en eneste annen nettleser? Det vil si at ikke bare Internet Explorer skal ignorere reglene som bare gjelder Firefox, men også WebKit og Opera skal gjøre det.
Merk: Jeg leter etter en "ren" løsning. Å bruke en JavaScript-nettlesersniffer for å legge til en 'firefox' -klasse til HTML-en min, kvalifiserer ikke som ren etter min mening. Jeg vil heller se noe som avhenger av nettleserens evner, omtrent som betingede kommentarer bare er spesielle for IE ...
Først av alt, en ansvarsfraskrivelse. Jeg går egentlig ikke inn for løsningen jeg presenterer nedenfor. Den eneste nettleserspesifikke CSS jeg skriver er for IE (spesielt IE6), selv om jeg skulle ønske det ikke var tilfelle.
Nå, løsningen. Du ba den om å være elegant, så jeg vet ikke hvor elegant det er, men det kommer sikkert bare til å målrette mot Gecko-plattformer.
Trikset fungerer bare når JavaScript er aktivert og bruker Mozilla-bindinger (XBL), som brukes mye internt i Firefox og alle andre Gecko-baserte produkter. For en sammenligning er dette som CSS-egenskapen for oppførsel i IE, men mye kraftigere.
Tre filer er involvert i løsningen min:
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
Oppdatering: Løsningen ovenfor er ikke så bra. Det ville være bedre om det i stedet for å legge til et nytt LINK-element vil legge til den "firefox" -klassen på BODY-elementet. Og det er mulig, bare ved å erstatte JS ovenfor med følgende:
this.className += " firefox";
Løsningen er inspirert av Dean Edwards' moz-behaviors..
En variant av ideen din er å ha en "USER-AGENT-detektor på serversiden" som finner ut hvilket stilark som skal knyttes til siden. På denne måten kan du ha en firefox.css, ie.css, opera.css osv
.
Du kan oppnå noe lignende i Javascript selv, selv om du kanskje ikke anser det som rent.
Jeg har gjort en lignende ting ved å ha en default.css
som inkluderer alle vanlige stiler og deretter spesifikke stilark
legges til for å overstyre eller forbedre standardverdiene.