Cosa sono i CSS (Cascading Style Sheets)?

Nel web design, i CSS offrono la possibilità di memorizzare in un documento alcune componenti stilistiche che vengono utilizzate nei documenti HTML, così da poterle utilizzare per tutti i documenti HTML.

Cosa sono i CSS?

L’acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) ed è una modalità per i documenti HTML di disaccoppiare il contenuto di una pagina dalle istruzioni di progettazione dei singoli elementi, come intestazioni, citazioni, ecc.

Puoi creare un file CSS per un dominio e incorporarlo come risorsa esterna in tutte le sottopagine. Questo ti può far risparmiare molto tempo quando ci sono impostazioni predefinite fisse per i tuoi elementi di progettazione che non cambiano tra i documenti.

La parte a cascata diventa poi chiara quando ci si occupa di classi diverse. Ad esempio, puoi specificare nel file CSS che tutte le intestazioni H2 (elemento genitore) siano visualizzate con dimensione del carattere 46 e quindi inserire una sottoclasse delle intestazioni H2 (elemento figlio) che renda il testo in grassetto quando una determinata classe (per es. “grassetto”) viene definita.

Nel documento non è necessario ripetere nuovamente l’istruzione sulla dimensione del carattere per la sottoclasse, poiché questa viene ereditata dall’istruzione superiore.

Con questa istruzione ogni elemento <h2> riceve la dimensione del carattere 42 e solo le intestazioni con <h2 class="grassetto"> verranno rese in grassetto.

Perchè esistono i Cascading Style Sheets?

La possibilità di disaccoppiare il design dal contenuto di un documento porta notevoli vantaggi in termini di velocità. I singoli documenti HTML si accorciano perché le istruzioni di progettazione sono esternalizzate.

Inoltre il gestore del sito web non deve prestare attenzione che tutte le istruzioni di progettazione necessarie siano disponibili per ogni documento. Ciò può ridurre enormemente lo sforzo amministrativo, soprattutto con un gran numero di documenti.

Tra l’altro posso anche dire ai browser per quanto tempo è utilizzabile il file CSS (e può venire memorizzato nella cache). Ciò significa che il browser non deve scaricare il file ogni volta, il che avvantaggia il tempo di caricamento.

Come posso trasmettere le informazioni CCS a un documento?

Ci sono diverse possibilità per inserire CSS in un documento HTML. Le due più comuni sono il collegamento attraverso un link a un file CSS esterno e l’incorporamento diretto all’interno di un documento HTML.

File CSS esterni

Il modo più semplice è di solito mettere tutte le informazioni sullo stile in un file CSS e farvi riferimento nella parte <head> del documento HTML:

<link href="https://www.mio-dominio.it/assets/css/mio-stylesheet.css" 
rel="Stylesheet" type="text/css" />

Così facendo si dice al browser che il file “mein-stylesheet.css” deve essere caricato per visualizzare correttamente il contenuto del documento HTML.

CSS interni

Puoi anche decidere di aggiungere una parte del tuo foglio di stile direttamente all’interno dell’area <head> del documento HTML.

Per fare ciò devi utilizzare un tag <style> . Se per esempio vuoi creare una classe che assicuri che le immagini vengano distribuite in modo reattivo sui dispositivi mobili, puoi scrivere quanto segue direttamente nella <head> del documento:

<style>

.img-responsive {
     display:block;
     max-width:100%;
     height:auto;
}

</style>

Il browser saprebbe ora che tutti gli elementi per i quali è impostata una <class="img-responsive> dovrebbero utilizzare le istruzioni di stile sopra.

Utilizzo dei CSS per l’ottimizzazione dei motori di ricerca

La possibilità di definire le informazioni di stile in modo univoco e di implementarle in tutte le sottopagine arreca naturalmente anche vantaggi per l’ottimizzazione dei motori di ricerca.

Attraverso le istruzioni appropriate in un file CSS puoi specificare esattamente come visualizzare un documento da un desktop e/o da un browser mobile. Quindi puoi creare un Responsive Design unico e tutte le sottopagine ne possono approfittare, cosicché non sia necessario creare due versioni, una desktop e una mobile.

Inoltre il CSS è stato utilizzato negli anni per aumentare la velocità di caricamento di molti siti web. Ciò è diventato necessario quando erano necessari molti file per visualizzare correttamente il sito web.

Nel vecchio standard HTTP, HTTP/1.1, l’abbondanza di richieste significava che il tempo di caricamento veniva aumentato semplicemente perché al browser era consentito solo di creare un numero massimo di connessioni.

Con il nuovo standard HTTP/2 questa restrizione scompare.

CSS e HTTP/1.1

Detto in parole povere, con HTTP/1.1 la maggior parte dei browser consente solo 6 connessioni simultanee per host. Inoltre, le connessioni vengono terminate dopo il trasferimento della risorsa. Ciò può comportare un aumento dei tempi di caricamento a causa della sola latenza (che è particolarmente evidente con le connessioni mobili).

Puoi anche caricare gli elementi grafici che vengono utilizzati nella pagina web come uno Image Sprite di grandi dimensioni e quindi utilizzare CSS per visualizzare solo le parti dell’immagine che contengono la grafica di cui hai bisogno.

CSS e HTTP/2

Con il nuovo standard HTTP 2.0 il limite delle connessioni massime è allentato e anche le connessioni possono essere utilizzate per più di una risorsa. Di conseguenza, la latenza della creazione della connessione gioca un ruolo molto minore nella velocità della pagina.

Conclusione sui Cascading Style Sheets

I CSS sono parte integrante del web design e ha perfettamente senso come SEO di esplorare le possibilità offerte dai fogli di stile a cascata.

Soprattutto quando si tratta di ottimizzazione di PageSpeed, il tempo per il First Contentful Paint può essere ridotto utilizzando CSS interni.

22.06.2022