Kannst du @media und @support Abfragen verschachteln?

Ja, das können Sie, und die Reihenfolge spielt eigentlich keine Rolle. Ein CSS-Präprozessor ist nicht erforderlich. Es funktioniert in normalem CSS.

This works

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

Und das hier auch, die umgekehrte Verschachtelung des obigen

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

Du kannst mit dem Verschachteln weitermachen, wenn es jemals Sinn ergibt

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

Es gibt wahrscheinlich einen Punkt, an dem die Logik außer Kontrolle gerät, also sei vorsichtig. Aber hey, es funktioniert. Vermutlich kannst du at-rules „unendlich“ verschachteln.

Verschachtelter Code wie dieser sieht ein wenig so aus, als ob ein CSS-Präprozessor verwendet wird, aber das ist hier nicht der Fall. Ganz normales CSS handhabt das problemlos, und tatsächlich manipulieren CSS-Präprozessoren es nicht wesentlich (getestet mit Sass, Less und Stylus).