Text vyšel původně na autorově webu.

Prima video k tématu natočila Jen Simmons.

Zkusím téma shrnout a doplnit vlastními postřehy.

Jen Simmons o problematice mluví hlavně v kontextu nových layoutovacích nástrojů – Flexboxu a Gridu. Díky order a dalším vlastnostem totiž už nemusíte při vymýšlení pořadí prvků v HTML brát v potaz layout. Prostě pořadí plně uzpůsobíte „bezstylovým“ kontextům. Jaké známe?

8 bezstylových kontextů

1) Přístupnost: lidé používající čtečky

Prožitek uživatelů čteček velmi ovlivňuje pořadí prvků v HTML (ale také struktura dokumentu, použití sémantických značek a další věci). Psal jsem už také o tom, jak ve čtečkách testovat.

2) SEO a vyhledávače

Pořadí prvků v HTML může mít vliv na zobrazení výsledků a snad někde i menší vliv na pořadí ve vyhledávačích.

3) Náhledy stránky: Facebook a spol.

Struktura HTML má vliv i na to, jak bude vypadat náhled, který se zobrazí po nasdílení stránky na Slacku, Facebooku a dalších komunikačních sítích.

4) Čtecí služby třetích stran: Pocket, Instapaper atd.

…nebo taky RSS čtečky jako Feedly a další. Vezmou si vaše HTML a přiřadí si k němu nějaké vlastní CSS.

5) Čtecí mód v Safari nebo Firefoxu

Jinak též „Reader View“. A opět platí: prohlížeč si vezme vaše HTML a přidá k němu své CSS.

6) Výpadek CSS

Nezapomínal bych ani na kontext, který Jen Simmons nezmínila: když vaše stránka dočasně nebo trvale CSS nemá. To, že styly zapomenete přidat, není tak pravděpodobné jako to, že vypadnou ve starších částech webu.

Další možnost rozbití CSS uvádí Bohumil Jahoda na Ječas.cz: syntaktická chyba. Stačí hned v první deklaraci zapomenout na ukončovací závorku:

h1 { color: green;

/* a teď už je všechno neplatné */
h1 { … }

7) Problémy s načtením CSS

Další nezmíněná situace: Prohlížeč stáhl HTML a čeká na CSS. Jenže se nedočká.

Tohle se mi poměrně často stává na Edge připojení v pražském metru nebo během cestování vlakem. Dojde k tomu, když během stahování CSS zmáčknete tlačítko „Stop“ v rozhraní prohlížeče.

Jenže někdy zjistíte, že jste jako uživatel webu bez stylů zároveň považován za škodnou:

Když se vám @FINMAG_cz náhodně zobrazí bez CSS, zjistíte že vás automaticky považují za uživatele AdBlocku. A já jsem přitom slušnej kluk a Finmag mám rád. pic.twitter.com/2AUXkeCgmd

— Martin Michálek (@machal) March 4, 2018

8) Hlasoví asistenti: Siri, Google Assistant

…nebo Cortana či Alexa. Jsem si docela jistý, že půjde o jeden z kontextů používání webů. Pojedete v autě nebo hromadné dopravě a necháte si číst nové články z internetu. Velmi blízká budoucnost.

Co je potřeba mít správně?

1. Pořadí prvků ve stránce
2. Strukturu v HTML
3. Celkovou HTML sémantiku

To důležité by v HTML mělo být nahoře. Častým problémem je například komplexní navigace umístěná v kódu ještě před obsahem.

Testování webů bez CSS

• Nejlépe samozřejmě ve zmíněných nástrojích: čtecích módech prohlížečů, čtečkách pro zrakově postižené a tak dále.
• Ve Firefoxu to je jednoduché. Jděte do nabídky „View“ > „Page Style“ a vyberte „No style“.
• V Chrome to snadno jde jen přes rozšíření Web Developer. („CSS“ > „Disable All Styles“).

Shrňme si to:

• I váš web se pravděpodobně někde zobrazuje bez vlastních CSS.
• Nejčastěji je to v různých odečítačích jako je JAWS, čtenářských módech prohlížečů, čtenářských službách typu Pocket, při problémech s načtením stylů nebo do budoucna v hlasových asistentech typu Siri.
• Dohlédněte na to, abyste v HTML měli správně hlavně pořadí prvků, strukturu a sémantiku.
• Otestujete to buď přímo ve zmíněných nástrojích nebo vypnutím stylů ve Firefoxu.