Přejít k navigační liště

Zdroják » Zprávičky » CSS podle User-Agent

CSS podle User-Agent

Zprávičky Webdesign

Nálepky:

Kompatibilita prohlížečů je věc spíš vysněná než reálná. V praxi každý kodér zjistí, že se prohlížeče od sebe liší. Technicky správným způsobem, jak k těmto odlišnostem přistoupit, je detekovat možnosti prohlížečů a jim přizpůsobit zobrazované prvky. Tedy např. zjistit, zda prohlížeč „umí kulaté rohy“, a pokud ano, tak použít standardní metodu, pokud ne, tak zobrazit hranaté, nebo obrázkovou náhradu. Detekce by vždy měla probíhat právě podle toho, co prohlížeč umí, a ne podle toho, jak se jmenuje. Přesto se může objevit situace, v níž je potřeba rozlišit prohlížeče podle UA (User-Agent) řetězce.

Knihovna CssUserAgent nabízí právě tuto funkci – detekuje UA a podle něj přidá HTML určité „class“, podobně jako knihovna Modernizr. Ve svém CSS pak můžete nastylovat např. prvky pro mobilní prohlížeče nebo pro IE. Přesto však dávejte vždy přednost detekci schopností (Capabilities) před detekcí jména prohlížeče – v budoucí / jiné verzi téhož se může chování změnit. Detekci podle UA ponechte jako záložní řešení pro opravy konkrétní specifické chyby v dané verzi. 

Komentáře

Subscribe
Upozornit na
guest
8 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
blizzboz

hej presne takto to funguje aj v mojom CMS.

juraj

Fuj, absolútne zlý spôsob, vrchol kóderskej neschopnosti. Dnešné prehliadače sú natoľko vzájomne kompatibilné, že nie je najmenší dôvod podsúvať rôzny kód podľa UA stringu. Toto riešenie akurát núti updatovať stránku prakticky s každou novou verziou niektorého prehliadača.

blizzboz

mojko, keby si mal nejaké kóderské skúsenosti určite by si vedel že niektoré prehliadače nepodporujú štandardy.

napr: IE6 nepodporuje vlastnosť min-height existuje spôsob ako ju emulovať. ostatné prehliadače túto vlastnosť podporujú takže ostatným prehliadačom pošlem štýl s min-height a a IE6 pošlem iný štýl. toto je najčistejšie riešenie aké existuje.

blizzboz

ale to linkované riešnie ja fakt prasárna. správne riešenie je poslať klientovi správne CSSko o tom čo sa pošle klientovi by mal rozhodovať server, v mojom CMS sa to rieši cez CSS Exceptions.

juraj

A na toto ti treba testovať uastring? Všetkým prehliadačom pošlem min-height a pre IE6 napíšem do vlastnosti height expression, ktorá vyčíta vygenerovanú výšku a podľa toho nastaví túto vlastnosť na auto alebo na hodnotu takú istú ako mám v min-height. Ale všetko toto môže byť v jednom a tom istom CSS súbore, ktorý uvidia všetky prehliadače rovnako.
Ja napríklad potrebujem pristupovať na jednu stránku, ktorá blokuje prístup pre niektoré prehliadače či operačné systémy (a nepochybujem, že je takýchto amatérčin viac), preto mením uastring. U teba by som tak dostal zlé CSS a možno by sa mi rozpadol aj celý dizajn. Skvelé.

blizzboz

dá sa to riešiť aj jednoduchšie. ale vždy je to kód navyše. a nebudem predsa klientovi posielať zbytočné dáta, zbytočné hacky a spomalovať tak proces načítania stránky, lebo práve to je amatérština. zmena UA stringu neni štandartná operácia. kto to urobí musí počítať s tým že sa mu aj stránka zobrazí neštandartne. na druhej strane po zmene UA stringu sa vám môj layout nerozsype iba sa vám pošlú tie dáta, ktoré pribalujem k prehliadačom ktoré sa správajú neštandartne. vôbec neviete ako presne to mám implementované väčšinou pribalím k IE6, pár riadkov kódu navyše a všade to na 100% funguje, dokonca sa to aj komprimuje (odstraňujú medzery, nasleduje deflate kompresia) a užívateľovi posielam len jeden CSS súbor aby som čo najviac ušetril počet HTTP požiadavok (čo sú tiež zbytočné dáta navyše).

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.