El equipo de Chrome tuvo una gran presencia en la conferencia CSS Day de este año. Ejecutamos la mesa de ayuda de CSS y respondimos las preguntas de los asistentes, pero también teníamos una pizarra en la que les preguntábamos a las personas qué creían que aún faltaba en CSS. En esta publicación, compartiré los resultados de esa pregunta y te pediré que completes esta breve encuesta para indicarnos lo que crees que falta en HTML y CSS. ¿Estás de acuerdo con los asistentes del CSS Day?
Las diez solicitudes principales
Se les pidió a los asistentes que escribieran ideas en notas adhesivas y las agregaran al tablero. También podían agregar calcomanías para votar por las ideas. Las diez funciones principales son las siguientes:
Compatibilidad con entradas de diseño
Esta fue nuestra solicitud de función más popular, con 21 votos. Quieres encontrar formas de aplicar diseño a estos elementos comunes de la IU de forma coherente.
En Chrome, sabemos que este es un problema importante para los desarrolladores, por lo que estamos trabajando para crear mejores soluciones para ellos. Por ejemplo, los elementos seleccionables personalizables tienen como objetivo proporcionar una forma de habilitar un nuevo comportamiento de diseño. Luego, puedes agregar imágenes o incluso diseños más elaborados a las opciones. La ventaja de este enfoque es que recurriría a un menú de selección normal, lo que permitiría que sea una mejora progresiva.
Ocultas a la vista
Con 19 votos en el CSS Day, esta fue la segunda solicitud más popular. La solicitud es una forma de agregar contenido que solo usan los lectores de pantalla. Puede ser un elemento HTML, en el que el contenido no se muestra y solo lo lee un lector de pantalla.
Por lo general, las personas logran esto hoy en día creando una clase .visually-hidden para ocultar el contenido, pero aún así permitir que los lectores de pantalla accedan a él.
Si bien esta es una solicitud popular, hay personas que no creen que se deba implementar. Para obtener más información, lee Visually hidden content is a hack that needs to be resolved, not enshrined y esta discusión sobre CSS WG issue 560.
position: sticky inside overflow:hidden
Esta solicitud recibió 16 votos. Actualmente, position: sticky solo funciona cuando todos los elementos superiores son overflow: visible.
Hay un problema abierto desde 2017 que solicita esto y, si bien el caso de uso inicial de habilitar el uso de overflow: hidden para borrar números de punto flotante podría ser menos necesario en la actualidad, hay muchos otros casos que se detallan en la conversación.
Animar a height: auto
Con 12 votos, muchos asistentes querían animar a height: auto. Nos complace poder decir que esto llegará a la plataforma web con la propiedad interpolate-size y la función calc-size() de CSS.
Esta función estará disponible a partir de Chrome 129.
Pronto publicaremos una entrada con más información sobre este tema.
Tipos de entrada adicionales
HTML5 te ofrece muchos tipos diferentes para el elemento <input>, por ejemplo, type="email" para una dirección de correo electrónico o type="range" para un control deslizante de rango.
En el CSS Day, recibimos 10 votos para más de estos tipos, por ejemplo, el rango doble o el autocompletado con lista de datos personalizada.
Números aleatorios reales en CSS
Otra solicitud con 10 votos fue para números aleatorios reales en CSS. Esto se solicitó y se solucionó en el pasado para una animation-duration aleatoria.
Clases de estilo de combinación
CSS agregó varias funciones que se vieron anteriormente en los preprocesadores de CSS: variables con propiedades personalizadas y, ahora, anidación de CSS. Sin embargo, los mixins reutilizables aún no forman parte del lenguaje, pero siete de los asistentes del CSS Day querían verlos.
Se tomó una resolución del grupo de trabajo de CSS para comenzar a trabajar en una especificación de esta función. Puedes agregar tus pensamientos y casos de uso a la discusión de ese problema.
Estilos globales en Shadow DOM
Otro problema que tiene una gran conversación sobre casos de uso es la solicitud para permitir que los estilos CSS globales se apliquen dentro de un DOM sombreado. Seis personas lo pidieron en el CSS Day. Esta función permitiría que los estilos de restablecimiento globales también se apliquen en los componentes web y que los archivos CSS individuales funcionen en todos los componentes de un sitio. Consulta este resumen de casos de uso y cuéntanos si esta es una función que también te gustaría tener.
División de unidades mixtas
Hubo una propuesta para Interop 2024
que solicitaba la
posibilidad de dividir por unidades mixtas, por ejemplo, calc(100vw / 1px). Se consideró demasiado amplio para Interop 2024. Sin embargo, muchos desarrolladores, incluidas seis personas en CSS Day, les gustaría ver que se implemente.
nth-letter
CSS tiene varios pseudoelementos que actúan como si hubieras unido un intervalo alrededor de una sección de contenido. Por ejemplo, el pseudoelemento ::first-letter se orienta a la primera letra de la primera línea del contenedor de bloques al que se aplica.
Falta ::nth-letter en esa lista, y llevas alrededor de veinte años pidiendo ::nth-letter, por lo que sabemos que es una solicitud de los desarrolladores web desde hace mucho tiempo. En el CSS Day, seis personas votaron por esta opción, por lo que es la última de nuestras diez funciones más solicitadas.
¿Estás de acuerdo con los diez primeros puestos del CSS Day?
Nos encantaría escuchar sobre estos problemas de un público más amplio. ¿Alguno de estos se encuentra entre los diez primeros? De lo contrario, ¿hay algo más que te gustaría ver en CSS y HTML? Para informarnos al respecto, completa este breve formulario y resumiremos las respuestas en otra publicación.