El equipo de Chrome tuvo una gran presencia en la conferencia de CSS Day de este año. Dirigimos la mesa de ayuda de CSS, en la que respondíamos 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 también te pediré que nos digas qué crees que falta en HTML y CSS completando esta breve encuesta. ¿Estás de acuerdo con los asistentes al CSS Day?
Las diez solicitudes principales
Se les pidió a los asistentes que escribieran sus ideas en notas adhesivas y las agregaran a la pizarra. Las personas también pueden agregar su voto a las ideas con una calcomanía. Las diez características más importantes son las siguientes.
Compatibilidad con el diseño de entradas
Esta fue la función más solicitada, con 21 votos. Realmente necesitas formas de aplicar estilo a estos elementos comunes de la IU de manera coherente.
En Chrome, somos conscientes de que este es uno de los principales problemas de los desarrolladores, y estamos trabajando para crear mejores soluciones para ellos. Por ejemplo, los elementos de selección personalizables tienen como objetivo proporcionar una forma de habilitar un nuevo comportamiento de diseño. Luego, podrías agregar imágenes o incluso un diseño más elaborado a las opciones. La ventaja de este enfoque es que se recurriría a un menú de selección normal, lo que permitiría que sea una mejora progresiva.
Oculto visualmente
Con 19 votos en el CSS Day, esta fue la segunda solicitud más popular. La solicitud es para agregar contenido que solo usan los lectores de pantalla. Puede ser un elemento HTML en el que no se muestra el contenido 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 que siga siendo accesible para los lectores de pantalla.
Si bien esta es una solicitud popular, hay personas que no creen que se deba implementar. Para obtener más detalles, consulta Visually hidden content is a hack that needs to be resolved, not enshrined y esta discusión sobre CSS WG issue 560.
position: sticky dentro de 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 en el que se solicita esta función, y, si bien el caso de uso inicial de habilitar el uso de overflow: hidden para borrar elementos flotantes podría ser menos necesario hoy en día, hay muchos otros casos detallados en el hilo.
Animar a height: auto
Con 12 votos, muchos asistentes querían animar a height: auto. Nos complace anunciar que esta función llegará a la plataforma web con la propiedad interpolate-size y la función calc-size() de CSS.
Estarán disponibles a partir de Chrome 129.
Pronto publicaremos una entrada con más información sobre estos temas.
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 incluir más tipos de estos, por ejemplo, rango doble o autocompletado con una 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 duración de animación aleatoria.
Clases de diseño de Mixin
CSS agregó varias funciones que antes se veían en los preprocesadores de CSS: variables con propiedades personalizadas y, ahora, CSS Nesting. Sin embargo, los mixins reutilizables aún no forman parte del lenguaje, pero siete de los asistentes al CSS Day querían verlos.
Se tomó una resolución del Grupo de trabajo de CSS para comenzar a trabajar en una especificación para esta función, y puedes agregar tus ideas y casos de uso a la discusión en ese problema.
Estilos globales en Shadow DOM
Otro problema que tiene un gran hilo de debate sobre casos de uso es la solicitud para permitir que los estilos CSS globales se apliquen dentro de un DOM de sombra. Seis personas solicitaron esto en el CSS Day. Esta capacidad permitiría que los estilos de restablecimiento globales también se apliquen en los componentes web y que los archivos CSS únicos funcionen en todos los componentes de un sitio. Consulta este resumen de casos de uso y avísanos si también te gustaría tener esta función.
División de unidades mixtas
Hubo una propuesta para Interop 2024 en la que se solicitaba la capacidad de dividir por unidades mixtas, por ejemplo, calc(100vw / 1px). Sin embargo, se consideró demasiado amplio para Interop 2024, pero a muchos desarrolladores, incluidas seis personas en CSS Day, les gustaría que se implementara.
nth-letter
CSS tiene varios seudoelementos que actúan como si hubieras envuelto un elemento span alrededor de alguna sección de contenido. Por ejemplo, el seudoelemento ::first-letter segmenta la primera letra de la primera línea del contenedor de bloques al que se aplica.
En esa lista falta ::nth-letter, y nos han pedido ::nth-letter durante unos veinte años, por lo que sabemos que es una solicitud de larga data de los desarrolladores web. En el CSS Day, seis personas votaron por esta función, lo que la convirtió en la última de las diez funciones más solicitadas.
¿Estás de acuerdo con los diez mejores del CSS Day?
Nos encantaría conocer la opinión de un público más amplio sobre estos problemas. ¿Alguno de ellos se encuentra entre los diez principales? Si no es así, ¿hay algo más que te gustaría ver en CSS y HTML? Para ello, completa este breve formulario y resumiremos las respuestas en otra publicación.