Jak od sebe odlišit Firefox a Operu pomocí CSS

Na tento problém narážím poměrně často zřídka, když kóduji šablony. Stránka se zobrazuje jinak ve Firefoxu a Opeře. Z pravidla pokud chci docílit perfect pixel designu. Většinou to lze vyřešit úpravou csska bez nějakých prasárniček. Najdou se ale i vyjímky, kdy se snažíte a snažíte a Opera nebo Firefox se pořád staví na hlavu. Záměrně se nebavím o Internet Exploreru, na který máme dostatečně známé způsoby jak tomu či onému zamezit interpretaci daného atributu.

Jak tedy na to?

html:first-child p { font-size: 150% } //kod pouze pro Operu 9+
p { font-size: 100% } //kod pro ostatni prohlizece Firefox, apod.

Je možné, že zmíněné řešení může (ne)fungovat různě v budoucích prohlížečích. Je lepší se mu tedy vyhnout. Mým hlavním cílem bylo sdělení, že to lze pomocí css kódu, protože o tom moc lidí neví. Mezi nejspolehlivější metodu se tedy stále řadí podmíněné komentáře podmíněné komentáře fungují jen v IE.



Komentáře

  1. Jirka 07.02.08 21:53

    Comment Arrow

    zajimaci reseni, ale podle me jen kratkodoby, protoze ff i opera se docela rychle vyvijeji a opravuji nedostatky v css. neni to jako ie, ktery je x let ten samy a pouziti hacku je docela vyhodny z toho duvodu, ze se spis udela driv redesign nez ze vyjde nova verze ie :) popravde jsem se jeste nesetkal s tim, ze by se mi stranky zobrazovaly jinak v opere a ff. jedine kdyz mi ve ff utece div nahoru vedle jinyho, kam by se ale spravne nemel vejit. to ale jde krasne vyresit tim, ze se mezi oba hodi prazdny div se style=„clear: both“. nebo mas na mysli jen ruzne veliky fonty jaxi nastinil v clanku?


  2. Pari 08.02.08 11:41

    Comment Arrow

    Osobne jsem tenhle hack jeste nepouzil, ale velikost fontů je dobrej priklad. Cca před půl rokem jsem dělal jeden projekt, kde nebylo jiné možnosti, něž nějak odlišit Operu a Firefox, ale tohle řešení jsem neznal. Nějak si ale nemohu vybavit, v čem to tkvělo, snad si vzpomenu a doplním :-) I u IE se blýská na lepší časy, bohužel ještě aspoň 2 roky budeme muset optimalizovat pro IE6.


  3. Sniper 08.02.08 23:01

    Comment Arrow

    Ja osobne pouzivam pro odliseni firefoxu a opery toho, ze firefox a IE nactou pouze takove stylopisy zadane pomoci , kde je parametr type nastaven na nejakou platnou hodnotu, treba text/css, kdezto opera bere vse. Takze pokud napisu , tak opera skutecne nacte soubor se styly, kdezto ostatni tento soubor diky nesmyslnemu type ignoruji.


  4. Sniper 09.02.08 14:43

    Comment Arrow

    Koukam, ze system vyhodil ty tagy co jsem tam dal jako ukazky. (2Pari: nebylo by fajn, kdyby system nahrazoval mensitka a vetsitka entitama nez je zahazovat?). Takze takhle vypadal puvodni prispevek:
    Ja osobne pouzivam pro odliseni firefoxu a opery toho, ze firefox a IE nactou pouze takove stylopisy zadane pomoci <link>, kde je parametr type nastaven na nejakou platnou hodnotu, treba text/css, kdezto opera bere vse. Takze pokud napisu <link type=„text/nonsense“ …>, tak opera skutecne nacte soubor se styly, kdezto ostatni tento soubor diky nesmyslnemu type ignoruji.


  5. Pari 10.02.08 13:23

    Comment Arrow

    Sniper: Diky za zminene reseni, nevedel jsem o nem a pri psani clanku si ani neuvedomil, ze podminene komentare jsou pouze pro IE :-)

    To reseni mi bylo pochopitelne jiz z prvniho prispevku, ale to neomlouva neopravenou chybu na blogu o které jsem bohuzel vedel. Diky tobe jsem se odhodlal ji upravit.




O autorovi

Pari

Vítejte na mém blogu, rád bych se v krátkosti představil. Je mi 26 let. Momentálně nejvíce času věnuji projektu Lepime.cz - obchod se samolepkami na zeď a tvorbě webů postavených na redakčním systému Drupal pod značkou MEPA.CZ.