Fecha de publicación: 6 de diciembre de 2024
Ya están disponibles los resultados del Estado de CSS 2024 y del Estado de HTML 2024. En esta publicación, se hace un análisis inicial de algunos de los hallazgos más interesantes de esas encuestas.
Optimismo sobre la plataforma web
Antes de analizar algunos de los problemas que las personas tienen con HTML y CSS, las encuestas transmiten mucho optimismo sobre la plataforma. Cuando se les preguntó si la plataforma web se está moviendo en la dirección correcta en general, el 58% de las personas que participaron en el informe State of HTML estuvo de acuerdo con esa afirmación, y el 18% estuvo muy de acuerdo.
En el caso de CSS, :has() se destacó como la función nueva favorita de CSS, con el 36% de las personas que la calificaron como la mejor función nueva. El segundo favorito es @container con un 17%, empatado con el anidamiento de CSS.
¿Qué usas?
Hubo algunas sorpresas en los datos de CSS. Por ejemplo, más del 75% de las personas usaron efectos de filtro de CSS, lo que la convierte en la función más utilizada. Dada la cantidad de quejas sobre la cascada a lo largo de los años, es interesante que solo el 18.9% de las personas usen las capas en cascada. Quizás haya un vínculo aquí con la adopción de herramientas como Tailwind que evitan que las personas terminen con problemas relacionados con la cascada con tanta frecuencia.
Los elementos de referencia, como <main> y <nav>, aparecen en la parte superior de la encuesta de HTML para los elementos que usas. Es genial ver a tantas personas que usan la carga diferida y las técnicas de imágenes responsivas.
Principales problemas de compatibilidad con navegadores
Los problemas con la interoperabilidad o la compatibilidad del navegador con las funciones siempre surgen cuando hablamos con los desarrolladores. En las encuestas, se te preguntó directamente por los problemas que encontraste. Las 10 funciones problemáticas principales son las siguientes, ordenadas según el porcentaje de personas que seleccionaron esa función.
- API de Popover
- Posicionamiento de la ancla
- Consultas de contenedores
:has()- Vista de anidación de CSS
- API de Transition
- Subred
- Cuadrícula
<dialog>- Apps web progresivas
El posicionamiento de ancla obtuvo un 11% en ambas encuestas, la API de View Transition un 9% en el estado de CSS y un 8% en el estado de HTML, lo que demuestra lo valiosas que consideran estas funciones los desarrolladores.
Curiosamente, varias de las funciones son interoperables. Las consultas de contenedor, :has(), el anidamiento de CSS y la subcuadrícula están disponibles como Baseline. La API de Popover también lo estaría, pero por un problema con la anulación de luz en iOS. El elemento <dialog> ahora está disponible de forma general, al igual que el diseño de cuadrícula de CSS. Puede ser conveniente analizar estos resultados para averiguar qué problemas tienen las personas. Por ejemplo, las respuestas para la cuadrícula suelen referirse a que es difícil de aprender, en lugar de citar un problema real de interoperabilidad.
Esperamos que Baseline ayude a los desarrolladores a comprender el estado de las cosas y a saber si un problema que ven se debe a la falta de compatibilidad con el navegador o a algo más. Es bueno ver que estas encuestas destacan el estado de Baseline de las funciones. También puedes ver el estado de disponibilidad en todos los navegadores para los problemas más comunes del CSS en webstatus.dev.
Funciones faltantes
En las encuestas, también se pregunta qué funciones y funcionalidades faltan en la plataforma. Esto nos ayuda a ver qué es lo que aún es difícil de hacer. Hubo porcentajes de respuesta más bajos a esta pregunta, sin embargo, en la encuesta sobre el estado de CSS, las personas solicitaron con mayor frecuencia mixins, lógica condicional y diseño de mampostería.
Curiosamente, las personas también pidieron un selector superior (:has() proporciona esa funcionalidad) y anidamiento, que ya existe y está disponible en Baseline.
La pregunta que se les hizo a los encuestados de State of HTML fue: "Si pudieras agregar 3 elementos al HTML, ¿cuáles serían?". El 51% de las personas pidió tablas de datos. Otras opciones populares incluyen pestañas y elementos de activación.
¿Sobre qué quieres obtener más información?
Las encuestas tienen una función con la que puedes agregar elementos a una lista de lectura si quieres obtener más información sobre ellos después de completar la encuesta. Estos son datos valiosos, en especial si te dedicas a crear contenido para desarrolladores. La siguiente lista incluye las diez características principales de las dos encuestas, ordenadas por porcentaje de personas que las agregaron a su lista.
- CSS
hanging-punctuation - CSS
offset-path @scope- Posicionamiento de los anuncios fijos
- Selección personalizable
view-timelinescroll-timeline- Atributo
focusgroup - Animación de propiedades discretas
image()
Consulta los resultados completos con la lista de lectura de CSS y la lista de lectura de HTML.
Un indicador de la comunidad web
Chrome admite estas encuestas porque es una forma de obtener información sobre tus principales problemas y lo que más te interesa en la plataforma web. No es el único indicador que usamos, pero es un lugar en el que puedes contarnos directamente lo que piensas. Si completaste una o ambas encuestas, gracias. Nos ayudas a mejorar la Web de la forma que desees. Si quieres ayudar, aún tienes tiempo para participar en The State of JS.