Abrir accesorios @custom-media Recetas | Consejos CSS

este @custom-media ¡at-rule ya está disponible en Firefox Nightly! no puedo encontrarlo en Notas de la versión pero Adam Argyle está en ritmo Observe que ahora está detrás de la bandera.

A menudo olvido el nombre exacto de una persona. @media Consulta o simplemente cansado de escribir algo como esto @media screen and (prefers-reduced-motion: no-preference) repetidamente. @custom-media Esto facilitará enormemente la memoria muscular ya que nos permite crear alias para consultas.

De hecho, el proyecto Open Props de Adam ha más de 45 de ellos Esta es una receta excelente:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

@media (--motionOK) {
  /* animations and transitions */
}

Enlace directo →