La evolución de CSS no se detiene. Este lenguaje de estilos se mantiene vivo y en constante actualización. Para el mundo del diseño Web, sus características son esenciales para dotar a los sitios de nuevas características y también para simplificar el código que escribimos.
Siempre señalo en mis clases que CSS nos ayuda a maquetar interfaces de usuario eficientes y visualmente atractivas. Pero también es una parte fundamental de nuestro proyecto, el cual debemos mantener optimizado para que sea fácil de mantener y escalar.
En este artículo explico las opciones que nos ofrece CSS Text Decoration y como podemos aplicarlas a nuestras hoja de estilos.
Las novedades de CSS Text Decoration
El W3C ha publicado el primer borrador de trabajo del nivel 4 de CSS Text Decoration. El documento en cuestión nos trae novedades respecto a la decoración del texto en CSS en lo que se refiere a subrayado, sobras y destacado con énfasis.
Una de las propiedades que encontramos en este documento es text-underline-offset. Su valor inicial es auto, pero también se podrá establecer un valor numérico , que podría estar expresado en em.
Por medio de text-underline-position se podrá establecer la posición de la línea del subrayado. Será posible establecer auto, under, left y right.
Otras propiedades que podremos comenzar a utilizar cuando los navegadores ofrezcan soporte son: text-decoration-skip, text-decoration-skip-ink y text-emphasis-skip.
También se planea dotar a text-shadow de nuevas opciones para potenciar su uso.
Código de ejemplo
A continuación veremos un ejemplo de código CSS que utiliza varias opciones de esta característica:
.ejemplo {
font-size: 2rem;
color: #333;
text-decoration: underline;
text-underline-position: under; /* Posiciona la línea de subrayado debajo del texto */
text-decoration-skip: spaces; /* Omite el subrayado en espacios */
}En el código anterior se aplican diferentes características de estilos a los elementos que tienen asignada la clase ejemplo. Entre las características que se aplican encontramos: tamaño de fuente, color, decoración de texto, posición de la decoración y como trabaja los subrayados respecto a los espacios.
Consideraciones finales
Vale la pena señalar que al ser un Working Draft, algunas de las características mencionadas pueden variar o no ser incluidas en la especificación final.
Debemos considerar que algunas de las propiedades aquí mencionadas no tienen un soporte completo en todas las versiones de los navegadores. Es posible que algunas de estas características estén disponibles en algunas versiones de los navegadores otras aún no. Por esta razón recomiendo probar en diferentes navegadores las características antes de utilizarlas en producción.
Para conocer más sobre esta especificación es posible ingresar a la documentación oficial del W3C en CSS Text Decoration Module Level 4.
Podremos leer más sobre la sintaxis detallada y la compatibilidad con navegadores en el artículo de MDN.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta