Jak CSS pracuje

CSS je zpracován prohlížečem (aplikace používaná k zobrazení webové stránky, např. Edge nebo Google Chrome) a poté interpretován k tomu, jak má webová stránka vypadat. To také znamená, že ačkoli existuje velmi důkladná specifikace jazyka CSS, mnoho prohlížečů na všech možných zařízeních (stolní počítače, tablety, mobilní telefony atd.) interpretuje váš kód CSS svým vlastním způsobem. Většina vaší práce bude vypadat a fungovat tak, jak očekáváte, mohou existovat jemné rozdíly, pokud si svou práci prohlížíte v některém z mnoha prohlížečů na trhu. V současnosti se prohlížeče snaží výsledný vzhled sjednotit.

Protože CSS je pouze specifikace a nikoli normou, mohou si vývojáři prohlížečů volně přidávat vlastní vlastnosti CSS, což vám umožní provádět pokročilejší věci, ale pouze v daném prohlížeči. Tohoto často používají různí dodavatelé, aby se pokusili přesvědčit W3 (organizaci zodpovědnou za mnoho internetových specifikací, včetně HTML a CSS), aby do další verze specifikace CSS přidala další funkce.

Historicky byl problém s rozdílným vykreslováním v různých prohlížečích větším problémem, než je v současnosti. Zejména Microsoft měl problémy s dodržováním specifikace u svého Internet Exploreru, Naštěstí pro vývojáře na celém světě Microsoft udělal mnoho pro nápravu těchto problémů. Vytvořil nový prohlížeč s názvem Edge, který se chová korektně.

Přesto se však setkáte s rozdíly v zobrazení, zejména při testování v různých prohlížečích na různých zařízeních a operačních systémech. Vaše webová stránka nemusí v Edge vypadat úplně stejně jako v Chromu a rozdíly se mohou objevit i při prohlížení v Chromu na počítači s Linuxem, OSX nebo Linuxem. Z tohoto důvodu vždy testujte webovou stránku v co největším počtu prohlížečů a ujistěte se, že váš CSS odpovídá (více o tom později).

Shrnutí

CSS je zpracováno programem (obvykle webový prohlížeč). Protože různé prohlížeče používají různé vnitřní překladače, nemusí výsledek vypadat úplně stejně na různých zařízeních, platformách a verzích prohlížečů. Ujistěte se, že všechny své stránky otestujete v co největším počtu prohlížečů, a abyste snížili množství problémů, měli byste se ujistit, že váš kód CSS projde kontrolami validátoru W3.

V tomto tutoriálu se budeme zabývat pouze vlastnostmi a technikami, které lze aktuálně použít v nejnovějších verzích nejoblíbenějších prohlížečů: Microsoft Edge, Google Chrome, Mozilla Firefox a Apple Safari. Skutečnost, že těmto vlastnostem a technikám prohlížeče rozumí, však stále neznamená, že jsou interpretovány přesně stejným způsobem, proto si vždy pamatujte zlaté pravidlo CSS: Testujte svou práci co nejvíce!