Por primera vez, todos los principales proveedores de navegadores y otras partes interesadas se han unido para resolver los principales problemas de compatibilidad de los navegadores identificados por los desarrolladores web. Interoperabilidad 2022 mejorará la experiencia de desarrollo para la Web en 15 áreas clave. En este artículo, descubrirás cómo llegamos hasta aquí, en qué se centra el proyecto, cómo se medirá el éxito y cómo se puede hacer un seguimiento del progreso.
Todo comenzó en 2019
En 2019, Mozilla, Google y otras empresas comenzaron un gran esfuerzo para comprender los problemas de los desarrolladores, en forma de encuestas sobre la evaluación de necesidades de los desarrolladores de MDN y el Informe de compatibilidad de navegadores con información detallada. Estos informes nos brindaron información detallada y práctica para abordar los principales desafíos de los desarrolladores con la plataforma web, y dieron lugar al esfuerzo de Compatibilidad 2021.
Entre otras cosas, Compat 2021 permitió crear una base sólida para funciones potentes, como la cuadrícula de CSS (12% de uso y un crecimiento constante) y flexbox de CSS (77% de uso), incluida la propiedad gap en Flexbox, que resuelve uno de los principales problemas de los desarrolladores a la hora de adoptar nuevos métodos de diseño.
Estuvimos contentos de alcanzar una puntuación de más del 90% en todas las implementaciones a finales de 2021.
¿Qué es Interoperabilidad 2022?
Interoperabilidad 2022 es una comparativa, acordada por los representantes de tres principales implementaciones de navegadores y desarrollada a través de un proceso de nominación pública y revisión con los aportes de los colaboradores Apple, Bocoup, Google, Igalia, Microsoft y Mozilla.
Las comparativas se centran en 15 áreas que los desarrolladores identifican como particularmente problemáticas cuando no están disponibles o tienen problemas de compatibilidad entre navegadores. Todos los proveedores de navegadores han aceptado centrarse en estas áreas, y todos los involucrados están entusiasmados por empezar a mejorar considerablemente la experiencia de desarrollo para la Web.
Las 15 áreas de interés
Las siguientes funciones se centrarán en Interoperabilidad 2022. Incluyen 10 áreas nuevas, además de 5 transferidas de Compat 2021. Las nuevas áreas de enfoque son:
Capas de Cascade
Las capas de cascada les brindan a los desarrolladores web más control sobre la cascada. Proporcionan una forma de agrupar selectores en capas, cada uno con su propia especificidad. Esto significa que no necesitas ordenar los selectores con cuidado ni crear selectores muy específicos para reemplazar las reglas básicas de CSS.
Espacios de color y funciones de color CSS
Para usar funciones de color en un sistema de diseño, actualmente necesitas usar Sass, PostCSS o calc() en los valores de HSL. Las funciones de color integradas en CSS permiten actualizar colores de forma dinámica. Además, los nuevos espacios de color quitan la restricción del gamut sRGB y las limitaciones perceptivas de HSL.
Hay dos funciones definidas en el nivel de color 5 de CSS que permiten el uso de temas más dinámicos en la plataforma web:
color-mix(): Toma dos colores y muestra el resultado de mezclarlos en un espacio de color especificado en una cantidad determinada.color-contrast(): Selecciona de una lista de colores el color con el contraste más alto a un solo color especificado.
Estas funciones admiten espacios de color expandidos (LAB, LCH y P3) y, además de HSL y sRGB, usan el espacio de color uniforme de forma predeterminada.
Nuevas unidades de viewport
Las dificultades con el tamaño del viewport se destacan en el Informe de compatibilidad del navegador de MDN 2020 y en la nueva encuesta State of CSS 2021. Los valores y las unidades de CSS en el nivel 4 agrega nuevas unidades para los tamaños de viewport más grandes, pequeños y dinámicos, lv*, sv* y dv*. Estas unidades facilitarán la creación de diseños que ocupen el viewport visible en los dispositivos móviles, teniendo en cuenta la barra de direcciones.
Además, el equipo de varios proveedores detrás de Interop 2022 colaborará para investigar y mejorar el estado de la interoperabilidad de las funciones de medición de viewport existentes, incluida la unidad vh existente.
Desplazamiento
En el Informe de la encuesta de desplazamiento de 2021, se confirma que las funciones de desplazamiento y su compatibilidad son difíciles de implementar y que se podrían mejorar muchas áreas. Nos enfocaremos en el ajuste de desplazamiento, el comportamiento de desplazamiento y el comportamiento de desplazamiento para que el desplazamiento sea más coherente y fluido en todas las plataformas.
También estamos explorando nuevas propuestas de funciones de ajuste de desplazamiento.
Subcuadrícula
El valor subgrid de grid-template-columns y grid-template-rows significa que un elemento de la cuadrícula al que se aplicó display: grid puede heredar la definición de segmento de la parte de la cuadrícula superior sobre la que se coloca.
Por ejemplo, los siguientes tres componentes de tarjeta tienen un encabezado y un pie de página alineados con los encabezados y los pies de página adyacentes, aunque cada tarjeta tenga una cuadrícula independiente. Este patrón funciona porque cada tarjeta es un elemento que abarca tres filas de la cuadrícula superior y, luego, usa la subcuadrícula para heredar esas filas en la tarjeta.
También se incluye
- Contención de CSS (la propiedad
contain) - El elemento
<dialog> - Controles del formulario
- Tipografía y codificaciones: incluidos
font-variant-alternates,font-variant-position, la unidadicy las codificaciones de texto CJK - Web Compat, que se enfoca en las diferencias entre los navegadores que causaron problemas de compatibilidad de sitios que afectan a los usuarios finales
Las siguientes áreas tuvieron un gran avance con el proyecto Compat 2021, pero aún queda mucho por mejorar. Por lo tanto, se incluyeron en Interoperabilidad 2022 para que se puedan abordar los problemas restantes.
- Relación de aspecto
- Caja flexible
- Cuadrícula
- Posicionamiento fijo
- Transformaciones
Iniciativas de investigación
Además de las 15 áreas de interés, Interop 2022 incluye tres esfuerzos de investigación. Estas son las áreas que son problemáticas y necesitan mejoras, pero en las que el estado actual de las especificaciones o pruebas aún no es lo suficientemente bueno como para poder calificar el progreso con los resultados de las pruebas:
- Edición,
contenteditableyexecCommand - Eventos de puntero y mouse
- Medición de viewport
Los proveedores de navegadores y otras partes interesadas colaborarán para mejorar las pruebas y especificaciones de estas áreas, de modo que puedan incluirse en futuras iteraciones de este esfuerzo.
Medir el éxito y hacer un seguimiento del progreso
El panel web-platform-tests existente se usará para hacer un seguimiento del progreso en las 15 áreas de interés. Se identificaron un conjunto de pruebas para cada área. Luego, los navegadores reciben una puntuación para estas pruebas, y se les asigna una puntuación para cada área y una puntuación general para las 15 áreas.
Si deseas continuar y hacer un seguimiento del progreso, consulta el panel de Interoperabilidad 2022. En el transcurso del año, podrás seguir los pasos y ver cómo mejora la plataforma para la que creas contenido.
¿Qué significa todo esto para los desarrolladores?
El objetivo de estos esfuerzos de interoperabilidad de varios años, en forma de Compat 2021, Interop 2022 y mucho más, es reconocer y abordar plenamente los puntos débiles que los desarrolladores han experimentado durante muchos años. Y no se trata de un esfuerzo de un solo navegador, sino de una sólida colaboración entre los principales proveedores de navegadores y amigos para mejorar la plataforma web de manera global.
En esencia, el objetivo es hacer que la plataforma web sea más fácil de usar y confiable para los desarrolladores, de modo que puedan pasar más tiempo creando experiencias web excelentes en lugar de solucionar las incoherencias de los navegadores.
Envíanos tu opinión
Si tienes comentarios sobre las mejoras que se implementaron durante Compat 2021 o sobre cualquiera de las funciones incluidas en Interoperabilidad de 2022, nos encantaría conocer tu opinión. ¿Cuál de estas funciones marcará la mayor diferencia en tu trabajo? ¿Qué es lo que realmente te entusiasma? Informa problemas en el repositorio de GitHub o comunícate con nosotros en Twitter.
Obtén más información sobre Interoperabilidad 2022 en: