CSS layouts, due parole che non devono essere sottovalutate. Cos’è un CSS, cosa significa farlo bene e perché, farlo capire al cliente è così difficile? Cercherò di trasmetterti semplicemente ma in maniera approfondita delle nozioni su cosa siano esattamente i CSS, le diverse tipologie da utilizzare e come farlo con profitto nei propri progetti web.

L’importanza di CSS è difficile da far percepire appieno. Se ti stai chiedendo cos’è il CSS e perché è così importante, in breve il CSS ti permette di controllare tutti gli aspetti relativi al design del tuo sito web. Tipografia, colori, impostazione della pagina e qualsiasi altro aspetto visivo di una pagina HTML sono controllati tramite CSS.

Inoltre, CSS ti consente di controllare e regolare il design e la formattazione dell’intero sito Web (non importa quanto grande o piccolo è) da un file punto. Questa operazione viene eseguita utilizzando il cosiddetto style sheet esterno.

L’importanza dei CSS: analizziamoli in profondità!

Accanto a HTML, CSS (che è l’abbreviazione di Cascading Style Sheets) è fondamentale per tutti i web design moderni.

Altre tecnologie potrebbero essere aggiunte al mix di progettazione web – JavaScript, PHP e altri – ma HTML e CSS verranno sempre utilizzati, ne sono di fatto le fondamenta.

Ma qual è la differenza tra HTML e CSS?

Ottima domanda! Ecco di cosa si tratta…

HTML gestisce la struttura della pagina Web. Vera e propria spina dorsale composta da elementi chiamati TAG. Ci sono elementi HTML per tutti i tipi di contenuti di una pagina – intestazioni, paragrafi, sezioni, tabelle… e molti, molti altri.

Considera questi elementi (TAG) HTML come delle caselle vuole, nelle quali versare il contenuto della tua pagina. Quindi, se desideri che alcuni contenuti testuali siano un titolo, dovrai metterli nella casella dal TAG intestazione. Vuoi che altri testi siano paragrafo? Mettili nella casella dal TAG paragrafi. Ora pensas che tutti questi possono essere nidificati, cioè uno dentro all’altro fino a creare una struttura complessa per ogni pagina specifica del tuo sito web.

Quindi, in questo modo, si può pensare che HTML sia un vero e proprio scaffolding, una trave centrale sul quale costruire la pagina web.

Ma il CSS come si inserisce in tutto questo?

CSS applica la formattazione (font, colori, posizionamento di oggetti e così via) sopra il framework strutturale non elaborato di una pagina HTML.

Così, il CSS layout si trova in cima alla struttura raw (grezza) di HTML per letteralmente renderlo visivamente e organicamente presentabile. Questo è il motivo per cui HTML e CSS sono fondamentali per tutto il web design – lavorano insieme per costruire e formattare le pagine web.

E questo è ciò che rende il layout con CSS così importante. CSS separa il contenuto e la struttura di una pagina dalla sua progettazione e formattazione. Ciò consente ai progettisti e ai proprietari di siti Web di applicare rapidamente la formattazione ai propri layout e di apportare le modifiche necessarie.

Se volete vedere un esempio visivo di come tutto questo esattamente funziona, allora non c’è posto migliore di CSS zen Garden. Qui puoi applicare una formattazione CSS diversa direttamente allo stesso codice HTML layout.

Considerato che CSS separa la progettazione dal contenuto, i proprietari dei siti possono modificare a piacimento il design del loro sito quanto vogliono senza rischiare di dover riscrivere il contenuto o la struttura del sito web.

Così ora che hai compreso l’importanza dei CSS, quali sono alcuni dei suoi vantaggi? Dovresti perdere del tempo per impararlo? E quali sono le funzioni specifiche del web design CSS?

Che cos’è il CSS? Uno sguardo ancora più profondo… la storia

Al fine di comprendere appieno l’importanza di CSS, è necessario conoscere un po’ di storia …

Molto ma molto tempo fa, ai primordi di Internet, esisteva solo l’HTML. L’HTML è quello che oggi chiamiamo “markup language” ovvero, del testo (TAG) utilizzati per contrassegnare gli oggetti all’interno della pagina come le tabelle, le immagini, dei paragrafi e così via.

Questi sono le caselle o contenitori di cui abbiamo parlato precedentemente.

In origine per qualsiasi tipo di formattazione della pagina o design alternativo si procedeva a riscrivere tutto. In realtà, più precisamente, il design e lo styling non esistevano nemmeno. I primi siti web sono nati ed utilizzati per condividere solo informazioni di ricerca scientifica e non certamente per essere belli o attraenti. Quindi non solo la formattazione della pagina era limitata e in gran parte inutile, ma con le larghezze di banda dell’epoca non si poteva gestire altro che uno stile di base e rudimentale.

Ma poi con il tempo Internet ha iniziato a prendere piede non solo tra professori sepolti in biblioteche oscure e polverose, ma tra aziende, enti e persone private che la utilizzavano solo per leisure. Ovviamente questo ha cambiato tutto, soprattutto chiedendo all’HTML layout cose per il quale non era stato sviluppato.

Attività come la formattazione del testo, l’applicazione di colori e la gestione dei layout di pagina mettono a dura prova l’HTML. Come soluzione rapida sono state aggiunte opzioni di formattazione all’HTML ma comunque queste non hanno mai colmato la lacuna di un formato nato per altri scopi.

E, infatti, molto presto l’HTML (e il web design nel complesso) è diventato molto complesso, to big e difficile da gestire.

Ma per fortuna, è stata sviluppata una soluzione. Questa soluzione eliminerebbe i problemi che sono stati creati forzando l’uso improprio dell’HTML, si quella soluzione era CSS!

CSS è stato sviluppato specificamente per racchiudere tutti i compiti di progettazione e formattazione. Questo riporta l’HTML al suo scopo originale previsto dal markup, cioè essere solo strutturale. CSS ha dato a progettisti e proprietari di siti web molto più controllo sull’aspetto e la presentazione delle loro pagine web.

Ma cos’è esattamente il CSS?

CSS è ciò che viene chiamato style sheet language. In particolare, viene utilizzato per formattare i documenti che sono stati scritti utilizzando un linguaggio di markup… il più delle volte HTML.

Quindi questo è il modo in cui l’HTML e il CSS lavorano insieme per costruire pagine web e siti: pensate a CSS come il capo, dicendo agli elementi HTML (le caselle di cui abbiamo discusso) quando, come e dove dovrebbero apparire nel layout della pagina web.

Così, CSS potrebbe dire una particolare casella HTML di apparire sul lato sinistro del layout, con un certo colore di sfondo e spaziatura, forse con un bordo… e qualsiasi altra istruzione che si desideri.

Questo è davvero tutto quello che c’è da dire!

Quindi, ora che hai una comprensione dell’importanza dei CSS e di come funziona, passiamo a capire i vantaggi di CSS!

Vantaggi dei CSS: cosa può fare CSS?

Ora che hai un’idea dell’importanza dei CSS, parliamo ora di alcuni dei grandi vantaggi nell’usarli.

Finora, sappiamo che il CSS controlla tutta la progettazione e la formattazione delle pagine web, ma oltre ad assumere questi compiti il CSS fa molto di più. Di seguito i grandi vantaggi che CSS offre…

Opzioni di formattazione estese

Prima dello sviluppo e del supporto diffuso dei CSS, l’HTML layout offriva opzioni molto limitate. Qualsiasi cosa al di là di impostare font, dimensioni, colori era un allungamento dei tempi di sviluppo.

E per quanto riguarda la gestione del layout di pagina, l’HTML era estremamente limitato.

Infatti, la creazione di layout di pagina a più colonne con l’HTML comportava l’utilizzo di un vero e proprio hack: utilizzare tabelle con i bordi disattivati. Difficile da immaginare ora… ma allora, questo era l’unico modo per creare layout a più colonne.

(Se sei troppo giovane per ricordare quei tempi gloriosi… sei fortunato!)

Ma ora con gli standard CSS moderni, abbiamo un enorme (quasi infinito) numero di opzioni tipografiche, styling e layout di pagina. Ci sono tonnellate e tonnellate di proprietà CSS che possiamo utilizzare in tutte le nostre pagine web. Questo significa che abbiamo funzionalità di formattazione molto estese, quasi infinite con un web design CSS fatto bene.

Lato formattazione testo è il sogno di un tipografo: dimensioni dei caratteri scalabili, spessori, altezze di riga, spaziatura delle lettere… e questa è la punta dell’iceberg!

E per quanto riguarda il layout di pagina, CSS ha fatto enormi passi avanti negli ultimi anni. All’inizio dello sviluppo di CSS, abbiamo avuto un paio di false partenze. CSS positioning e floats lasciavano molto a desiderare ma con lo sviluppo di CSS Flexbox e CSS Grids, i layout di pagina difficili sono un ricordo del passato. Ora, siamo in grado di costruire CSS layout precisi e reattivi che si adattano automaticamente alla sempre più vasta varietà di schermi presenti sul mercato, pensate solo alla differenza di uso tra desktop e mobile.

Design e una formattazione coerenti in tutto il sito web

Ai tempi pre-CSS, mantenere una formattazione coerente in tutte le pagine e in tutto il sito web era un vero trauma per la psiche del programmatore. Tutta la formattazione e gli stili dovevano essere applicati elemento per elemento, pagina per pagina. Questo significava che chi doveva mettere mano a siti web molto grandi aveva anche una mole di lavoro pazzesca e anche piena di insidie, come la coerenza grafica.

Cambiare un carattere o un colore su un’intestazione significava ore di lavoro per un sito web di grandi dimensioni e vi assicuro per nulla divertenti.

Ricordate che i CSS separano il design dalla struttura, giusto?

Ovviamente i CSS si basano su regole e se avete mai usato stili paragrafo o carattere in un elaboratore di testi qualsiasi ritrovate lo stesso concetto e regole nei fogli di stile. Quindi, invece di applicare la formattazione elemento per elemento, viene creata una regola nei CSS. E la regola può contenere qualsiasi numero di istruzioni di formattazione come: quale tipo di carattere da utilizzare, spaziatura, allineamenti, e molto altro ancora. Queste regole vengono quindi memorizzate in un file .css (il foglio di stile appunto) che viene quindi applicato alle pagine in tutto il sito.

Ed è qui che le cose si fanno davvero interessanti…

Se hai bisogno di apportare una modifica alla struttura o alla formattazione delle tue pagine web, non vai alle pagine stesse. Al contrario, si passa alle regole che controllano gli elementi della pagina che si desidera modificare. Una singola modifica alla regola CSS e si aggiorna automaticamente tutto il tuo sito web immediatamente!

Che ne dici di produttività?

Così i CSS hanno completamente cambiato il modo in cui gli stili web vengono gestiti, contribuendo a mantenere una formattazione coerente in tutto il sito web. Inoltre, rende la manutenzione e l’aggiornamento del sito più veloce, più facile e meno soggetto a errori. Elimina le lunghe e monotone ore trascorse ad aggiornare manualmente la formattazione basata su HTML.

Regolare i layout di pagina a seconda di dove viene visualizzato

Ecco un altro grande vantaggio dei CSS, oltre a utilizzarli per controllare la tipografia e il layout di pagina, possono anche essere utilizzati per controllare la formattazione del tuo sito web a seconda del dispositivo o dei media su cui viene visualizzato. In altre parole, puoi cambiare l’aspetto e il funzionamento del tuo sito web quando viene visualizzato su un iPhone rispetto a un televisore… o anche tra uno schermo del computer e una versione stampabile delle pagine.

Tutto questo è reso possibile da quella cosa chiamata CSS Media Query

Pensate alle Media Query come a istruzioni if/then, quindi se (if) il mio sito web viene visualizzato sul display di uno smartphone fallo apparire così. Oppure, se (then) il mio sito web viene visualizzato su un computer desktop fallo sembrare così.

Le Media Query nel layout con CSS sono incredibilmente flessibili e potenti. Sono una parte molto importante dei CSS e quando sono combinati con Flexbox e Grid le opzioni disponibili sono incredibili e senza limiti.

Prova a farlo con le tabelle HTML!

Aumentare le prestazioni del sito web

Un altro grande vantaggio dei CSS è l’aumento delle prestazioni del sito web. Ai vecchi tempi, con la formattazione incorporata direttamente in HTML, ogni pagina si doveva caricare interamente per visualizzare il corretto stile. Pertanto, anche ogni click a link dello stesso sito, banalmente un’altra pagina comportava il caricamento completo di tutti gli elementi. Questo, come si può immaginare, rallenta la velocità ma con le regole dei fogli di stile, la formattazione viene caricate una sola volta per l’intero sito web.

Quindi, la prima volta che un visitatore arriva sul tuo sito, tutte le istruzioni di formattazione vengono caricate una sola volta. Quando il visitatore accede ad altre pagine del tuo sito, solo le pagine HTML si devono caricare e non la formattazione o lo stile. Insomma sarà tutto più veloce. Ciò significa che con CSS, il tuo sito verrà caricato e verrà eseguito molto più velocemente per i tuoi visitatori.

Consente una rapida personalizzazione

Un altro grande vantaggio dei CSS è la possibilità di personalizzare i modelli preesistenti. Diciamo che sei esperto di CSS (e fidati non è difficile da imparare!), immaginiamo che stai utilizzando WordPress come CMS per il tuo sito web (un’ottima scelta tra l’altro), in questo scenario, si potrebbe cercare nel modello del tuo sito (chiamato “tema” in WordPress) e personalizzarlo a tuo piacimento. Oppure potresti trovare un layout di template esistente, relativamente vicino al design desiderato, per poi modificarlo semplicemente e velocemente per ottenere il design esatto che desideri.

Creare animazioni ed effetti

Ecco un altro vantaggio di CSS che vale la pena menzionare la possibilità di animare contenuti. Senza CSS, se volevi un qualche tipo di animazione o elemento interattivo sulla tua pagina, l’unica opzione era quella di utilizzare JavaScript. Ora è possibile creare animazioni semplici e piccoli feedback interattivi con poche righe di codice.

Lavora più velocemente con i Framework

Un altro vantaggio nell’utilizzo dei fogli di stile è ciò che viene chiamato CSS Frameworks. I framework CSS sono librerie di “regole” che consentono la creazione rapida di prototipi e layout complessi in poco tempo. I due framework più popolari sono attualmente Bootstrap e Foundation.

Personalmente utilizzo Bootstrap 4 da quando è uscito, da purista del CSS, e delle proprie “regole”, avevo snobbato le precedenti versioni, oggi ovviamente mi trovo ad usarlo molto spesso. Avere già a disposizione una serie di “blocchi” predefiniti rende il mio lavoro molto più veloce da presentare al cliente. Foundation è altrettanto potente come libreria di “regole” ma ammetto di averlo usato meno e non mi sento di esprimere giudizi in merito. Sicuramente vi parlerò in maniera più estensiva dei framework in un pezzo di approfondimento.

E ora che avete un’idea meno vaga dei vantaggi che l’utilizzo dei CSS comporta andiamo a conoscere quali tipi usare…

Tipi di CSS che è possibile utilizzare

Ora vorrei affrontare i diversi tipi di CSS e come è possibile applicare tutto questo ai vostri progetti di web design.

In precedenza, abbiamo detto che CSS è basato su rule (regole), ora, a volte, le regole prendono il nome di selectors o selettori in italiano. I termini rule e selector sono usati in modo intercambiabile non abbiate paura sono la stessa cosa.

Possiamo utilizzare class selectors , element selectors, ID selectors, descendant selectors, pseudo class selectors… e altri per cose un po’ più pro.

Una delle cose più importanti e spesso trascurata è quella di utilizzare il giusto tipo di selector per le diverse attività da svolgere. Se state già pensando che “oddio un sacco di regole da imparare”, ecco la buona notizia è che più userai CSS più l’utilizzo dei selettori diventerà “normale”.

Ricorda anche che la best practice vuole l’utilizzo di un file esterno, normalmente chiamato style.css (troverai sicuramente file con estensione .css nelle directory del tuo sito web), dove inserire tutti i parametri dei selettori. Il file è il foglio di stile vero e proprio che conterrà l’elenco di tutte regole da applicare al sito web, quindi tutte le pagine HTML avranno un collegamento al foglio di stile esterno (controlla l’URL nell’HEAD e troverai tutto).

Però anche se l’utilizzo di un foglio di stile esterno è il modo più efficiente per lavorare con CSS, ci sono altri approcci.

Ad esempio, è possibile creare il cosiddetto internal style sheet. Si tratta del medesimo elenco di regole ma solo per una pagina specifica, in altre parole, un foglio di stile interno controllerà solo la pagina di cui fa parte.

Un terzo modo per applicare CSS all’HTML consiste nell’utilizzare inline CSS. In questo caso, le proprietà di formattazione vengono applicate direttamente a specifici elementi HTML. Quindi, in altre parole, inline CSS è incorporato direttamente nel codice HTML. Anche se questo potrebbe essere utile per esigenze di formattazione veloci e una tantum, questo metodo è da evitare proprio perché va contro l’idea stessa dei CSS.

L’importanza dei CSS

Mi sono dilungato troppo, lo so, ma i fogli di stile sono l’asse portante di tutto l’impianto visivo di un sito web. Per il sottoscritto, che per lavoro fa questo, rimane uno dei pilastri su cui inserire tutto il codice che volete, soprattutto oggi che con Node.js si è portata l’interazione a livelli altissimi anche lato client.

Se avete compreso quanto sia importante avere un buon CSS, scritto bene e, ricordate che a volte la forma è tutto, commentato altrettanto bene, allora lascerete un sorriso a chi dovrà inserire le funzioni lato client e server.

Non sottovalutate mai gli aspetti grafici, ne parlo in maniera estensiva qui con un riferimento specifico al design delle interfacce grafiche.