Proseguiamo la serie di guide dedicate al trattamento del testo tramite i fogli di stile CSS. Nella precedente occasione abbiamo visto come utilizzare la proprietà font-variant per creare l’effetto ‘maiuscoletto’. Sempre in tema di maiuscole e minuscole analizzeremo ora la proprietà text-transform.
Testo maiuscolo o minuscolo con text-transform
La proprietà text-transform applicata ad un selettore di HTML indica al browser come rappresentare il testo in termini di lettere maiuscole o minuscole. Prendiamo come esempio una breve porzione di codice:
p {
text-transform: uppercase;
/* rappresenta il testo tutto in maiuscolo */
}
Nel nostro esempio abbiamo utilizzato la proprietà text-transform in abbinamento con l’elemento P di HTML ma ovviamente il discorso resta analogo per qualsiasi altro tag. text-transform può assumere quattro diversi valori:
- none: è il valore di default ed indica al browser che il testo andrà rappresentato con maiuscole e minuscole riprese dal codice HTML. Si può omettere a meno che non occorra sovrascrivere localmente una disposizione di livello superiore.
- uppercase: indica al browser che il testo andrà rappresentato con tutti i caratteri maiuscoli.
- lowercase: indica al browser che il testo andrà rappresentato con tutti i caratteri minuscoli.
- capitalize: indica al browser che il testo andrà rappresentato con il primo carattere di ogni parola in maiuscolo.
Perché usare text-transform nei CSS
L’uso della proprietà text-transform risponde pienamente alla logica dei fogli di stile CSS. Grazie a questo elemento infatti il testo HTML potrà essere rappresentato con la corretta distribuzione di maiuscole e minuscole affidando al foglio di stile la sua resa a video.
Modificando il valore della proprietà text-transform si potrà in qualsiasi momento modificare l’aspetto finale del testo senza dover modificare il codice HTML delle pagine.