Nuevamente, en 2023, todos los principales proveedores de navegadores y otras partes interesadas trabajaron en conjunto para resolver los principales problemas de compatibilidad con los navegadores.
En 2023, los principales proveedores de navegadores y otras partes interesadas volvieron a trabajar en conjunto para resolver los principales problemas de compatibilidad de los navegadores. La iniciativa comenzó en esta escala con Interop 2022, y puedes conocer los logros que logramos juntos en el período de fin de año. Todos los involucrados creen que esto ayudará a mejorar la experiencia de los desarrolladores web de todo el mundo. Este año, por primera vez, anunciamos públicamente el proceso de propuesta y recibimos muchas sugerencias excelentes de frameworks, grandes empresas, proveedores de navegadores y desarrolladores de todo el mundo.
Áreas de interés de Interoperabilidad de 2023
En este momento, no tenemos menos de 26 áreas de enfoque, que se describen en detalle en nuestro documento del proyecto. En orden alfabético:
- Imagen del borde en CSS
- Funciones y espacios de color en CSS
- Consultas de contenedores en CSS
- Contención en CSS
- Seudoclases de CSS
- Propiedades personalizadas en CSS
- Flexbox
- Detección de características de fuentes y paletas
- Formularios
- Cuadrícula
- :has()
- Inerte
- Enmascaramiento en CSS
- Funciones matemáticas en CSS
- Consultas de medios
- Módulos en Web Workers
- Ruta de movimiento en animaciones de CSS
- Lienzo fuera de pantalla
- Eventos de puntero y mouse
- URL
- Web Compat 2023: Un área de enfoque general para errores pequeños que causan problemas de compatibilidad conocidos con sitios
- Códecs web (video)
- Componentes web
Puedes encontrar información detallada sobre todas las áreas de enfoque en las Pruebas de plataforma web basadas en Documentos web de MDN. Sin embargo, aquí tienes algunas que creemos que te pueden interesar.
Consultas de contenedores
Las consultas de contenedores han sido una solicitud principal de los desarrolladores durante muchos años y, en 2022, se lanzaron Chrome y Safari. Firefox espera enviar consultas de contenedores en Firefox 110, y las pruebas para esta área de enfoque ayudan a garantizar que las consultas de contenedores funcionen de manera confiable entre navegadores y de acuerdo con las especificaciones.
:has(...)
Hace mucho tiempo que los desarrolladores pidieron un selector superior en CSS. La seudoclase :has() posibilita muchos de los casos de uso para selectores superiores, así como la selección de un elemento del mismo nivel anterior con respecto a un elemento de referencia. Por ejemplo, esto permite darle un estilo diferente a una figura que tiene una leyenda diferente a la que no tiene una leyenda. Obtén más información sobre los casos de uso de has() en :has(), el selector de familia.
Custom Properties
Las propiedades personalizadas de CSS, también conocidas como variables de CSS, permiten definir un valor una vez en una hoja de estilo y reutilizarlo en muchos lugares, lo que reduce la repetición. Por ejemplo, puedes definir un color común o un tamaño de fuente una vez en una hoja de estilo y usarlo en todos los componentes. La compatibilidad básica con las propiedades personalizadas está disponible en los navegadores desde hace mucho tiempo. Interoperabilidad 2023 se centra en la regla at @property. @property representa un registro de propiedad personalizada en una hoja de estilo, lo que permite verificar el tipo de propiedad, establecer valores predeterminados y confirmar si la propiedad debe heredar valores. Obtén más información en @property: cómo otorgar superpoderes a las variables de CSS.
Enmascaramiento CSS
El enmascaramiento de CSS proporciona métodos para aplicar efectos de imagen, como los que podrías ver en una aplicación de gráficos, con CSS. La compatibilidad con las diversas propiedades del enmascaramiento es irregular, lo que hace que el enmascaramiento sea más difícil de usar de lo que debería ser. Esta área de enfoque ayudará a los desarrolladores a usar los efectos de creatividades en varios navegadores con confianza. Para obtener más información sobre cómo aplicar efectos a las imágenes, consulta este artículo sobre el enmascaramiento de imágenes.
OffscreenCanvas
El elemento <canvas> y la API de Canvas proporcionan una forma de dibujar gráficos en la pantalla mediante secuencias de comandos. Sin embargo, esto puede causar problemas de rendimiento, ya que el trabajo se completa en el mismo subproceso que la interacción del usuario. OffscreenCanvas ofrece a los desarrolladores un lienzo que está separado del DOM y la API de Canvas. Los desarrolladores también pueden ejecutar tareas de renderización en un trabajador web, separadas del subproceso principal. Obtén más información sobre los beneficios de rendimiento de OffscreenCanvas.
Eventos de puntero y mouse
Los eventos de puntero se activan cuando se interactúa con una página mediante un mouse, un bolígrafo, una pluma stylus o una pantalla táctil. Los eventos del mouse se activan cuando se usa un mouse, pero por razones históricas también se usan de modo táctil. Esta área de enfoque abarca el comportamiento de la interacción del puntero y del mouse con las páginas, incluida la forma en que interactúan con las pruebas de posicionamiento y las áreas de desplazamiento. Debido a la falta de pruebas de plataforma web en esta área, el área de interés de 2023 excluye el uso táctil y la pluma stylus.
WebCodecs
La API de WebCodecs proporciona métodos para que los desarrolladores accedan a los cuadros individuales de video y a los fragmentos de audio. Ofrece acceso a códecs que ya están disponibles en el navegador y varias interfaces para interactuar con ellos. El artículo Procesamiento de videos con WebCodecs muestra cómo usar la API para decodificar y renderizar fotogramas individuales en un lienzo.
Componentes web
Componentes web es un término general para varias tecnologías utilizadas para crear componentes reutilizables, como Elementos personalizados y Shadow DOM. Interop 2023 se centrará en mejorar la interoperabilidad de estas tecnologías fundamentales.
Panel
Sigue el progreso a lo largo del año en el panel de Interop 2023, en el que podrás ver las puntuaciones actuales y el estado de abordar estas áreas de interés en los principales motores de navegadores.
Las puntuaciones de las Áreas de interés se calculan en función de las tasas de aprobación de los exámenes. Si tienes comentarios o quieres contribuir con mejoras a WPT, informa un problema para solicitar que se actualice el conjunto de pruebas que se usan para la puntuación.
