jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis Container Query Snippet Generator

Genereer @container CSS regels voor componentgebaseerd responsive design.

Tool laden...

Wat is Container Query Snippet Generator?

Container queries stellen u in staat CSS-stijlen toe te passen op basis van de grootte van een bovenliggende container in plaats van de viewport. Dit verschilt van mediaquery's, die reageren op het browservenster. Voor herbruikbare componenten betekent container queries dat hetzelfde component correct kan worden weergegeven in een smalle zijbalk en een breed hoofdinhoudsgebied zonder stijlen te dupliceren.

Snel antwoord

Gebruik container queries om een element te stylen op basis van de grootte van de bovenliggende container in plaats van de viewport. Ze zijn het componentniveau-equivalent van mediaquery's en zijn handig voor herbruikbare widgetlay-outs.

Last updated: 2026-05-25

Beperkingen

  • Container queries vereisen Chrome 105+, Edge 105+, Firefox 110+ en Safari 16+. Oudere browsers negeren de functie volledig.
  • De container-name-eigenschap moet verwijzen naar een container-type-voorouder in de DOM. Elementen buiten de containerboom kunnen er geen query op uitvoeren.
  • Container query-eenheden (cqw, cqh, cqi, cqb, cqmin, cqmax) zijn alleen betekenisvol binnen een @container-blok en kunnen onverwachte waarden produceren buiten een @container-blok.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Stel een container-type en optionele container-name in voor het bovenliggende element dat de query-referentie zal zijn.
  2. Kies een breekpuntvoorwaarde zoals min-width, max-width of een inline-size-bereik.
  3. Schrijf de CSS-regels die van toepassing moeten zijn wanneer aan de voorwaarde wordt voldaan.
  4. Kopieer het gegenereerde @container-blok en plaats het in uw componentstylesheet.

Waarvoor je het kunt gebruiken

  • Een kaartcomponent laten overschakelen van horizontale naar verticale lay-out wanneer de container krimpt.
  • Een formulierrij bouwen die velden stapelt op smalle containers en ze inline plaatst op brede containers.
  • Een widget maken die het lettertype en de ruimte aanpast op basis van de containerbreedte, onafhankelijk van de viewport.

Gebruik

Praktische voorbeelden

Voorbeeld

Kaartcomponent in zijbalk en hoofdinhoud

Een herbruikbare kaart wordt geplaatst in zowel een smalle zijbalk als een brede hoofdkolom. Met container queries gebruikt de kaart een gestapelde lay-out in de zijbalk en een horizontale lay-out in de hoofdinhoud, allemaal vanuit een enkele componentklasse.

Voorbeeld

Formulierrij die zich aanpast aan beschikbare ruimte

Een formulier met naam-, e-mail- en telefoonvelden gebruikt een container query op de fieldset. Wanneer de container breder is dan 500px, staan de velden inline. Onder 500px stapelt elk veld naar een eigen regel.

Veelgemaakte fouten

  • Container queries toepassen op een element zonder container-type in te stellen op een bovenliggend element, waardoor er geen containercontext wordt gevestigd en de queries nooit worden toegepast.
  • Viewport-eenheden zoals vw of vh gebruiken in een container query, die nog steeds naar de viewport verwijzen in plaats van naar de container.
  • Volledig vertrouwen op container queries zonder een terugvallay-out, waardoor het component ongestyled blijft in browsers die container queries niet ondersteunen.

Verificatie

  1. Pas de grootte van het containerelement aan in DevTools en controleer of onderliggende elementen reageren op veranderingen in containergrootte, niet op viewportveranderingen.
  2. Controleer terugvalstijlen in niet-ondersteunde browsers door basisstijlen buiten het @container-blok in te stellen.

FAQ

Vragen over Container Query Snippet Generator

Welke browsers ondersteunen container queries?

Container queries worden ondersteund in alle moderne browsers vanaf Chrome 105, Firefox 110, Safari 16 en Edge 105. Zorg voor oudere browsers voor een terugvallay-out die werkt zonder @container-regels.

Wat is het verschil tussen inline-size en size voor container-type?

inline-size vestigt een query-container die reageert op alleen de inline-dimensie, wat breedte is in horizontale schrijfmodi. size vestigt een container die reageert op zowel breedte als hoogte, maar vereist contain: layout style op de container, wat het lay-outgedrag kan be锟絥vloeden.

Hoe verschillen container queries van media queries?

Media queries reageren op de viewportgrootte en globale browsercondities. Container queries reageren op de grootte van een bovenliggend containerelement. Dit betekent dat een component gestyled met container queries zich aanpast aan zijn container, ongeacht waar het wordt geplaatst -- in een brede hoofdkolom, een smalle zijbalk of een kaart raster -- zonder aparte media query-breekpunten voor elke lay-outcontext.

Wat gebeurt er als ik @container gebruik zonder container-type in te stellen op de ouder?

De @container-regel heeft geen effect en de opgenomen stijlen worden nooit toegepast. Elke container query vereist een voorouder-element met container-type ingesteld op inline-size, size of normal. De browser zoekt de voorouderketen af naar de dichtstbijzijnde containercontext. Als er geen wordt gevonden, faalt de query stilzwijgend.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool