CSS tyylien poisto

Rakenteet esiin

Kaikki maailman sivut ovat oikeastaan simppeleitä HTML dokumentteja jotka usein noudattavat samaa kaavaa. CSS:n avulla sivut voidaan tehdä hyvinkin eri näköisiksi ja toisistaan poikkeaviksi. Pienellä koodipätkällä voimme nähdä miltä eri sivustot näyttävät jos poistamme niistä kaikki tyylit. Vieraile muutamalla sivustolla ja tee seuraava:

1. Kopioi seuraava pätkä leikepöydälle:

   document.querySelectorAll('[style]').forEach(el => el.removeAttribute('style'));
   document.querySelectorAll('link[rel="stylesheet"]').forEach(el => el.parentNode.removeChild(el));
   document.querySelectorAll('style').forEach(el => el.parentNode.removeChild(el));

2. Avaa selaimesi "Inspect" työkalu (suomeksi "Tarkastele"). Se löytyy valikosta Työkalut → Selaintyökalut

3. Klikkaa "Console" välilehteä ja liitä kopioitu koodinpätkä avautuneeseen kenttään.

4. Paina Enter ja katso kun sivun tyylit katoaa!

Pystyisitkö käyttämään sivua ilman tyylejä?
Mitä elementtejä sivulle saattaa ilmaantua jota tyylien kanssa ei näkynyt?
Onko tyylittömässä sivustossa jotain parempaa (käytettävyys? luettavuus? selkeys? johdonmukaisuus?)?