Che valori puoi usare con i CSS

Nella scorsa lezione ti ho presentato il linguaggio CSS e ti ho parlato di come sia semplice da utilizzare. Se non ricordi bene, in fin dei conti hai bisogno di un selettore e di due parentesi graffe.

All’interno di queste potrai inserire tutte le proprietà CSS che desideri modificare per l’elemento selezionato. Ma come avrai scoperto anche da solo, per ogni proprietà esistono dei valori differenti che puoi specificare alcuni ricordano dei semplici numeri, altri delle stringe ed altri ancora delle unità di misura che molto probabilmente non hai mai incontrato!

Dato che la conoscenza di questi valori è una cosa fondamentale per qualsiasi sviluppatore web, anche per quello che svilupperà con linguaggi come JavaScript o PHP, ho pensato bene di fare una piccola pausa ed introdurti al meglio questi concetti.

Nonostante trovi un grande piacere nell’organizzare informazioni e spiegarti, con i miei personali punti di vista, i concetti necessari allo sviluppo web, sono anche una persona alla quale non piace reinventare la ruota ed è per questo motivo che per presentarti i valori e le unità di misura che puoi usare nei CSS andrò a seguire la stessa struttura che potrai trovare nelle specifiche del w3C.

Prima di andare a scoprirle una per una nel dettaglio, andiamo a conoscere le famiglie alle quali appartengono:

• dati di tipo testuale – con questa prima famiglia si identificano tutti i diversi valori che hanno una radice testuale. Cose come i percorsi alle immagini, le parole chiave e molto altro verranno spiegati proprio qua;
• dati di tipo numerico – anche se meno utilizzati, il valore numerico è di fondamentale importanza per alcune regole CSS e anche se sembra semplice da identificare ti assicuro che c’è qualche perla da conoscere;
• unità per le distanze – nella scorsa lezione ti ho presentato, senza neanche dirtelo, l’unità di distanza in pixel ma questa non è l’unica che potrai utilizzare, infatti ne esistono molte altre che ci aiutano anche a creare dei siti web che si adattano alle dimensioni della finestra del browser;
• altri valori di unità – in quest’ultima famiglia andremo a radunare tutte le unità di misura che non hanno trovato posto da nessun altra parte.

Più che una vera e propria lezione, questa rappresenterà piuttosto un punto di riferimento che tornerai a consultare di tanto in tanto. Quindi, se ti senti coraggioso, passa immediatamente alle domande che ti permetteranno di accedere alla prossima lezione, altrimenti leggi con attenzione i seguenti paragrafi.

Dati di Tipo Testuale

Può sembrare forse stupido dover dedicare una sezione ai valori di tipo testuale perché, in fin dei conti, sappiamo tutti da che cosa è composto un testo, giusto?

Un testo non è altro che un insieme di lettere.

A seconda della posizione occupata da queste lettere il testo stesso può assumere dei significati diversi ma questa è una definizione che può andar bene per noi esseri umani perché il computer, il più delle volte, non riesce a capire la differenza tra una serie di caratteri ed il valore semantico che noi stessi gli assegnamo.

Proprio per questa sua ignoranza quando ci troviamo a dare dei comandi o a passare dei valori ad un computer è richiesta da parte nostra una particolare attenzione.

Stiamo parlando quindi di due tipi di valori testuali che hanno dei significati incredibilmente diversi per i nostri browser:

• parole chiave – utilizzando le parole chiave puoi richiamare dei valori standard che i nostri CSS sono in grado di utilizzare;
• stringhe – le stringhe sono molto simili alle nostre frasi. È possibile delimitarle utilizzando i singoli o i doppi apici e possono contenere diverse informazioni come ad esempio il percorso alle nostre immagini, il nome di un font o un testo che vogliamo inserire attraverso i CSS.

Le parole chiave sono le più semplici da capire perché tutto quello che fanno è specificare un unico valore, non vengono delimitate da nessun tipo di apici e se contengono più parole vengono separate dal trattino (-). Giusto per essere il più chiaro possibile lascia che ti faccia qualche esempio:

border-style: dotted;
color: red;
font-family: sans-serif;
width: inherit;

Come puoi vedere tu stesso, i valori che vengono passati alle singole proprietà non sono altro che le parole chiave che il browser è in grado di comprendere e di applicare alla pagina.

Alcuni di questi definiscono lo stile del bordo, altri il tipo di carattere da utilizzare ma in fin dei conti non sono altro che valori testuali non racchiusi tra apici.

Tra questi è presente una parola molto importante che devi imparare a conoscere, ovvero inherit.

Questa parola permette di far ereditare all’elemento figlio i valori impostati per l’elemento parente, facciamo subito un piccolo esempio:

p {
  color: #000;
}
strong{
    color: red;
}
p strong {
  color: inherit;
}

Per quanto semplice, e forse inutile, può sembrare il codice precedente, mi è stato utile per presentarti il funzionamento di questo valore.

Quando il browser incontrerà un elemento strong colorerà questo di un colore rosso (definito grazie alla parola chiave red) ma se questo elemento si trova all’interno di un paragrafo erediterà il colore impostato per questo, che è un nero pieno.

inherit non viene usato spesso, anche perché rappresenta il valore di default per un gran numero di elementi HTML, ma è comunque utile conoscerlo perché più avanti vedremo alcuni casi in cui è utile conoscere la sua funzionalità.

Ma oltre ai valori testuali che identificano le parole chiave abbiamo anche parlato di valori stringa, ovvero una serie di parole delineate da degli apici che ci permettono di specificare dei valori non standard e che il browser deve essere in grado di riconoscere per il corretto funzionamento delle nostre regole CSS.

Dato che stiamo parlando in maniera molto astratta, lascia che chiarisca subito questi concetti utilizzando qualche esempio:

background-image: url("../percorso/immagine.jpg");
font-family: "Times New Roman", Georgia, serif;
content: "io sono una 'stringa'.";
content: 'io sono una "stringa".';

Questo piccolo blocco di codice presenta molte informazioni interessanti, cerchiamo di capirle una per una.

Per prima cosa possiamo vedere che viene considerata una stringa anche la definizione del percorso che porta ad un’immagine, in poche parole, grazie alla proprietà background-image possiamo specificare il percorso di un’immagine di sfondo inserendo la stringa all’interno delle parentesi di url().

Nota Bene: il percorso che punta ad un’immagine viene definito utilizzando la stessa sintassi che si usa all’interno dei terminali. Una cartella viene definita aggiungendo uno slash al termine del suo nome (proprio come succede per percorso/) ed una immagine viene inserita specificando anche la sua estensione. Se hai bisogno di muoverti all’interno di una cartella che si trova in una posizione superiore rispetto a quella dove si trova il tuo file CSS, non devi far altro che aggiungere ../ per ogni cartella che vuoi risalire.

Successivamente, quando ho inserito le proprietà content, ho voluto farti notare che all’interno della stessa stringa puoi usare sia singoli che doppi apici, la cosa importante è non mescolarli tra loro.

Dati di tipo numerico

I valori numerici all’interno dei CSS sono forse le unità di misura più semplici da utilizzare, anche perché è dalle elementari che hai a che fare con questi!

I CSS sono in grado di utilizzare questi valori anche con moltissime unità di misura ma per gli scopi di questa sezione ti basterà sapere che i valori numerici vengono distinti in tre famiglie: interi, valori in virgola mobile (anche se usiamo un punto) e valori in percentuale.

Ecco un semplicissimo blocco di codice che ti presenta le diverse sintassi:

z-index: 99;
line-height: 2.5;
width: 90%;

Mi sembra tutto abbastanza semplice fin qua, non trovi? Se così non fosse ti invito ad usare il nostro forum per chiedere approfondimenti; perché adesso è giunto il momento di scoprire un nuovo tipo di dato.

Unità per le Distanze

Proprio nella scorsa lezione, quando abbiamo parlato di margini e padding, hai scoperto una delle unità di misura più comuni durante lo sviluppo di un sito web, i pixel.

Se non conosci il significato di questo termine, la spiegazione più semplice che ti posso fornire è quella di un singolo quadratino colorato presente sul tuo desktop.

Tutti gli schermi sui quali sarai in grado di posare il tuo sguardo sono composti da milioni di piccoli pixel che, uno accanto all’altro e colorati in modo differente, permettono di definire le immagini rappresentate.

Ma i pixel non sono l’unica unità di misura e in un mondo con un gran numero di dispositivi che presentano schermi di diverse dimensioni e risoluzioni, non sono sicuramente l’unità di misura che dovresti utilizzare più frequentemente.

Il mio obiettivo non è tanto quello di discutere i motivi per i quali dovresti scegliere un’unità di misura in particolare, quello lo scoprirai tu man mano che approfondirai le tue conoscenze; quello che voglio fare è semplicemente presentarteli.

/* Valori Assoluti */
font-size: 16px;
word-spacing: 3mm;
margin-top: 0.3cm;

/* Valori Relativi */
margin-top: 1.4em;
font-size: 1.4rem;

Prima ancora di andare a conoscere i singoli valori ed i loro significati, devo ammettere che questi non rappresentano neanche lontanamente tutti i valori che puoi utilizzare ma dato il loro alto numero ho dovuto fare una scelta, ed ho preferito presentarti i valori che si utilizzano maggiormente.

Se sei curioso e vuoi scoprire tutte le varie unità di misura, ti consiglio di andare a leggere la specifica CSS relativa a questo argomento, perché adesso passiamo a presentare singolarmente le unità che ti ho presentato nel blocco di codice precedente.

• px – ti ho già presentato questa unità di misura che rappresenta il pixel. Ovviamente la sua grandezza dipende anche dalla risoluzione dello schermo sul quale viene visualizzato perché maggiore sarà il numero di pixel che compone lo schermo e più piccolo sarà la sua misura;
• mm – passiamo ad un’unità di misura molto comoda sopratutto quando si sviluppano alcune interfacce per i dispositivi mobili, infatti è molto comune trovare bottoni o altri elementi cliccabili definiti grazie ai millimetri dato che permette di avere delle distanze standard sopratutto per margini e padding;
• cm – dal mondo reale non arrivano soltanto i millimetri ma anche i centimetri. Unità di misura leggermente meno usata rispetto alla precedente ma in alcuni casi può tornare utile;
• em – questa è una delle prime unità di misura relative. Si dice relativa perché la sua dimensione varierà a seconda della grandezza del carattere m definita nel suo elemento parente;
• rem – unità di misura abbastanza recente, si differenzia dalla precedente perché permette di dichiarare un’unica grandezza per l’elemento radice dalla quale prenderà spunto per prendere la dimensione del carattere m che utilizzerà per tutti gli altri elementi per i quali viene dichiarata.

Dal mio personale punto di vista e anche da quello che potrai trovare a giro per la rete sui diversi tutorial e guide, queste sono le unità di misura maggiormente usate. Non sarai obbligato ad usare nessuna di queste, la scelta è tua, ma sicuramente troverai molti spunti per apprendere meglio il loro utilizzo.

Altri tipi di unità

Eccoci giunti all’ultima famiglia di valori e unità che potrai utilizzare con i CSS. All’interno di questa troverai molti valori differenti tra i quali il primo e più interessante sarà quello che ci permette di definire i colori.

Hai già visto nella scorsa lezione l’esistenza di uno strano valore che inizia con il cancelletto.

Infatti, proprio quando siamo andati a parlare dei bordi abbiamo detto che il colore di default è un bel nero pieno, ma nella dichiarazione della regola al posto della parola chiave black è apparso un valore come questo: #000.

Il valore precedente prende il nome di esadecimale e grazie alla sua sintassi ci permette di definire qualsiasi colore riproducibile da un computer, ma come si utilizza?

Iniziamo subito con il dire che la sintassi che ti ho mostrato per creare il colore nero altro non è che una scorciatoia!

Ebbene si come hai scoperto, sempre nella scorsa lezione, sono molte le scorciatoie che puoi utilizzare con i CSS e le possiamo trovare anche quando andiamo a creare dei colori con il formato esadecimale.

Prima di poterti spiegare nel dettaglio come sia semplice creare una scorciatoia per la dichiarazione di colori in formato esadecimale è giusto capire come si compone un tale valore.

Quando lavoriamo con i colori in un ambiente digitale lavoriamo con i canali RGB (Red Green Blue), grazie a questi siamo in grado di replicare qualsiasi colore.

All’interno della sintassi esadecimale presente nei CSS è possibile identificare due valori per ciascun canale, di questi, esiste un valore che identifica la totale assenza del colore (ovvero lo 0) mentre un altro che ne identifica la sua totale presenza (ovvero la F).

Da questa definizione si capisce che una stringa del genere #FF0000 rappresenta il colore rosso pieno.

Questo perché per entrambi i canali rosso il valore è stato impostato al massimo, mentre per gli altri (ovvero Green e Blue) due risultano completamente assenti.

Se vuoi approfondire i concetti che sono presenti dietro alla definizione dei colori attraverso il codice esadecimale ti consiglio di consultare quest’ottimo articolo presente su Smashing Magazine che ti aprirà la mente ad un sacco di concetti, questo perché io preferisco spiegarti come potrai creare delle scorciatoie esadecimali.

Creare delle scorciatoie esadecimali, andando quindi ad utilizzare 3 valori al posto di 6, è una cosa veramente semplice e si può fare soltanto se il colore presenta dei valori a due a due identici.

Mi spiego meglio, prendiamo il colore rosso che ti ho presentato precedentemente: #FF0000.

Come puoi notare, per ogni colore i valori sono uguali due a due. Il canale rosso è impostato ad un colore pieno mentre sia il verde che il blu sono dichiarati come totale assenza; questo ci permette di mettere in pratica la scorciatoie andando a scrivere lo stesso colore come: #F00.

In poche parole al posto di due valori per canale, ne usiamo soltanto uno; perché tanto sarebbe soltanto una ripetizione!

Ovviamente questa non è una scorciatoia che puoi usare sempre, ma può far sempre comodo conoscerla 😀

Ci sarebbero altri metodi per dichiarare un colore, metodi che ci permettono anche di definire un livello di trasparenza andando ad agire sul canale alpha ma torneremo successivamente a presentare queste funzionalità perché prima di concludere voglio parlarti di altri due valori molto interessanti: gli angoli ed il tempo.

Ebbene sì perché nonostante ti abbia presentato il linguaggio CSS come soluzione per aggiungere stile alle tue pagine, nei recenti sviluppi è diventato una soluzione anche per aggiungere delle animazioni.

Ed ecco che valori come la possibilità di indicare un angolo di rotazione o la durata di un’animazione diventano veramente interessanti:

/* Valori Angolari */
transform: rotate( 30deg );
transform: rotate( 1.0708rad );
transform: rotate( .25turn );

/* Valori Temporali */
animation-delay: 3s /* secondi */
animation-delay: 350ms /* millisecondi */

Dal codice presentato sopra si nota che i valori che si possono usare per definire gli angoli sono:

• deg – questo è il grado che abbiamo utilizzato tutti in matematica e che definisce un cerchio completo composto da 360 gradi. Sicuramente sarà l’unità di misura più naturale da usare quando abbiamo a che fare con angoli e rotazioni, ma ce ne sono altre che potrebbero interessarti;
• rad – questo non rappresenta altro che il radiante ovvero l’unità di misura ottenuta calcolando la lunghezza dell’arco definito dall’angolo e la larghezza del raggio stesso;
• turn – forse l’unità di misura più semplice da utilizzare. Al posto di fare complessi calcoli per scoprire quanti gradi compongono un angolo retto, grazie a questa puoi semplicemente definire il numero di giri di cui hai bisogno.

Scoprirai nel corso Conosci SASS e migliora i tuoi CSS quanto questi valori potranno esserti utili nella creazione di elementi ruotati, ma ricordati della presenza dei secondi s e i millisecondi ms.

Non credo che abbia bisogno di spiegare nel dettaglio questi due valori, semplicemente ti saranno utili quando scoprirai come poter realizzare delle animazioni con i CSS dato che queste lavorano a stretto contatto con queste unità di misura 😉

Conclusioni

Siamo giunti al termine di un’altra, lunga, lezione. In questa ti ho presentato i differenti tipi di valori che un foglio di stile è in grado di accettare ed utilizzare e benché non sia stato in grado di presentarteli tutti, sono sicuro di averti elencato i più comuni e quelli con i qualli ti scontrerai più spesso 😉

Se desideri fare degli approfondimenti non esitare ad utilizzare il forum, siamo sempre felici di poterti dare una mano ed inditcarti nuove soluzioni. Ma prima di passare alla prossima lezione, quella nella quale ti presenterà il vero collante del web (il vero link 😉 ) è giunto il momento di fare qualche esercizio.