Propiedad CSS text-decoration-skip
La propiedad CSS text-decoration-skip especifica las partes del contenido que deben omitirse. Consulta los valores y prueba ejemplos.
La propiedad CSS text-decoration-skip fue diseñada para controlar qué partes del contenido de un elemento debería omitir una línea de decoración de texto (subrayado, sobrelineado o tachado) en lugar de trazarse a través de ellas.
Se aplicaba a todas las líneas de decoración dibujadas por el elemento y heredadas de sus ancestros. La idea era que se pudiera evitar que un subrayado cortara los espacios en blanco, los elementos reemplazados como las imágenes, o los descendentes de letras como "g" e "y".
En la práctica, la propiedad nunca llegó a implementarse. Los fabricantes de navegadores dividieron su funcionalidad en la propiedad dedicada text-decoration-skip-ink — que controla la omisión sobre los glifos de las letras — y la propiedad text-decoration-skip original fue eliminada de la especificación. Esta página la documenta como referencia; no la uses en código nuevo.
El valor ink — la única parte de esta propiedad que los navegadores alguna vez consideraron — fue trasladado a su propia propiedad text-decoration-skip-ink. Esa es la propiedad que casi con certeza necesitas hoy.
Cuándo usarla
Nunca en proyectos nuevos. text-decoration-skip está obsoleta y no está soportada en ningún navegador actual, por lo que declararla no tiene ningún efecto. Las dos conclusiones prácticas:
- Para evitar que un subrayado choque con los descendentes de las letras, usa
text-decoration-skip-ink: auto(este es el valor predeterminado moderno). - Para estilizar los subrayados en sí, usa
text-decoration-line,text-decoration-color,text-decoration-style, o la abreviaturatext-decoration.
Aún puedes encontrar text-decoration-skip en hojas de estilo o tutoriales más antiguos — reconocerla (y saber que no hace nada) es la razón principal para tenerla en cuenta.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredada | Sí. |
| Animatable | No. |
| Versión | Borrador (Obsoleta) |
| Sintaxis DOM | object.style.textDecorationSkip = "spaces"; |
Sintaxis
En la especificación ya eliminada, el valor era la palabra clave none o una o más palabras clave separadas por espacios de la lista siguiente.
/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces edges;Ejemplo de la propiedad text-decoration-skip
Dado que ningún navegador implementa text-decoration-skip, el subrayado a continuación se traza directamente a través de todo — la propiedad simplemente se ignora. El ejemplo se conserva para mostrar la sintaxis histórica:
Ejemplo de código CSS text-decoration-skip
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 1em;
color: #ccc;
font-size: 2em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<h2>Text-decoration-skip property example</h2>
<p>
<em>Lorem,</em>
<em>ipsum is simply dummy text</em>
</p>
</body>
</html>Resultado
Esta propiedad está obsoleta y no está soportada en los navegadores modernos. El ejemplo no producirá ningún cambio visual.
Valores
| Valor | Descripción |
|---|---|
| none | No se omitirá ninguna parte. Por lo tanto, la decoración de texto se dibuja para todo el contenido textual. |
| objects | Omite las decoraciones sobre los elementos reemplazados (como imágenes) o cajas en línea-bloque. |
| spaces | Se omiten todos los espaciados. |
| leading-spaces | Se omite el espacio en blanco inicial (separadores de palabras más cualquier letter-spacing o word-spacing inicial). |
| trailing-spaces | Se omite el espacio en blanco final (separadores de palabras más cualquier letter-spacing o word-spacing final). |
| edges | El inicio y el fin de cada línea de decoración se desplazan ligeramente hacia el interior desde el borde del contenido de la caja decoradora, para que los subrayados adyacentes no se fusionen visualmente. |
| box-decoration | Se omiten las áreas de margen, borde y relleno de la caja. |
Compatibilidad con navegadores
| Navegador | Soporte |
|---|---|
| Chrome | Nunca implementado |
| Firefox | Nunca implementado |
| Safari | Nunca implementado |
| Edge | Nunca implementado |
| Opera | Nunca implementado |