css-the-cascade-thumbnail-stylesheet-origin

Ehi gente del web in questo video andiamo a capire cos’è la stylesheet origin, ovvero da dove provengono gli stili presenti nelle pagine web, perchè lo stile che applichiamo noi con il CSS non è l’unico presente. E’ giusto apprfondire questo argomento perchè fa parte delle basi del CSS.

Le pagine web prendono il CSS da tre differenti fonti: user agent styles, author styles e user styles.

Gli user agent styles vengono applicati di default dal browser, sono molto simili nei diversi browser. Gli author styles sono gli stili che noi aggiungiamo per mostrare le pagine secondo necessità e piacimento; e infine gli user styles sono gli stili che l’utente può applicare, ad esempio attraverso una estensione del browser. Vediamoli nel dettaglio.

User Agent Styles

Ogni browser applica il CSS di default, questo CSS è basico, giusto per creare una struttura. Ad esempio titoli e paragrafi hanno qualche pixel di margine sopra e sotto, il body ha del margine sopra, sotto e ai lati, e via dicendo.

Con il Developer Tools in Google Chrome (al quale puoi accedere dal menu in alto a destra oppure usando la shortcut Ctrl+Shift+I), si possono vedere tutti gli User Agent Styles applicati agli elementi.

Author Styles

L’author style è lo stile che applichiamo noi. Come abbiamo visto nel tutorial Nozioni Base di CSS abbiamo tre modi per farlo: direttamente all’interno dell’elemento, inline styles; all’interno del file, internal stylesheet. O tramite un file esterno, external stylesheet.

User Styles

Gli user styles sono gli stili che l’utente può applicare alla pagina web, questo è fattibile in diversi modi. In Firefox, ad esempio, l’utente può cambiare il CSS modificando la configurazione. In Chrome si ha la possibilità di installare una estensione per modificare il CSS. L’estensione in questione è Stylish, questa mi da la possibilità di modificare lo stile della pagine, e nel caso delle pagine più famose ho anche la possibilità di usare lo stile di altri utenti.

Cosa dobbiamo ricordarci da questo tutorial, l’ordine, o meglio dire la gerachia che il browser applica alle divese fonti dalle quali proviene il css.

Di base ogni browser ha gli user-agent styles, che vengono poi sovrascritti dagli author styles, e infine, come abbiamo visto con l’estensione stylish, gli user styles sovrascrivono i primi 2. Nel prossimo tutorial trattiamo selector specificity, che è un passaggio fondamentale comprendere appieno cascade.


Guarda il video:

Articoli simili