Nel web design, i CSS offrono la possibilità di salvare in un file alcune componenti stilistiche in uso nei documenti HTML, in modo da 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 nel caso avessi 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 poi 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 webmaster non deve assicurarsi 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 è possibile anche indicare ai browser per quanto tempo il file CSS è utilizzabile (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?
Esistono 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 inserire tutte le informazioni stilistiche 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 comunica al browser che il file “mio-stylesheet.css” deve essere caricato per poter 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 d’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: puoi quindi creare un Responsive Design unico di cui approfitteranno tutte le sottopagine, invece di creare due versioni singole (una desktop e una mobile).
Inoltre il CSS è stato utilizzato negli anni per aumentare la velocità di caricamento di molti siti web, soprattutto nel caso fossero necessari molti file per visualizzare correttamente un 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 i 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.
