Stefan Judis señala que hay una especificación para las consultas de medios personalizadas, pero aparentemente no hay impulso en este momento. Esa falta de movimiento es desafortunada, ya que está casi garantizado que los desarrolladores de front-end comenzarán a usarlo tan pronto como esté listo. Sé que lo haría, ya que ahora uso generosamente propiedades personalizadas, y la sequedad de las propiedades personalizadas es exactamente uno de los mismos beneficios que obtendríamos con las consultas de medios personalizadas.
La sintaxis es:
@custom-media --narrow-window (max-width: 30em);
@media (--narrow-window) {
/* narrow window styles */
}
@media (--narrow-window) and (script) {
/* special styles for when script is allowed */
}
..que saqué del error de Chrome (ascárrelo para indicar interés).
Se me ocurrió la idea de postcss-preset-env, que puede rellenar esto entre muchas otras cosas. Solía pensar que era demasiado teórico, lo que me ponía nervioso, tanto CSS no es particularmente compatible con múltiples funciones sin JavaScript. Además, si algo cambia con las especificaciones, básicamente se ha encerrado en un procesador CSS en lugar de obtener funciones futuras, ya que ese procesamiento finalmente detiene el procesamiento. Pero todas las transformaciones de CSS aquí en general parecen bastante frías, brindan mucho valor (¡como consultas de medios personalizadas!), Y puede elegir con qué etapa se siente más cómodo.
Enlace directo →