El resaltado de Chrome CSS es demasiado delgado y demasiado bajo como un truco de CSS - Aprender Marketing
CSS

El resaltado de Chrome CSS es demasiado delgado y demasiado bajo como un truco de CSS

Recibo dos errores de Chrome cuando pruebo un nuevo CSS text-decoration-thickness y text-underline-offset propiedades que quiero compartir contigo en este artículo.

contenido

Primero, seamos realistas:

Guión bajo inconsistente por defecto

Agreguemos un enlace de texto a una página web normal, configúrelo font-family a Arial y compare el resultado final entre navegadores y sistemas operativos.

De izquierda a derecha: Chrome, Safari y Firefox en macOS; Safari en iOS; Chrome y Firefox en Windows; Chrome y Firefox en Android.

Como puede ver, el resaltado predeterminado es inconsistente entre los navegadores. Cada navegador selecciona su propio peso y posición vertical predeterminados (desplazamiento desde la línea de base) para resaltar. Módulo CSS para decoración de texto.que determina el siguiente comportamiento predeterminado (auto valor):

El agente de usuario selecciona el grosor apropiado para la decoración del texto. […] El agente de usuario selecciona el desplazamiento apropiado para la línea de fondo.

Afortunadamente, podemos anular la configuración predeterminada del navegador

Hay dos nuevos, Amplio apoyo Propiedades CSS que nos permiten definir con precisión el grosor y el desplazamiento del subrayado:

Con estas propiedades, incluso podemos crear resaltados consistentes en dos navegadores muy diferentes, como Gecko Firefox basado en Android y WebKit Safari basado en macOS.

h1 {
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.03em;
}
La primera línea: el resaltado predeterminado del navegador; resultado final: resaltado según CSS. (demostración)

notas: Esta text-decoration-thickness La propiedad también es especial. from-font valor Indica al navegador que use su propio ancho de resaltado de fuente preferido, si está disponible. después de la prueba Este valor funciona con varias fuentes diferentes, pero el subrayado es inconsistente.

Bien, pasemos a los dos errores de Chrome que mencioné anteriormente.

Error de Chrome 1: el subrayado es demasiado delgado en macOS

Si preguntas text-decoration-thickness La propiedad se establece en un valor relativo a la fuente, calculado como un valor de píxel no entero, y Chrome «reducirá» el valor en lugar de redondearlo al entero más cercano. Por ejemplo, si el grosor declarado es 0.06em, se calcula como 1.92px, el cromo se pintará con un espesor de 1px reemplazar 2pxEste problema se limita a macOS.

a {
  font-size: 2em; /* computes to 32px */
  text-decoration-thickness: 0.06em; /* computes to 1.92px */
}

En la captura de pantalla a continuación, observe que hay el doble de decoraciones de texto en Chrome (tercera línea) que en Safari y Firefox.

De arriba hacia abajo: Safari, Firefox y Chrome en macOS. (demostración)

Para obtener más información acerca de este error, consulte Cromo problemas № 1255280.

Error de Chrome 2: Subrayado demasiado bajo

Esta text-underline-offset La propiedad nos permite establecer la distancia exacta entre la línea base de la letra y la línea inferior (el desplazamiento de la línea inferior con respecto a la línea base). Desafortunadamente, esta función no está implementada correctamente en Chrome actualmente, por lo que el énfasis es demasiado bajo.

h1 {
  text-decoration: underline;
  text-decoration-color: #f707;

  /* disable “skip ink” */
  -webkit-text-decoration-skip: none; /* Safari */
  text-decoration-skip-ink: none;

  /* cover the entire descender */
  text-decoration-thickness: 0.175em; /* descender height */
  text-underline-offset: 0; /* no offset from baseline */
}

Debido a este error, no es posible mover el resaltado a la línea de base en Chrome.

De izquierda a derecha: Safari, Firefox y Chrome en macOS Mira esta demostración de CodePen.

Para obtener más información acerca de este error, consulte Cromo problemas № 1172623.

notas: Como habrás notado en la imagen de arriba, Safari dibuja resaltados sobre los puntos de caída en lugar de debajo de ellos. Errores de WebKit Esto se ha corregido recientemente. La solución debería estar disponible en la próxima versión de Safari.

Ayuda a priorizar los errores de Chrome

Dos nuevas características de estilo de resaltado de CSS son una adición bienvenida a CSS. Esperamos que estos dos errores relacionados en Chrome se solucionen pronto. Si estas características de CSS son importantes para usted, exprese su opinión mirando el error en Chromium Bug Tracker.

Inicie sesión con su cuenta de Google y haga clic en el botón de estrella en la pregunta #1172623 y #1255280.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba