Přejít k navigační liště

Zdroják » Webdesign » Weby bez CSS: Existuje to vůbec? A jak to testovat?

Weby bez CSS: Existuje to vůbec? A jak to testovat?

Články Webdesign

Je docela dost situací a kontextů, ve kterých se weby vykreslují s jinými než vašimi styly nebo úplně bez nich.

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:

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.

ebook-vdcss3-prebal-final

Kniha „Vzhůru do (responzivního) designu“

Kompletní průvodce návrhem a implementací responzivních uživatelských rozhraní v e-booku a knize. Více informací.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.