Noticias de plataforma: contornos redondeados, animaciones SVG aceleradas por GPU, cómo se resuelven las variables CSS

En las noticias de esta semana, Firefox obtiene contornos redondeados, las animaciones SVG ahora están aceleradas por GPU en Chrome, no hay unidades físicas en CSS, se puede acceder al crucigrama del New York Times y las variables CSS se resuelven antes de que se herede el valor.

¡Saltemos a las noticias!

Los contornos redondeados llegan a Firefox

La idea de que el contorno siga la curva del borde ha existido desde que fue posible crear bordes redondeados a través de la border-radiuspropiedad a mediados de la década de 2000. Se sugirió a Mozilla, WebKit y Chromium hace más de diez años, e incluso ha sido parte de la especificación CSS UI desde 2015:

No es necesario que las partes del contorno sean rectangulares. En la medida en que el contorno siga el borde del borde,debe seguir la border-radiuscurva.

Avance rápido hasta hoy en 2021 y los contornos siguen siendo rectángulos en todos los navegadores sin excepción:

Pero esto finalmente está empezando a cambiar. En unas semanas, Firefox se convertirá en el primer navegador con contornos redondeados que siguen automáticamente la forma del borde. Esto también se aplica al esquema de enfoque predeterminado en los botones de Firefox.

Destaque el número 81556 de Chromium (es necesario iniciar sesión) para ayudar a priorizar este error y traer contornos redondeados a Chrome lo más posible pronto.

Las animaciones SVG ahora están aceleradas por GPU en Chrome

Hasta hace poco, animar un elemento SVG a través de CSS activaba el repintado en cada fotograma (normalmente 60 veces por segundo) en los navegadores basados ​​en Chromium. Este repintado constante puede tener un impacto negativo en la fluidez de la animación y en el rendimiento de la página misma.

La última versión de Chrome eliminó este problema de rendimiento al permitir la aceleración de hardware para animaciones SVG. Esto significa que las animaciones SVG se descargan a la GPU y ya no se ejecutan en el hilo principal.

El cambio a la aceleración de GPU automáticamente hizo que las animaciones SVG tuvieran más rendimiento en los navegadores basados ​​en Chromium ( Firefox también hace esto ), lo que definitivamente es una buena noticia para la web:

Hurra por más animaciones SVG mejoradas progresivamente y accesibles para lectores de pantalla y menos Canvas.

No puedes haber unidades físicas reales en CSS

CSS define seis unidades físicas, incluidas in(pulgadas) y cm(centímetros). Cada unidad física está en una proporción fija con la unidad de píxel, que es la unidad canónica. Por ejemplo, 1insiempre es exactamente 96px. En la mayoría de las pantallas modernas, esta longitud no corresponde a 1 pulgada en el mundo real.

La página de preguntas frecuentes del Grupo de Trabajo de CSS ahora responde a la pregunta de por qué no puede haber unidades físicas reales en CSS. En resumen, el navegador no siempre puede determinar el tamaño y la resolución exacta de la pantalla (piense en los proyectores). Para los sitios web que necesitan unidades precisas del mundo real, el Grupo de Trabajo recomienda la calibración por dispositivo:

Tenga una página de calibración, donde le pide al usuario que mida la distancia entre dos líneas que están separadas por una cierta distancia CSS (por ejemplo, 10cm) e ingrese el valor que obtiene. Use esto para encontrar el factor de escala necesario para esa pantalla (longitud de CSS dividida por la longitud proporcionada por el usuario).

Luego, este factor de escalada se puede establecer en una propiedad personalizada y usar para calcular longitudes precisas en CSS:

html {  --unit-scale: 1.428;}.box {  /* 5 real-world centimeters */  width: calc(5cm * var(--unit-scale, 1));}

El crucigrama del Times es accesible para los usuarios de lectores de pantalla

El equipo del NYT Open escribió sobre algunas de las mejoras realizadas en el sitio web del New York Times que lo han hecho más accesible en los últimos años. El sitio web utiliza HTML semántico ( article, nav, etc.), mayor contraste en componentes importantes (por ejemplo, inicio de sesión y registro) y enlaces para saltar al contenido que se adaptan al muro de pago del sitio.

Además, el equipo de Juegos hizo que el crucigrama diario fuera accesible para los usuarios de teclados y lectores de pantalla. El crucigrama se implementa como una cuadrícula de rectelementos SVG. A medida que el usuario navega por el rompecabezas, el atributo del cuadrado actual aria-label(nombre accesible) se actualiza dinámicamente para proporcionar contexto adicional.

Puedes jugar el mini crucigrama sin una cuenta. Intenta resolver el rompecabezas con el teclado.

Las variables CSS se resuelven antes de que se herede el valor.

Yuan Chuan recientemente compartió un pequeño cuestionario de CSS que no respondió correctamente porque no estaba seguro de si una variable CSS (la var()función) se resuelve antes o después de que se herede el valor. Intentaré explicar cómo funciona esto en el siguiente ejemplo:

html {  --text-color: var(--main-color, black);}footer {  --main-color: brown;}p {  color: var(--text-color);}

La pregunta: ¿El color del párrafo está en el pie de página blacko brown? Hay dos posibilidades. O (A) los valores declarados de ambas propiedades personalizadas se heredan en el párrafo y luego la colorpropiedad se resuelve en brown, o (B) la --text-colorpropiedad se resuelve blackdirectamente en el htmlelemento y luego este valor se hereda en el párrafo y se asigna al colorpropiedad .

La respuesta correcta es la opción B (el color es negro). Las variables CSS se resuelven antes de heredar el valor. En este caso, --text-colorrecurra a blackporque --main-colorno existe en el htmlelemento. Esta regla se especifica en el módulo Variables CSS:

Es importante tener en cuenta que las propiedades personalizadas resuelven cualquier var()función en sus valores en el momento del valor calculado, lo que ocurre antes de que se herede el valor.