¿Se pueden anidar consultas de @media y @support? | Programar Plus

Sí, puedes, y realmente no importa en qué orden. No se requiere un preprocesador CSS. Funciona en CSS normal.

Esto funciona:

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

Y también lo hace esto, el anidamiento inverso de lo anterior:

@media (min-width: 1px) {
  @supports(--a: b) {
    body {
      background: green;
    }
  }
}

Puede continuar con el anidamiento, si alguna vez tiene sentido:

@media (min-width: 2px) {
  @media (min-width: 1px) {
    @supports (--a: b) {
      @supports (display: flex) {
        body {
          background: pink;
        }
      }
    }
  }
}

Probablemente haya un punto en el que la lógica se salga de control, así que cuidado. Pero bueno, funciona. Presumiblemente, puede anidar “infinitamente” las reglas at.

Mirar un código anidado como ese se parece un poco a un preprocesador CSS en uso, pero ese no es el caso aquí. El viejo CSS regular maneja esto muy bien y, de hecho, los preprocesadores de CSS no lo manipulan de manera significativa (sass, Less y Stylus probados).