Web, UX & Technologie

CSS

Jazyk pro vizuální vzhled webových stránek

(Cascading Style Sheets)

Co je CSS

CSS (Cascading Style Sheets) je jazyk, kterým se popisuje vzhled webové stránky odděleně od jejího obsahu. V HTML stojí, že jde o nadpis. V CSS, že ten nadpis má být zelený, tučný a s mezerou nad sebou. Jeden stylopis obsluhuje celý web, takže změna barvy tlačítka na jednom místě se propíše do všech šablon najednou.

Proč styly nepatří přímo do značek

Zapsat vzhled natvrdo k jednomu prvku jde. Skoro vždycky se to vymstí. Takový zápis platí jen pro to jedno místo, nedá se přepsat ze sdíleného souboru a při redesignu ho někdo musí dohledat a ručně předělat na padesáti stránkách. Tenhle web má proto v pravidlech napsáno, že veškeré CSS patří do jediného sdíleného souboru a výjimky pro konkrétní stránku se řeší blokem v její hlavičce.

Styly a rychlost vykreslení

Prohlížeč nevykreslí stránku, dokud si nenačte styly, které k ní patří. Než tedy návštěvník uvidí první obrazovku, musí stáhnout a zpracovat celý stylopis. U šablon nacpaných efekty pro všechny myslitelné varianty webu to znamená stovky kilobajtů kvůli hrstce prvků, které jsou reálně vidět. Když v PageSpeed Insights svítí varování o zdrojích blokujících vykreslení, bývá pod ním právě CSS.

Kdy sahám do cizích stylů

Do stylů klientských webů zasahuju jen tam, kde mi něco brání v měření nebo v testu: schovaný prvek, tlačítko bez rozlišitelného stavu, banner překrývající formulář na mobilu. Vždycky si předtím uložím původní podobu souboru. Jedna přepsaná deklarace umí rozhodit rozvržení na místě, na které se pak měsíc nikdo nepodívá, a tenhle druh objevu si nepřeju u žádného klienta.

Časté otázky

Proč má být CSS v samostatném souboru?

Protože se stáhne jednou a použije se na všech stránkách. Prohlížeč si ho uloží do mezipaměti a při dalším kliknutí ho už nestahuje znovu. Styl zapsaný do stránky se přenáší pořád dokola a při změně vzhledu se hledá po celém webu.

Zpomaluje CSS načtení webu?

Objem stylů ano. Prohlížeč čeká, až je stáhne, a teprve pak kreslí. Rozdíl mezi úsporným stylopisem a šablonou plnou nepoužitých pravidel je na mobilním připojení dobře vidět.

Ovlivňuje CSS pozice ve vyhledávání?

Nepřímo. Vyhledávač hodnotí rychlost načtení a použitelnost na mobilu a do obojího styly mluví. Samotné barvy a fonty o pozici nerozhodují.