Rozlišení jednotlivých prohlížečů a jejich verzí
I přes veškerou snahu používat v co nejmenší míře CSS hacky, je jejich použití někdy nevyhnutelné. Proto bych rád uvedl možnosti jejich použití. Musíme rozlišit, jestli chceme nadefinovat jeden soubor stylů a v něm také všechny hacky pro jednotlivé prohlížeče, nebo pro každý prohlížeč použít speciální soubor stylů.
CSS hacky v jednom souboru
Pro první případ můžete využít výborné Pixyho Explorerové síto:
#prvek {
color: black; /* styl pro všechny prohlížeče */
_color: red; /* styl jen pro IE/Win, všechny verze */
_color/**/: orange; /* styl jen pro IE/Win, jen 5.5 a vyšší */
_co\lor: yellow; /* styl jen pro IE/Win, jen 6.0 a vyšší */
}
html>body #prvek { color: green }
/* styl pro všechny prohlížeče mimo IE/Win */
#prvek[id] { color: blue }
/* styl pro všechny prohlížeče mimo IE (včetně IE/Mac) */
Místo podtržítkového hacku můžete klidně také použít * html:
#prvek {
color: black; /* styl pro všechny prohlížeče */
}
* html #prvek {
color: red; /* styl jen pro IE/Win, všechny verze */
color/**/: orange; /* styl jen pro IE/Win, jen 5.5 a vyšší */
co\lor: yellow; /* styl jen pro IE/Win, jen 6.0 a vyšší */
}
html>body #prvek { color: green }
/* styl pro všechny prohlížeče mimo IE/Win */
#prvek[id] { color: blue }
/* styl pro všechny prohlížeče mimo IE (včetně IE/Mac) */
Případně se můžete podívat na podporu CSS hacků v prohlížečích.
CSS hacky v samostatných souborech
Vraťme se ale k myšlence samotných souborů s hacky pro jednotlivé prohlížeče. K tomu nám dobře poslouží Mid Pass Filter, který aplikuje styl pouze pro IE5.x / Windows.
@media tty {
i{content:"\";/*" "*/}} @import 'ie5.xwin.css'; /*";}
}/* */
Obdoubou Mid Pass Filteru je IE5/Mac Band Pass Filter. Ten slouží pro definování stylu pouze pro IE5 / Mac.
/*\*//*/ @import "ie5mac.css"; /**/
Pro lepší pochopení se podívejte na následující dva obrázky:

Teď už je pouze na vás, zda použijete jeden soubor se styly se všemi případnými hacky, nebo více souborů pro jednotlivé verze prohlížečů.
Seriál: CSS hacky
- :hover i pro IE>=5 [20. července 2005 10:47]
- Podtržítkový hack je nevalidní [21. října 2004 20:30]
- Rozlišení jednotlivých prohlížečů a jejich verzí [8. července 2004 10:00]
- Podpora CSS hacků v prohlížečích [21. ledna 2004 16:26]
- CSS hack pro Internet Explorer [21. listopadu 2003 14:50]
- Už žádné další CSS hacky [7. listopadu 2003 20:55]
Komentáře
@media tty {
i{content:"\";/*" "*/}} @import 'ie5.xwin.css'; /*";}
}/* */
to má být css? :D
Prostě je to hroozně nepřehledný. Já to vyřešil tak že ladím pod IE6 a na zbytek mastím. ;)
První část příspěvku je výborná, ale k té druhé bych měl připomínky. Když už oddělujete styly pro extra prohlížeč do extra souboru, není lépe použít přímo v HTML souboru podmíněné komentáře a na základě nich importovat jednotlivé CSS soubory? viz: http://www.mraveniste.org/weblog/2003/11/01-ie-komentare.html
Myslím, že to dokladuje to, čeho jsem se vždy obával. MS se snaží alespoň vzdáleně IE přiblížit ke standardům a pak se jednotlivé verze chovají zcela jinak a když k tomu přičtete, že na starších Win už nová IE nelze instalovat, takže je třeba brát v potas i verze staré ... Uf. Viz http://blog.macich.net/1086539280-microsoft-opravuje-chybu-v-ie-ale-dela-chybu.html
[3] A jde podmíněnýma komentářema odfiltrovat IE5 /Mac ?
Jinak je to otázka přístupu, zda filtrovat v HTML či až v CSS.
[6] Nejde, IE5/Mac vidí podmíněné komentáře jako poznámku. Zajímalo by mě, zda se má dnes cenu zabývat "vzhledným webem" IE5/Mac.
Na otázku, zda filtrovat v HTML nebo CSS sám nemám odpověď. Otázku bych si dovolil pložit jinak: Proč nepoužívat raději naprosto bezpečné filtrování v HTML, než "relativně bezpečné" CSS triky.
položím ještě jednu otázku:
má smysl vůbec vyvíjet úsilí pro filtrování čtyřkových prohlížečů a IE5/Mac?
A teď abychom všechny položené otázky zvedli ;-). Čtyřkové prohlížeče bych dnes vůbec ke stylům nepouštěl. Ale jak podstrčíme styly jen Exploreru pětce a šestce k ošetření jejich chyb? Buďto CSS trikováním, nebo podmíněnými komentáři. Podmíněné komentáře jsou bezpečné, leč filtrujeme v HTML. CSS triky jsou méně bezpečné, ale filtrujeme v CSS. Co je větší priorita? Já myslím, že záleží na konkrétním webu - někde bude lepší jedno, jinde druhé.
Je to trošku OT, ale musím říct, že když jsem tvořil svoje Seky, měl jsem děsnou radost z toho, že se na podobné hrůzy můžu v klidu vybodnout a spokojit se s tím, ŽE se v nestandardních prohlížečích zobrazí a nepatlat se s tím, JAK PŘESNĚ budou vypadat...
Ještě jedna taková otázka k zamyšlení, ať má Jan Bien co zvedat ;-)
Myslíte si, že je nutné, aby se ve všech prohlížečích web zobrazoval stejně? Nebo stačí, aby se zobrazoval dobře (!), ač s trošku jinými rozměry boxů, velikostí písma atd.
Jestliže dělám web sám, grafikou počínaje, HTML kódem pokračuje, a obsahem konče, pak se samozřejmě lze vyhnout trikům. Ale jakmile grafický návrh dělá jeden, obchodník do toho dodá své reklamní formáty přesných rozměrů a do vzhledu mluví dalších pět lidí, tak to nejde jinak. Ovšem tím už jsme mimo původní příspěvek.
Tyhle triky jsou naprosto šílené. Kdybych potřeboval nějaký styl "MSIE only", použil bych podmíněný komentář, který je přehledný, validní a lze jím přesně specifikovat konkrétní prohlížeč. Ostatně, viz http://interval.cz/clanek.asp?article=896 (Pavel Růžička, 18. 1. 2002 ;-)
Než používat podobné postupy, tak to radši oželím 10px sem a 10px tam...
Má smysl dělat pro všechny prohlížeče stránky na pixel přesně? Podle mě nemá. Dělám je "interaktivní", v každém prohlížeči jsou trochu jiné, ale fungují dobře a zobrazují se správně a jsou použitelné, To snad stačí nebo ne?
JersyWoo, Vít Dlouhý: Ano, ale když děláte stránky s grafikou, tak to někdy nejde. To je ten problém. ;)
Na IE/Mac už kašlete. Je to dnes už jen promilová minorita s ukončeným vývojem a podporou (majortiní na Macu je dnes Safari) - nejlepší je odříznout zcela od stylů.
Este by som pridal moznost oddelit prehliadace pomocou server side jazyka. Potom sa mozte vyhnut vacsine hackov.
[14][15] Pánové, pracovali jste někady na nějakém rozsáhlejším složitějším projektu, u něhož jste nedělali grafický návrh a do kterého mluvilo tak 5 lidí?
Ono totiž "těch nějakých 10px" může znamenat, že se plovoucí design poskládá pěkně pod sebe v jednom případě, či se zobrazí z nehezkými mezerami v případě opačném. Když to chcete udělat tabulkami, tak se to dlouho načítá. A konečně když použijete jinou konstrukci, tak zase musíte zvolit nevhodné pořadí dat v HTML souboru.
[17] Výborně, díky. Spadl mi kámen ze srdce, že IE/Mac nemusím řešit.
[18] To ne, to je nespolehlivé. Na cestě mohou být různé proxy servery ze kterých stahují různé prohlížeče. Krom toho se prohlížeče mohou hlásit jak se jim, resp. jejich uživatelům, "zachce".
to Honza Bien [19]: Já si vždycky dělám všechno sám ;-))) A funguje to... kupodivu. Drtivou většinu z popsaných triků jsem nikdy nepotřeboval a stejně to sedělo na pixel.
za celý život jsem si vystačil jen s tímto:
#prvek {
padding: 10px;
width: 100px;
widt\h: 80px;
}
a sem tam podtržítkový hack....
Ja souhlasim s DGXem, taky jsem v zivote podtrzitkovy hack nepotrebovat a sedi mi vse na 1px presne ve vsech prohlizecich a jeste to staci byt validni. Mrknete se treba na mou posledni praci (jeste nedokonceno a nespusteno), ve vsech beznych prohlizecich naprosto stejne (a to je tam tech prvku na pozicovani s presnosti 1px pozehnane), opet i validni.
Dle meho potrebuji podtrzitkovy hack a podobny nahrazky jen ti, co jsou lini si se zdrojakem hrat tak dlouho az je to presne.
Sorry, neuvedl jsem adresu te prace, je to http://www.ceskesporty.cz
Další příspěvky
- Aktuální příspěvky
- Novější příspěvky
- Jak dlouhý je život chyby v Mozille? [10. července 2004 23:29]
- CSS Total Commander [9. července 2004 19:14]
- Návod na XHTML a CSS [8. července 2004 13:07]
- Starší příspěvky
- Maxthon nahradil MyIE2 [7. července 2004 21:41]
- Google hack [6. července 2004 22:32]
- Kniha o SEO [5. července 2004 8:36]
- Všechny příspěvky za měsíc červenec 2004


