Noticias de la plataforma: Prefiere valores iniciales de fondo de Contraste, MathML, :is() y CSS

En el resumen de esta semana, prefers-contrastaterriza en Safari, MathML recibe algo de atención, :is()en realidad es bastante indulgente, hay más demandas relacionadas con ADA, valores iniciales inconsistentes para las propiedades de fondos CSS pueden conducir a patrones no deseados, pero bastante claros.

La prefers-contrast: moreconsulta de medios es compatible con Safari Preview

Después prefers-reduced-motion, en 2017, prefers-color-scheme2019 y forced-colors2020, una cuarta función de medios de preferencia del usuario está llegando a los navegadores. La consulta de medios CSS prefers-contrast: moreahora es compatible con la versión preliminar de Safari. Esta característica permitirá que los sitios web respeten la preferencia del usuario por un mayor contraste.

.pricing-info {  color: #86868b; /* contrast ratio 3.5:1 */}@media (prefers-contrast: more) {  .pricing-info {    color: #535283; /* contrast ratio 7:1 */  }}

Hacer de las matemáticas un ciudadano de primera clase en la web

Una de las primeras especificaciones desarrolladas por el W3C a mediados y finales de los años 90 fue un lenguaje de marcado para mostrar notaciones matemáticas en la web llamada MathML. Este idioma es actualmente compatible con Firefox y Safari. La implementación de Chrome se eliminó en 2013 debido a “preocupaciones relacionadas con la seguridad, el rendimiento y el bajo uso en Internet”.

Si está utilizando Chrome o Edge, habilite “Funciones de la plataforma web experimental” en la about:flagspágina para ver la demostración.

Hay un esfuerzo renovado para integrar correctamente MathML en la plataforma web y llevar a todos los navegadores de forma interoperable. Igalia ha estado desarrollando una implementación MathML para Chromium desde 2019. La nueva especificación MathML Core Level 1 es un subconjunto fundamental de MathML 3 (2014) que es “el más adecuado para la implementación del navegador”. Si el W3C lo aprueba, un nuevo grupo de trabajo de matemáticas trabajará para mejorar la accesibilidad y la capacidad de búsqueda de MathML.

La misión del Grupo de Trabajo de Matemáticas es promover la inclusión de las matemáticas en la Web para que sean un ciudadano de primera clase de la Web que se muestre bien, sea accesible y pueda buscarse.

CSS :is()actualiza las listas de selección para que sean indulgentes

Las nuevas CSS :is()y :where()pseudoclases ahora son compatibles con Chrome, Safari y Firefox. Además de sus casos de uso estándar (reducir la repetición y mantener baja la especificidad), estas pseudoclases también se pueden usar para hacer que las listas de selección sean “indulgentes”.

Por razones heredadas, el comportamiento general de una lista de selectores es que si algún selector de la lista no se analiza […] toda la lista de selectores deja de ser válida. Esto puede dificultar la escritura de CSS que utilizan nuevos selectores y aún funciona correctamente en agentes de usuario más antiguos.

En otras palabras, “si alguna parte de un selector no es válida, invalida todo el selector”. Sin embargo, envolver la lista de selectores :is()la hace indulgente: los selectores no compatibles simplemente se ignoran, pero los selectores restantes seguirán coincidiendo.

Desafortunadamente, los pseudoelementos no funcionan internamente :is()(aunque eso puede cambiar en el futuro), por lo que actualmente no es posible convertir dos pseudoelementos con prefijo de proveedor en una lista de selección indulgente para evitar la repetición de estilos.

/* One unsupported selector invalidates the entire list */::-webkit-slider-runnable-track, ::-moz-range-track {  background: red;}/* Pseudo-elements do not work inside :is() */:is(::-webkit-slider-runnable-track, ::-moz-range-track) {  background: red;}/* Thus, the styles must unfortunately be repeated */::-webkit-slider-runnable-track {  background: red;}::-moz-range-track {  background: red;}

Dell y Kraft Heinz demandados por sitios web inaccesibles

Cada vez más empresas estadounidenses se enfrentan a demandas por problemas de accesibilidad en sus sitios web. Más recientemente, la corporación tecnológica Dell fue demandada por una persona con discapacidad visual que no podía navegar por el sitio web y la tienda en línea de Dell utilizando los lectores de pantalla JAWS y VoiceOver.

El demandado no comunica información sobre sus productos y servicios de manera efectiva porqueLas ayudas auxiliares del lector de pantalla no pueden acceder a contenido importante.en la Plataforma Digital. […] La Plataforma Digital utiliza señales visuales para transmitir contenido y otra información. Desafortunadamente, los lectores de pantalla no pueden interpretar estas señales y comunicar la información que representa a personas con discapacidad visual.

A principios de este año, Kraft Heinz Foods Company fue exigida por no cumplir con las Pautas de Accesibilidad al Contenido Web en uno de los sitios web de la compañía. La denuncia alega que el sitio web no declaró un idioma ( langatributo) ni proporcionó etiquetas accesibles para sus enlaces de imágenes, entre otras cosas.

En Estados Unidos, la Ley de Estadounidenses con Discapacidades (ADA) se aplica a los sitios web, lo que significa que las personas pueden exigir a los minoristas si sus sitios web no son accesibles. Según el director ejecutivo de Deque Systems (los fabricantes de ax), la reciente tendencia creciente de demandas ADA basadas en la web puede atribuirse a la falta de una regulación global única que proporcione requisitos de cumplimiento específicos.

background-clipy background-origintienen diferentes valores iniciales

De forma predeterminada, un fondo CSS se pinta dentro del cuadro de borde del elemento ( background-clip: border-box) pero se coloca en relación con el cuadro de relleno del elemento ( background-origin: padding-box). Esta inconsistencia puede dar como resultado patrones inesperados si el borde del elemento es semitransparente o tiene puntos/guiones.

.box {  /* semi-transparent border */  border: 20px solid rgba(255, 255, 255, 0.25);  /* background gradient */  background: conic-gradient(    from 45deg at bottom left,    deeppink,    rebeccapurple  );}

Debido a los diferentes valores iniciales, el degradado de fondo en la imagen de arriba se repite como una imagen en mosaico en todos los lados debajo del borde semitransparente. En este caso, background-origin: border-boxtiene más sentido posicionar el fondo en relación con el cuadro de borde ( ).