CSS/@-Regeln/@container
Aus SELFHTML-Wiki
- Liste der @-Regeln
Mit der @container-Regel kann ein eigener Breakpoint pro Komponente festgelegt werden. Diese Container Queries ermöglichen eine genauere und bequemere Steuerung des Layouts, als es bisher mit media queries möglich war.
Hauptartikel: CSS/Media Queries/Container Queries
Abfrage mit @container
nav.main {
container-type: inline-size;
}
@container (min-width: 25em) {
nav.main ul {
display: flex;
}
}
<body>
<nav class="main">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
</body>
Mit dieser Container-Query wird die Menüpunktliste im nav-Element zu einer Flexbox, sobald das nav-Element - der Query-Container - mindestens 25em breit ist. Natürlich lässt sich eine solche Abfrage auch über eine @media-Query lösen, aber dann muss berücksichtigt werden, ob das nav-Element die ganze Viewportbreite einnimmt oder eventuell noch andere Elemente daneben stehen. Die @container-Query fragt ausschließlich das nav-Element ab.
Empfehlung: Wenn Sie mehrere Container auf einer Seite haben, ist es besser, dem jeweiligen Query-Container mit container-name einen Namen zu geben und diesen im Stylesheet zu verwenden.
Weblinks
- MDN: CSS Container Queries
- css-tricks: Next Gen CSS: @container Una Kravets, May 11, 2021
- smashing-magazine: A Primer On CSS Container Queries Stephanie Eckles, 11.05.2021
deutsch
- kulturbanause: CSS Container Queries mit @container
