CSS, maiuscole e minuscole con text-transform

di Michele Costanzo Commenta

CSS text-transform
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.