I siti web sono composti da una serie di singoli pezzi, tra cui immagini, testo e vari documenti. Questi documenti non includono solo quelli che possono essere collegati da varie pagine, come i file PDF, ma anche i documenti che vengono utilizzati per costruire le pagine stesse, come Documenti HTML per determinare la struttura di una pagina e documenti CSS (Cascading Style Sheet) per dettare l'aspetto di una pagina. Questo articolo approfondirà i CSS, spiegando cos'è e dove viene utilizzato oggi sui siti web.
Una lezione di storia CSS
I CSS sono stati sviluppati per la prima volta nel 1997 come un modo per gli sviluppatori web di definire l'aspetto visivo delle pagine web che stavano creando. Aveva lo scopo di consentire ai professionisti del web di separare il contenuto e la struttura del codice di un sito Web dal design visivo, cosa che non era stata possibile prima di questo momento.
La separazione tra struttura e stile consente all'HTML di svolgere più funzioni su cui era originariamente basato: il markup di contenuto, senza doversi preoccupare del design e del layout della pagina stessa, qualcosa comunemente noto come "look and feel" del pagina.
L'evoluzione dei CSS
I CSS non hanno guadagnato popolarità fino al 2000 circa, quando i browser Web hanno iniziato a utilizzare più dei caratteri di base e degli aspetti cromatici di questo linguaggio di markup. Oggi, tutti i browser moderni supportano tutto il livello CSS 1, la maggior parte del livello CSS 2 e persino la maggior parte degli aspetti del livello CSS 3. Man mano che i CSS continuano ad evolversi e vengono introdotti nuovi stili, i browser Web hanno iniziato a implementare i moduli che portano un nuovo supporto CSS in quei browser e offrono ai web designer nuovi potenti strumenti di stile per funzionare con.
In (molti) anni passati, c'erano web designer selezionati che si rifiutavano di usare i CSS per il progettazione e sviluppo di siti web, ma quella pratica è quasi scomparsa dall'industria oggi. I CSS sono ora uno standard ampiamente utilizzato nel web design e sarebbe difficile trovare qualcuno che lavora nel settore oggi che non abbia almeno una conoscenza di base di questo linguaggio.
CSS è un'abbreviazione
Come già accennato, il termine CSS sta per "Cascading Style Sheet". Analizziamo un po' questa frase per spiegare in modo più completo cosa fanno questi documenti.
La parola "foglio di stile" si riferisce al documento stesso (come HTML, i file CSS sono in realtà solo documenti di testo che possono essere modificati con una varietà di programmi). I fogli di stile sono stati usati per molti anni per la progettazione dei documenti. Sono le specifiche tecniche di un layout, sia cartaceo che online. I designer di stampa hanno utilizzato a lungo i fogli di stile per garantire che i loro progetti vengano stampati esattamente secondo le loro specifiche. Un foglio di stile per una pagina Web ha lo stesso scopo, ma con la funzionalità aggiuntiva di dire anche al browser Web come eseguire il rendering del documento visualizzato. Oggi si possono usare anche i fogli di stile CSS query multimediali media per cambiare il modo in cui una pagina cerca diversi dispositivi e dimensioni dello schermo. Questo è incredibilmente importante poiché consente di visualizzare un singolo documento HTML in modo diverso a seconda dello schermo utilizzato per accedervi.
Cascata è la parte davvero speciale del termine "foglio di stile a cascata". Un foglio di stile web è destinato a scorrere attraverso una serie di stili in quel foglio, come un fiume su una cascata. L'acqua nel fiume colpisce tutte le rocce della cascata, ma solo quelle in fondo influiscono esattamente dove scorrerà l'acqua. Lo stesso vale per la cascata nei fogli di stile dei siti web.
I fogli di stile del designer sostituiscono i fogli di stile predefiniti del browser
Ogni pagina web è interessata da almeno un foglio di stile, anche se il web designer non applica alcuno stile. Questo foglio di stile è il foglio di stile dell'agente utente — noti anche come stili predefiniti che il browser Web utilizzerà per visualizzare una pagina se non vengono fornite altre istruzioni. Ad esempio, per impostazione predefinita i collegamenti ipertestuali hanno uno stile blu e sono sottolineati. Questi stili provengono dal foglio di stile predefinito di un browser web. Se il web designer fornisce altre istruzioni, tuttavia, il browser dovrà sapere quali istruzioni hanno la precedenza. Tutti i browser hanno i propri stili predefiniti, ma molti di questi valori predefiniti (come i collegamenti di testo sottolineati in blu) sono condivisi tra tutti o la maggior parte dei browser e delle versioni principali.
Per un altro esempio di impostazione predefinita del browser, nel nostro browser Web, il carattere predefinito è "Times New Roman" visualizzato alla taglia 16. Tuttavia, quasi nessuna delle pagine che visitiamo mostra quella famiglia di caratteri e quella dimensione. Questo perché la cascata definisce che i secondi fogli di stile, che sono impostati dagli stessi designer, per ridefinire la dimensione del carattere e famiglia, sovrascrivendo le impostazioni predefinite del nostro browser web. Tutti i fogli di stile che crei per una pagina web avranno più specificità rispetto agli stili predefiniti di un browser, quindi tali valori predefiniti verranno applicati solo se il tuo foglio di stile non li sovrascrive. Se vuoi che i collegamenti siano blu e sottolineati, non devi fare nulla poiché questa è l'impostazione predefinita, ma se il file CSS del tuo sito dice che i collegamenti dovrebbero essere verdi, quel colore sovrascriverà il blu predefinito. La sottolineatura rimarrà in questo esempio poiché non hai specificato diversamente.
Dove viene utilizzato il CSS?
I CSS possono anche essere usati per definire come dovrebbero apparire le pagine web quando vengono visualizzate in altri media diversi da a programma di navigazione in rete. Ad esempio, puoi creare un foglio di stile di stampa che definirà come deve essere stampata la pagina web. Poiché gli elementi della pagina Web come i pulsanti di navigazione oi moduli Web non avranno alcuno scopo sulla pagina stampata, è possibile utilizzare un foglio di stile di stampa per "disattivare" quelle aree quando viene stampata una pagina. Sebbene non sia una pratica comune su molti siti, l'opzione per creare fogli di stile di stampa è potente e attraente (nel nostro esperienza — la maggior parte dei professionisti del web non lo fa semplicemente perché l'ambito del budget di un sito non richiede questo lavoro aggiuntivo per essere fatto).
Perché i CSS sono importanti?
I CSS sono uno degli strumenti più potenti che un web designer può imparare perché con esso puoi influenzare l'intero aspetto visivo di un sito web. I fogli di stile ben scritti possono essere aggiornati rapidamente e consentono ai siti di modificare ciò che è visivamente prioritario sul schermo, che a sua volta mostra valore e attenzione ai visitatori, senza che sia necessario apportare modifiche al sottostante Markup HTML.
La sfida principale dei CSS è che c'è molto da imparare — e con i browser che cambiano ogni giorno, cosa funziona bene oggi? potrebbe non avere senso domani quando nuovi stili vengono supportati e altri vengono abbandonati o perdono il favore per una ragione o un altro.
La curva di apprendimento CSS ne vale la pena
Poiché i CSS possono sovrapporsi e combinarsi, e considerando come i diversi browser possono interpretare e implementare le direttive in modo diverso, i CSS possono essere più difficili da imparare rispetto al semplice HTML. I CSS cambiano anche nei browser in un modo che l'HTML in realtà non fa. Tuttavia, una volta che inizi a utilizzare i CSS, vedrai che sfruttare la potenza dei fogli di stile ti darà un'incredibile flessibilità nel layout delle pagine web e nella definizione del loro aspetto e aspetto. Lungo la strada, accumulerai una "sacca di trucchi" di stili e approcci che hanno funzionato per te in passato e a cui puoi rivolgerti di nuovo mentre costruire nuove pagine web nel futuro.