I CSS sono l’essenza stessa del Web Design di nuova generazione. Al giorno d’oggi è impossibile immaginare un sito Web che non ne faccia uso.
Soprattutto con l’avvento dei layout responsive, questi strumenti sono diventati indispensabili. Solo attraverso un uso sapiente dei CSS è infatti possibile gestire l’aspetto, il look & feel che avrà il sito a qualsiasi risoluzione.
Ma perché i CSS hanno riscosso questo successo strepitoso fra i designer? Sagrafica vi porta alla scoperta di uno degli strumenti più potenti per gli appassionati di web graphic.
Dall’esordio dei CSS fino al loro attuale trionfo, è interessante capire come questo linguaggio di programmazione sia arrivato a imporsi sul Web.
La grafica, croce e delizia del Web Design
Quello della grafica è sempre stato un problema particolarmente sentito dai Webmaster e Web Designers.
Per capire le circostanze che hanno portato all’avvento dei CSS occorre partire dalle lontane origini di Internet. Quando il Web è arrivato davvero alla portata di tutti, gli utenti hanno voluto lasciare il segno della propria creatività e fantasia.
Per fortuna, Internet consentiva (e ancora consente, anche se in modo diverso) di creare pagine Web con una certa facilità. Ed era alla portata sia degli esperti di comunicazione che dei neofiti più assoluti.
Ma il Web dei primordi presentava ancora delle limitazioni… soprattutto per quanto riguardava la grafica e il design.
Prima dell’era dei CSS, i creativi erano limitati da un “telaio” decisamente troppo povero. Le pagine Web, nella loro forma più “nuda e cruda”, comprendono infatti solo testo, una palette di colori limitata, alcune soluzioni di impaginazione ed eventualmente qualche immagine.
Uno scenario del genere non era sufficiente per permettere agli appassionati di design di esprimere al pieno tutto il loro talento e la loro creatività.
Come nascono i CSS
Nelle pagine Web di qualche decennio fa, la soluzione preferita per chi voleva dedicarsi al design era una combinazione accorta di tabelle e immagini grafiche. Nascondendo i bordi delle tabelle, era possibile utilizzarle per posizionare gli elementi grafici nella pagina, realizzando anche layout particolarmente complessi.
È stato il caso, per esempio, delle interfacce “artistiche” (ricordiamo i Moyra’s Web Jewels, dei template particolarmente sfarzosi che hanno segnato il Web per un paio d’anni) o delle cornici cromate.
Purtroppo, per quanto esteticamente più piacevoli delle pagine statiche, questi layout erano difficili da gestire a risoluzioni diverse. Il che comportava degli autentici “salti mortali” per gli sviluppatori, costretti a ricorrere a ogni sorta di stratagemma affinché i loro siti si presentassero in maniera uniforme su qualsiasi dispositivo.
Anche la resa sui diversi browser non era sempre assicurata, e le sessioni di debugging potevano essere davvero frustranti.
Inoltre, le tecnologie (e quindi le necessità estetiche) erano e sono ancora oggi in costante mutamento. Occorreva quindi che i creativi e i designers stessero al passo con le innovazioni di Internet.
Per risolvere questi problemi, nel 1996 il W3C introduce i Cascading Style Sheets o CSS; dei fogli di stile attraverso cui è possibile gestire in piena autonomia qualsiasi elemento di una pagina Web.
Ovviamente i CSS 1.0 erano molto più “basic” di quelli che conosciamo oggi. Il linguaggio infatti si è evoluto, raggiungendo la versione 3.0. I CSS erano strepitosi già in potenza, e negli anni sono diventati sempre più sofisticati. Mantenendo però inalterate sintassi e funzioni.
Cascading Style Sheets, cosa sono e come funzionano
Cosa sono i CSS e perché il loro avvento è stato così rivoluzionario?
Come abbiamo visto un CSS altro non è che un foglio di stile, ovvero un insieme di indicazioni sull’aspetto finale che avranno i vari elementi di una pagina.
Dagli header alla spaziatura dei paragrafi, passando per l’allineamento, i CSS consentono al Web Designer di modificare praticamente ogni aspetto di un sito.
I vantaggi di questo linguaggio sono innumerevoli. In primis, la sintassi che è davvero molto semplice, specie per chi viene dal mondo dell’HTML testuale (ne parleremo in un prossimo articolo).
Gli elementi sono definiti da classi o id, che possono essere ulteriormente personalizzati; una volta definiti questi ultimi, basta indicare su quale parte della pagina o dell’intero sito si vuole andare a interagire.
Inoltre i CSS consentono di gestire le media queries, fondamentali per il design responsive.
Le media queries rappresentano dei paletti divisori elettronici fra le varie risoluzioni video. Grazie a questi strumenti, è possibile decidere come si “comporterà” il sito a seconda che l’utente usi un monitor widescreen, un tablet molto più modesto o addirittura uno smartphone.
C’è infine una terza caratteristica che ha permesso ai CSS di imporsi sulla scena del Web.
Infatti è possibile servirsi di questi strumenti direttamente in linea, inserendoli nel codice HTML delle singole pagine. Possono trovarsi nella sezione head, ma anche essere richiamati all’interno del corpo della pagina.
La soluzione di gran lunga più pratica, però, è quella di organizzare un unico foglio di stile esterno, che gestisca l’aspetto di ogni singola pagina del sito.
In questo modo, quando si effettueranno modifiche grafiche, basterà mettere mano solo una volta al CSS per aggiornare tutte le pagine che linkano ad esso.
