giok77

giok77

giok77

slot bonus new member

rumah88

Cuándo evitar la función de taquigrafía para la decoración del texto trucos CSS

En mi artículo reciente sobre errores de CSS, hablé sobre el resaltado de Chrome text-decoration-thickness y text-underline-offsetdos propiedades CSS relativamente nuevas y ampliamente admitidas que nos brindan más control sobre el estilo de resaltado.

Permítanme demostrar la utilidad de text-decoration-thickness en un ejemplo sencillo Fuentes web de Ubuntu hay un subrayado bastante grueso por defecto. Podemos hacer que este resaltado sea más sutil de la siguiente manera:

:any-link {
  text-decoration-thickness: 0.08em;
}
Se muestran dos enlaces, por defecto y uno que reduce el grosor de la decoración del texto.

/ explicación En todo este artículo usaré :any-link selector en su lugar a elemento coincidente de hipervínculo El problema con a etiqueta como selector es que se adapta a todos <a> artículos, incluso aquellos que no tienen href atributo y así sucesivamente no son hipervínculos. :any-link el selector solo coincide <a> elementos que son hipervínculos. Los navegadores web también utilizan :any-link en lugar de a en sus hojas de estilo de agente de usuario.

Mantenga el cursor subrayado

Muchos sitios web, incluidos Google Search y Wikipedia, eliminan los enlaces destacados y los muestran solo cuando el usuario se mantiene en contacto. Eliminar enlaces subrayados en el cuerpo del texto es no es una buena ideapero puede tener sentido en lugares donde los enlaces son más distantes (navegación, pie de página, etc.). Con eso en mente, aquí hay una implementación simple de resaltar mientras se mantiene presionado el cursor del enlace en el encabezado del sitio web:

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
}

Pero hay un problema. Si probamos este código en un navegador, notaremos que los subrayados en el encabezado tienen un grosor predeterminado, no el estilo más delgado que declaramos anteriormente. Por qué text-decoration-thickness dejar de funcionar después de agregar una retención de cursor?

Artículo Recomendado:  6 marcadores útiles para mejorar el desarrollo web trucos CSS

Veamos de nuevo el código CSS completo. ¿Puedes pensar en una razón por la cual personalizado thickness no se aplica al resaltado del cursor?

:any-link {
  text-decoration-thickness: 0.08em;
}

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
}

La razón de este comportamiento es que text-decoration es una propiedad abreviada y text-decoration-thickness la propiedad relacionada del brazo largo text-decoration para none o underline tiene el efecto secundario de reinicializar los otros tres componentes para la decoración del texto (thickness, styley colorEsto se define en Módulo CSS para decoración de texto.:

EN text-decoration propiedad es una abreviatura de configuración text-decoration-line, text-decoration-thickness, text-decoration-styley text-decoration-color en una declaración. Los valores perdidos se establecen en sus valores originales.

Puede confirmar esto en el navegador DevTools seleccionando uno de los hipervínculos en el inspector DOM y luego expandiendo text-decoration propiedad en el panel CSS.

Captura de pantalla de DevTools que muestra estilos de decoración de texto de pseudo-selector: cualquier enlace.

Para recibir text-decoration-thickness para trabajar en resaltar el cursor, necesitaremos hacer un pequeño cambio en el código CSS anterior. De hecho, hay varias maneras de lograr esto. Pudimos:

  • colocar text-decoration-thickness después text-decoration,
  • declarar el espesor en text-decoration taquigrafía, o
  • utilizar text-decoration-line en lugar de text-decoration.

Elegir la mejor opción para la decoración de texto.

Nuestro primer pensamiento puede ser simplemente repetir text-decoration-thickness declaración c :hover condición. Esta es una solución rápida y fácil que realmente funciona.

/* OPTION A */

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.08em; /* set thickness again */
}

Sin embargo, desde text-decoration es taquigrafía y text-decoration-thickness tiene un brazo largo adjunto, realmente no debería necesitar usar ambos al mismo tiempo. text-decoration le permite establecer tanto el subrayado como el grosor del subrayado, todo en una declaración.

/* OPTION B */

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline 0.08em; /* set both line and thickness */
}

Si este código te parece desconocido, puede ser por la idea de usarlo text-decoration ya que la taquigrafía es relativamente nueva. Esta propiedad solo se convirtió más tarde en taquigrafía en Módulo CSS para decoración de texto.en los dias de CSS 2, text-decoration era simple propiedad.

Artículo Recomendado:  Trazados de movimiento de curva Bezier en CSS puro | trucos CSS

Desafortunadamente, Safari aún no se ha puesto al día con estos cambios. En el navegador WebKit, la versión abreviada de text-decoration permanece antepuesto (-webkit-text-decoration), y no admite thickness valores todavía Error en WebKit 230083 Para más información.

Esto excluye text-decoration sintaxis abreviada. El código anterior no funcionará en Safari, incluso si agregamos -webkit- prefijo. Afortunadamente, hay otra manera de evitar la recurrencia. text-decoration-thickness declaración.

Cuándo text-decoration se convirtió en taquigrafía, nueva text-decoration-line Longhand fue presentado para hacerse cargo de su antiguo trabajo. Podemos usar esta propiedad para ocultar y mostrar el resaltado sin afectar los otros tres componentes para la decoración del texto.

/* OPTION C */

header :any-link {
  text-decoration-line: none;
}

header :any-link:hover {
  text-decoration-line: underline;
}

Porque solo actualizamos line componente de text-decoration valor previamente declarado thickness permanece intacta. Creo que esta es la mejor manera de aplicar resaltado cuando se mantiene presionado el cursor.

Tenga en cuenta las transcripciones

Tenga en cuenta que cuando establece una propiedad abreviada, p. text-decoration: underlinetodas las partes que faltan en el valor se inicializan de nuevo. Es por eso que estilos como background-repeat: no-repeat se cancelan si establece background: url(flower.jpg) consulte el artículo "Restablecimiento aleatorio de CSS" para obtener más ejemplos de este comportamiento.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir