Různý CSS styl v různých prohlížečích
@supports
Pravidlo @supports dovoluje opodmínkovat oblast CSS kódu, která se spustí jen v případě, že prohlížeč podporuje danou vlastnost. Příklad:
@supports(object-fit) {
width: 100%; height: auto; object-fit: none;
}
Prohlížeč, který podporuje dotazovanou vlastnost (v tomto případě object-fit) vyhodnotí pravidlo @supports kladně a začne zpracovávat kód, který je uvnitř chlupatých závorek.
Naopak prohlížeč, který vlastost object-fit nezná, kód nezpracuje (v tomto případě Edge).
Stejně tak se zachová prohlížeč, který neumí zpracovávat pravidlo @supports. Na jaře 2017 @supports neumí pouze Internet Explorer 11. Edge už @supports umí.
Mně osobně se pravidlo @supports líbí moc, protože přináší logičtější správu kódu. Nemusím se ptát na druh prohlížeče a pamatovat si, co který prohlížeč umí. Lepší je se prostě zeptat, jestli je podporována nějaká vlastnost.
Podmíněné komentáře v HTML
Nejpoužívanější způsob, jak poskytnout jiný styl určité verzi Internet Exploreru jsou podmíněné komentáře.
<!--[if IE]>
<link rel="stylesheet" href="styl-pro-explorer.css">
<![endif]-->
Tento příklad funguje takto: pokud je prohlížen v Internet Exploreru, připojí se ke stránce stylopis styl-pro-explorer.css. Pokud je stránka prohlížena v jiném prohlížeči, je celá konstrukce považována za HTML poznámku a styl se nepřipojí.
Podmínky pro jiné prohlížeče než pro IE neexistují (neexistuje např. nic jako [if Firefox]). To ale většinou nevadí, protože v praxi je potřeba hackovat Explorer a ne jiné prohlížeče.
Styly se dají podmínkově připojovat i pro různé verze Exploreru. Podrobnosti prosím hledejte na stránce Podmíněné komentáře v HTML.
Historické tlachání
Kolem roku 2004 dávalo smysl řešit rozdíly mezi prohlížeči tím, že se dělaly různé hacky. Přidávala se chybná podtržítka, chybné uvozovky, neexistující vlastnosti nebo chybná rovnítka. Tato stránka dříve obsahovala dlouhý a podrobný popis, jak se to dělá. V roce 2016 nic z toho už nedává smysl. Prohlížeče podporují CSS natolik podobně, že žádné hackování většinou není potřeba. Jediné, co z doby před více než deseti lety zbylo a je to pravděpodobně funkční, jsou ještě podmíněné komentáře pro Internet Explorer. Nic extra hezkého, něco to dělá.
Novější jsou @media podmínky. Ty nevedou ani tak k tomu, že by v různých prohlížečích kreslili jinak stránku, jako spíš kreslí jinak stránku v závislosti na vlastnostech těch prohlížečů nebo obecně mediálních zařízení. Nejčastěji se tak podmínkuje podle šířky prohlížeče. Prostudujte si @media podmínky.
Poslední aktualizace 6. 4. 2017
Reklama
