Pomocou podmienených komentárov je možné ľahko zamerať prehliadač Internet Explorer na pravidlá CSS špecifické pre daný prehliadač:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Niekedy sa nesprávne správa engine Gecko (Firefox). **Aký by bol najlepší spôsob, aby ste svojimi pravidlami CSS zacielili len na Firefox a ani na jeden iný prehliadač?" To znamená, že pravidlá určené len pre Firefox by mal ignorovať nielen Internet Explorer, ale aj WebKit a Opera.
Poznámka: Hľadám 'čisté' riešenie. Použitie prehliadača JavaScript sniffer na pridanie triedy 'firefox' do môjho HTML sa podľa mňa nedá považovať za čisté. Skôr by som chcel vidieť niečo, čo závisí od možností prehliadača, podobne ako podmienené komentáre sú 'špeciálne' len pre IE...
Najskôr vyhlásenie o vylúčení zodpovednosti. V skutočnosti nie som zástancom riešenia, ktoré uvádzam nižšie. Jediný CSS špecifický pre prehliadač, ktorý píšem, je pre IE (najmä IE6), hoci by som si prial, aby to tak nebolo.
Teraz riešenie. Žiadali ste, aby bolo elegantné, takže neviem, nakoľko je elegantné, ale určite bude zamerané len na platformy Gecko.
Tento trik funguje len vtedy, keď je povolený JavaScript, a využíva väzby Mozilly (XBL), ktoré sa vo veľkej miere interne používajú vo Firefoxe a všetkých ostatných produktoch založených na Gecku. Pre porovnanie, je to ako vlastnosť behavior CSS v IE, ale oveľa výkonnejšia.
Do môjho riešenia sú zapojené tri súbory:
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;
}
Aktualizácia: Uvedené riešenie nie je až také dobré. Bolo by lepšie, keby namiesto pridania nového prvku LINK pridalo túto triedu "firefox" na prvok BODY. A je to'možné, stačí nahradiť vyššie uvedený JS nasledujúcim:
this.className += " firefox";
Riešenie je inšpirované Dean Edwards' moz-behaviors.
Variantom vášho nápadu je detektor na strane servera, ktorý zistí, aký list štýlu sa má pripojiť k stránke. Takto môžete mať `firefox.css, ie.css, opera.css atď.
Podobnú vec môžete dosiahnuť v samotnom Javascripte, hoci to nemusíte považovať za čisté.
Podobnú vec som urobil tak, že som mal default.css
, ktorý obsahoval všetky bežné štýly a potom sa pridali špecifické štýly
, ktoré prepísali alebo vylepšili predvolené nastavenia.
Jediný spôsob, ako to dosiahnuť, sú rôzne hacky CSS, ktoré spôsobia, že vaša stránka pri ďalších aktualizáciách prehliadača s oveľa väčšou pravdepodobnosťou zlyhá. Ak niečo, tak to bude MIERNEJŠIE bezpečné ako použitie sniffera js prehliadača.