Logik in CSS-Medienabfragen (Wenn / Sonst / Und / Oder / Nicht)

Nur für den Fall, dass Sie Geistesblitze über die Logik in CSS-Medienabfragen haben, so wie ich.

Wenn

Das sind Medienabfragen: logische if-Anweisungen. „Wenn“ diese Dinge für den Browser zutreffen, verwenden Sie das darin enthaltene CSS.

/* IF the viewport is 550px or smaller, do this */
@media (max-width: 550px) {
  html { background: hsl(0 0% 0% / 0.5); }
}

Media Queries Level 4 erlaubt eine Vergleichssyntax wie diese, aber die Browserunterstützung ist derzeit viel geringer

@media (width <= 30em) {
  html { background: rgb(0 0 0 / 0.5); }
}

Und

Das Schlüsselwort and.

/* IF the viewport is 550px or smaller, do this */
@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Die Media Queries Level 4-Syntax glänzt hier wirklich

@media (600px <= width <= 800px) {
  html { background: red; }
}

Oder

Komma trennen.

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Technisch gesehen werden diese wie zwei separate Medienabfragen behandelt, aber das ist effektiv oder.

Nicht

Kehren Sie die Logik mit dem Schlüsselwort not um.

@media not all and (max-width: 600px) {
  html { background: red; }
}

Allein not (max-width: 600px) scheint bei mir nicht zu funktionieren, daher die leicht seltsame Syntax oben. Vielleicht kann mir das jemand erklären. Beachten Sie, dass not nicht nur für die aktuelle Medienabfrage funktioniert, sodass es, wenn Sie kommagetrennte Werte verwenden, nur die Medienabfrage beeinflusst, innerhalb der es sich befindet. Beachten Sie auch, dass not die Logik für die gesamte Medienabfrage als Ganzes umkehrt, nicht für einzelne Teile davon. nicht x und y = nicht (x und y) ≠ (nicht x) und y.

Exklusiv

Um sicherzustellen, dass zu jeder Zeit nur eine Medienabfrage wirksam ist, machen Sie die Zahlen (oder was auch immer) so, dass dies möglich ist. Es kann einfacher sein, sie auf diese Weise mental zu verwalten.

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Logisch gesehen ist dies ein bisschen wie eine switch-Anweisung, nur ohne eine einfache Möglichkeit, „wenn keine dieser Bedingungen zutrifft, tu dies“ wie bei default.

Das sind zukünftige CSS-Sachen, aber die @when-Syntax wird helfen, dies zu verbessern

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}

Überschreiben

Es gibt nichts, was verhindert, dass mehr als eine Medienabfrage gleichzeitig wahr ist. Es kann in einigen Fällen effizienter sein, dies zu nutzen, anstatt sie alle exklusiv zu machen.

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

Medienabfragen fügen den von ihnen enthaltenen Selektoren keine Spezifität hinzu, aber die Quellreihenfolge ist immer noch wichtig. Das obige wird funktionieren, weil sie richtig geordnet sind. Tauschen Sie diese Reihenfolge und bei Browserfensterbreiten über 800 Pixel wird der Hintergrund rot sein, vielleicht unintuitiv.

Mobile First

Ihre Styles für kleine Bildschirme befinden sich in Ihrem normalen Bildschirm-CSS, und dann, wenn der Bildschirm größer wird, überschreiben Sie, was Sie brauchen. Also im Allgemeinen min-width-Medienabfragen.

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

Desktop First

Ihre Styles für große Bildschirme befinden sich in Ihrem normalen Bildschirm-CSS, und dann, wenn der Bildschirm kleiner wird, überschreiben Sie, was Sie brauchen. Also im Allgemeinen max-width-Medienabfragen.

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

Verrückt werden

Sie können damit so komplex sein, wie Sie möchten.

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

Hinweis: Das Schlüsselwort only war dazu gedacht, Browser, die keine Medienabfragen unterstützen, daran zu hindern, das Stylesheet zu laden oder die Styles zu verwenden. Ich bin mir nicht sicher, wie nützlich das jemals war / noch ist.