Html Css @media Grammatik?

Das Schlüsselwort media kann in css-Files z.B. wie folgt angegeben werden:

@media screen and (max-width: 1000px) {
 .column {
   width: 50%;
 }
}

@media screen and (max-width: 600px) {
 .column {
   width: 100%;
 }
}

Geht das evenuell auch so, bzw. konkret: wo findet man die entsprechende Grammatik definiert?

 .column {
@media screen and (max-width: 1000px) {
   width: 50%;
}
@media screen and (max-width: 600px) {
   width: 100%;
}
}

Answer 1

[medmonk]

Die erste Schreibweise ist am weitesten verbreitet und diejenigen, die von den meisten Browser abgedeckt wird. Ein Verschachteln wie im zweiten Beispiel war lange Zeit nur über einen CSS Pre-Processor wie Less, SCSS oder Stylus möglich.

Mittlerweile ist Nesting direkt in CSS möglich, wobei dies noch relativ frisch ist und erst seit kurzem dazugehört. Die Browser-Support liegt global aktuell bei knapp 71 Prozent zzgl. ~12 Prozent an Browser mit eingeschränkten Support.

• MDN web docs → CSS: Using CSS nesting
• W3C → Working Draft: CSS Nesting Module
• Can I Use → CSS: Nesting

Ebenfalls noch relativ neu und hier einfach mal dazu erwähne, sind einerseits Container-Queries und anderseits die mögliche Verwendung der Range Syntax. Dir nachfolgend mal ein Code-Snippet ein Beispiel anfüge.

CSS Nesting, Container-Queries und Range Syntax:

.element {
  /* Defaul rules */
  background-color: red;

  /* Media-Query incl. Range syntax:
   * min-width 500px 
   */ 
  @media(width >= 500px) {
    background-color: limegreen;
  }
  
  /* Container-Query incl. Range syntax:
   * min-width 700px and max-width: 1000px
   */
  @container(700px <= width <= 1000px) {
    background-color: blue;
  }
}

Während sich Media-Queries auf die Breite des Viewports beziehen, geht es bei Container-Queries um einzelne Element und deren verfügbarer Platz. Somit nützlich, wenn einzelne Elemente inhaltsbezogen anders dargestellt werden soll oder müssen.

• CSS-Tricks → The New CSS Media Queries Range Syntax
• Can I Use → CSS: Range Syntax
• MDN → Getting started with CSS container queries
• Kulturbanause → CSS Container Queries mit @container
• Can I Use → CSS: Container Queries

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Answer 2

[Ireeb]

Ich meine, mit normalem CSS geht es nicht, mit SCSS (SASS) aber schon. Damit kann man auch noch andere, praktische Dinge machen. Dein Beispiel ist einer der Gründe, warum ich eigentlich nur SASS verwende.

SASS ist praktisch eine Erweiterung von CSS, d.h. jeder CSS-Code ist auch gleichzeitig SCSS, allerdings gibt es in SCSS eben ein paar zusätzliche Funktionen. Man kann in SCSS auch andere Dinge verschachteln, Schleifen verwenden, Farben umrechnen, sich mehrfach wiederholende Kombinationen an Regeln als wiederverwendbares Mixin definieren, und vieles mehr.

Da es aber eben auf CSS basiert, muss man nicht viele neue Dinge lernen. Man muss lediglich beachten, dass SCSS zu CSS "kompiliert" werden muss, damit man es in Browsern verwenden kann. Dafür gibt es viele Tools, auch als Erweiterung z.B. für VSCode, die bei jeder Änderung automatisch kompiliert.

https://sass-lang.com/

Woher ich das weiß: Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur

Comments

[medmonk]

Ich meine, mit normalem CSS geht es nicht

Es gibt in CSS mittlerweile Nesting sowie die Möglichkeiten von „einfachen” Berechnungen und man dafür nicht mehr zwingend einen CSS Pre-Processor wie Less, SCSS oder Stylus verwenden muss. Der Browser-Support sieht diesbezüglich auch ganz gut aus und sich in den kommenden Monaten noch bessern wird.

Vanilla CSS:

.element {
  background-color: red;

  @media(width >= 500px){
    background-color: limegreen;
  }
}

• MDN web docs → CSS: Using CSS nesting
• W3C → Working Draft: CSS Nesting Module
• Can I Use → CSS: Nesting

LG medmonk