O webu
CSS pro IE

Při vytváření webu se můžeme snadno setkat s nejednotnostmi při testování napříč prohlížeči (Pro které prohlížeče optimalisovat?). Leckoho potom může napadnout vytvořit pro problematický prohlížeč zvláštní HTML, CSS nebo JavaScript.

Předně je dobré upozornit, že ideální je psát pokud možno jednotný kód. Tedy například v případě, že nějaká část webu má v některém z prohlížečů jiný rozměr, pokusit se odhalit příčinu než pro různé prohlížeče zadat různé rozměry.

Řešení častějších rozdílů

V případě nejednotnosti vzhledu napříč prohlížeči je možné zkušet následující obecné postupy.

  1. Sjednotit vykreslovací režim, který zabrání odlišnému počítání rozměrů boxů. Většinou pomůže mít na první stránce kódu:

    <!doctype html>
  2. Srovnání různých výchozích marginů a paddingů. Může pomoci CSS reset.

    * {margin: 0; padding: 0}
  3. Značné rozdíly panují u stylování formulářových políček.

  4. V IE občas problém odstraní zapnutí hasLayoutu.

    problematicky-element, problematicky-element * {zoom: 1}
  5. Jako poslední záchrana občas pomůže overflow: hidden.

    element {overflow: hidden}

V případě, že nic z toho nezafunguje a nechce se nám problém dále zkoumat, přichází na řadu naservírování odlišného kódu v závislosti na prohlížeči.

CSS hacky pro IE

IE 7 — rovnítkový hack

V případě, že nějaká vlastnost má platit jen v IE 7, není nic jednodušší než před ním připsat rovná se (ukázka).

element {=color: red}

IE 9, IE 10 — Selektorové hacky

Novější Internet Explorery lze olišit na základě znalosti pokročilejších CSS selektorů.

Hezky se k tomu dá zneužít třeba :root, který funguje až od IE 9. Ve starších prohlížečích se proto daná vlastnost neprojeví (ukázka).

element {color: blue} /* vlastnosti pro IE 8 a starší */
:root element {color: red} /* IE 9+ */

Pro IE 10 jde zase zneužít třeba selektor :required, který ve starších prohlížečích nefunguje (ukázka).

Jelikož v IE 8 tyto selektory ještě nefungují, je možné vytvořit sestavu, co nabídne pro IE 7, 8, 9 a 10 různou podobu (ukázka).

element {color: red /* IE 8 */; =color: blue /* IE 7 */}
:root element {color: green /* IE 9 */}
input.hack {display: none}
input.hack:required + element {color: yellow /* IE 10+ */}

Podmíněné komentáře

Další způsob, jak naservírovat pro IE jiné CSS, jsou podmíněné komentáře. Nefungují ale už v IE 10. Jen když se přepne zobrazovací režim a tím IE 10 poníží na starší.

Podmíněné komentáře se zapisují do HTML kódu, ale není problém pomocí nich připojit CSS soubor jen pro podporovaný Internet Explorer (novější prohlížeče než IE 9 považují podmíněné komentáře za obyčejný HTML komentář).

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

Když už se ale má tento hack použít, přijde mi elegantnější nastavit třídu „ie“ nějakému společnému obalu a v CSS psát:

.ie element {/* Vlastnosti pro IE */}

Ušetří se tím HTTP požadavek na další soubor v příslušných Explorerech.

Detekce z hlavičky user-agent

Na straně serveru (např. v PHP) nebo na straně klienta (v JavaScriptu) je možné přečíst hlavičku user-agent a uhodnout z ní prohlížeč návštěvníka.

Použitelně vypadá Device Detection library z analytického nástroje Piwik.

Elegantněji moc spolehlivě prohlížeče odlišovat nelze. Kvůli tomu, že se občas hackování pomocí detekce user-agenta používá, musejí tvůrci prohlížečů při vytvoření nové verse volit user-agent s ohledem, aby se pokud možno nerozbily starší weby.

Třeba IE 11 už v této hlavičce nemá charakteristické MSIE, ale jméno a číslo jádra — Trident/7.0.

User-agent v JavaScriptu

Informace o prohlížeči je v navigator.userAgent.

Používáte prohlížeč:

(Jinak při nejednotnostech v JavaScriptu je lepší detekovat přímo konkrétní vlastnosti než versi prohlížeče. V CSS k tomu bylo dokonce zavedeno pravidlo @supports.)

User-agent v PHP

V PHP je stejná hlavička dostupná přes $_SERVER['HTTP_USER_AGENT'].

Ještě existujte PHP funkce get_browser, ale málo kde funguje.

Podmínky pro různé IE mohou vypadat následovně:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0') !== false) // IE 11
elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10') !== false) // IE 10
elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 9') !== false) // IE 9
elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 8') !== false) // IE 8
elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false) // IE 7

Hláška „máte starý prohlížeč“

Používáte starý prohlížeč, přejděte na moderní, bezpečný, rychlý a superskvělý Fytopuf 18.

Před umístěním obdobné hlášky, že web funguje jen v nějakém prohlížeči, doporučuji dobře zvážit, zda nestojí za to problémy raději odstranit.

V drtivé většině případů se vyplatí zobrazit stránku alespoň nějak špatně než vůbec. Proto je nutno brát ohled na to, aby se některé prohlížeče nebo dokonce vyhledávače od stránky neodřízly.