Original article: All Caps in CSS - How to Uppercase Text with Style

Cuando se diseña un sitio web o se trabaja en un proyecto, es posible que desees utilizar texto en mayúsculas por varias razones. Tal vez quieras usar una abreviatura o un acrónimo, enfatizar cierto texto o usarlo como encabezado.

Hay varias maneras de poner texto en mayúsculas con HTML. La primera es escribir el texto en mayúsculas directo en el HTML:

<p>TEXTO EN MAYUSCULAS</p>

La segunda forma es utilizar el método de cadenas de JavaScript toUpperCase() y representarlo en el DOM:

const mayusculas = cedena.toUpperCase()

// aqui se muestra en pantalla

La tercera forma, que veremos en este artículo, es usar la propiedad de transformación de texto de CSS:

selector {
  text-transform: uppercase;
}

Esto aplica el estilo de mayúsculas en el elemento seleccionado.

Esta declaración no cambia el contenido del DOM. Por ejemplo, echa un vistazo a este código HTML:

<p class='parrafo'>
  Some text
</p>

Y a este estilo:

.parrafo {
  text-transform: uppercase;
}

En la UI, el texto tendrá un estilo como el siguiente:

image-137
Texto en mayúsculas con CSS 

Pero en el DOM, el texto sigue siendo el mismo:

image-139-1
El DOM no se altera, solo la vista en la UI

Cuando copias el texto en el navegador, el texto original "Some text" se copia en algunos navegadores, pero en otros se copia la versión con estilo.

¿Deberías usar text-transform en CSS u otros métodos?

Si usas mayúsculas por razones de estilo te recomiendo que uses CSS. La razón es que puede haber inconsistencias en la forma en la que los diferentes navegadores y las herramientas del navegador manejan el texto en mayúsculas.

Una de las diferencias es la inconsistencia entre copiar y pegar el texto en diferentes navegadores.

Otra inconsistencia es que algunos lectores de pantalla interpretan el texto en mayúsculas como abreviaturas. Por lo tanto, un texto como "SOME TEXT" se leerá como "S.O.M.E. T.E.X.T.", lo que puede afectar la manera en la que el lector comprende el mensaje.

Sin embargo, vale la pena señalar que algunos lectores de pantalla también interpretan el texto en mayúsculas con CSS como abreviaturas.

Se recomienda mantener los estilos como estilos. Si deseas tener texto en mayúsculas solo por motivos de estilo, usa CSS y deja el texto original en HTML. Pero si usas mayúsculas para abreviaturas o tienes un motivo específico para tener texto en mayúsculas, puedes escribirlo en HTML.

Puedes consultar este tweet sobre mayúsculas sin CSS para ver las discusiones al respecto.