Lista de deseos CSS 2019

¿Qué te gustaría que CSS pudiera hacer de forma nativa y que no puedes hacer ahora? Primero, repasemos la última vez que hicimos esto en 2013.

1. ❌ “Me gustaría poder seleccionar un elemento en función de si contiene otro selector en particular”
2. ❌ “Me gustaría poder seleccionar un elemento según el contenido que contiene”
3. ❌ “Me gustaría tener varios pseudoelementos”
4. ❌ “Me gustaría poder animar o hacer la transición de algo a height: auto;“
5. ❌ “Me gustan las cosas de Sass, como @extend, @mixiny Nesting”
6. ❌ “Me gustaría ::nth-letter, ::nth-wordetc.”
7. ✅ “Me gustaría que todos los navegadores principales se actualicen automáticamente”

Si. Oh bien. No estoy seguro de qué tan solicitados son realmente todos ellos o qué tan factible es siquiera implementarlos. Son simplemente ideas que pensé que serían útiles en 2013 y resulta que todavía lo hago.

Esta vez, en lugar de hacer mi propia lista, echamos un vistazo a Internet para ver a otras personas que han reunido sus deseos de CSS.

Lista TL;DR

Al observar varias fuentes de conversación sobre cosas que la gente desea en CSS, estas parecen ser las preguntas más comunes:

• Consultas de padres. Como seleccionar un elemento en cualquier sentido y luego seleccionar el padre de ese elemento. Tenemos algunas pruebas de que es posible con :focus-within.
• Consultas de contenedores. Seleccione un elemento en particular cuando el elemento en sí se encuentre bajo ciertas condiciones.
• Estilo estandarizado de elementos de formulario.
• Tiene/contiene selectores.
• Transiciones a autodimensiones.
• Se corrigió el manejo de las unidades de ventana gráfica.

En particular, lo que me resulta interesante es la falta de personas que soliciten un alcance de estilo. Subió un poco, pero no una tonelada. Parece una parte muy importante de la conversación CSS-in-JS, por lo que me sorprende ver tan poca mención al respecto en el contexto general de “¿qué necesita CSS?”. conversaciones.

Jen Simmons preguntó qué hay en nuestras listas

Haciendo una lista de deseos de todas las cosas que me encantaría que sucedieran en el mundo de CSS en 2019. ¿Qué hay en tu lista? ¿Cosas que quieres aprender? ¿Problemas que quieres ayuda para resolver? ¿Nuevas propiedades que necesitas? ¿Ideas de diseño que desearías poder codificar? ¿Recursos que te encantaría tener? Nombra tu deseo.

– Jen Simmons (@jensimmons) 14 de noviembre de 2018

Respuestas notables del hilo:

• Relaciones de aspecto (es extrañamente complicado en CSS, probablemente llegue a HTML, y tal vez algún día lo obtendremos de forma nativa en CSS con una propiedad)
• Exclusiones
• Regiones
• Subcuadrícula (¡ya viene!)
• text-wrap: avoid-widows-and-orphans
• Anidación
• Contorno con radio
• Degradados de fondo animados (sin fingir moviéndolos o cualquier otra cosa)
• text-overflow:ellipsissobre múltiples líneas / sujeción de línea
• transiciones de 0 a automáticas
• Selectores de padres
• asíncrono@import
• Funciones matemáticas como sqrt()ysin()cos()
• font-min-sizeyfont-max-size
• Albañilería

Tab Atkins quería saber qué partes de CSS nos dan más problemas

¿Qué partes de CSS te dan más problemas debido a las diferencias de comportamiento del navegador? Recopilando algunos datos, por favor RT. (Si la respuesta es diferente para dispositivos móviles y computadoras de escritorio, hágamelo saber).

– Taudry Hepburn (@tabatkins) 3 de octubre de 2018

Respuestas notables del hilo:

• Toneladas y toneladas de solicitudes de una forma estandarizada de diseño de elementos de formulario, no solo por deseo de estilo, sino también por accesibilidad para evitar el intercambio de estándares de estilo.
• Ser capaz de probar la compatibilidad del navegador con algo más que propiedades/valores con@supports
• Manejo mejorado de las unidades de ventana gráfica y su relación con otra interfaz de usuario del navegador.
• Manejo mejorado del diseño de múltiples columnas.
• Desplazamiento elástico

Tommy Hodgins creó un calendario de anuncios CSS+JS en Twitter que documenta posibilidades interesantes

1 de diciembre: Selector principal Aunque CSS no tiene un selector :parent, puedes crear el tuyo propio con una pequeña función de JavaScript y usar un selector como [–parent] en tus hojas de estilo CSS hoy.

demostración: https://t.co/9N1A1Un8XT
código: https://t.co/NNUuvOi1zH #css #javascript pic.twitter.com/Nv8V3rl2AF

– Tommy Hodgins (@innovati) 1 de diciembre de 2018

La lista de Tommy:

• selector de padres
• Tiene selector
• Selector más cercano
• Primero en el documento (cómo querySelectorfunciona)
• Selector de hermanos mayores
• Selector de hermanos anterior
• Contiene selector
• Selector de expresiones regulares
• Selector de estilo computarizado
• :nth-letter/:nth-word
• Pseudo selectores de medios
• Selector válido/no válido que no esté en blanco
• Consultas de elementos
• Selectores de comparación de atributos
• Especificidad personalizada
• Selectores de visibilidad
• Selector de detección de desbordamiento
• Selector de detección de agente de usuario
• Consultas de almacenamiento
• Consultas de fecha
• Consultas de protocolo
• Flotación profunda

preguntamos también

Elaborar una lista de las funciones nativas CSS más buscadas. ¡Hay muchas ideas por ahí!

Dame ideas rápidas. No pienses demasiado.

– Trucos CSS (@css) 17 de diciembre de 2018

Respuestas notables del hilo:

• Consultas de contenedores
• Tiene selector
• Regiones
• Funciones de modificación de color
• Anidación
• Sombrereros
• Transición a autodimensiones / transición dedisplay: none;
• Selector de hermanos anterior
• font-size: fit;
• estilogrid-template-areas
• Animación entregrid-template-areas
• Tipos de propiedades personalizadas
• clip-pathaceptando caminos
• inline-styles: ignore;
• Relaciones de aspecto
• alcancé
• // single line comments
• Formas de esquina