CSS Container Query-enheter: En guide till elementrelativ storleksändring för responsiv design

Responsiv webbdesign har utvecklats avsevärt under åren. Medan mediafrågor (media queries), baserade på visningsområdets storlek, förblir en hörnsten, erbjuder CSS Container Queries ett mer granulärt och komponentfokuserat tillvägagångssätt. Container Queries gör det möjligt att tillämpa stilar baserat på storleken på ett omslutande element, snarare än hela visningsområdet. Inom Container Queries tar Container Query-enheter denna granularitet ännu längre, vilket låter dig storleksanpassa element i förhållande till deras container.

Vad är Container Query-enheter?

Container Query-enheter (CQ-enheter) är en uppsättning CSS-enheter som representerar en procentandel av storleken på ett container-element. Dessa enheter ger ett kraftfullt sätt att skapa komponenter som anpassar sig flytande till olika containerstorlekar, oavsett den övergripande visningsområdesstorleken. Tänk dig en navigeringsmeny som anpassar sin layout beroende på det tillgängliga utrymmet i en sidofält, eller ett produktkort som justerar sin teckenstorlek och bildstorlek baserat på bredden på sin container i en rutnätslayout. CQ-enheter gör dessa typer av adaptiva designer betydligt enklare att implementera.

Till skillnad från visningsområdesenheter (vw, vh, vmin, vmax), som är relativa till visningsområdet, är container query-enheter relativa till query-containern. Detta innebär att samma komponent kan renderas olika i olika delar av din applikation och anpassa sig till de specifika begränsningarna för varje container.

De grundläggande Container Query-enheterna

Det finns sex primära container query-enheter, som speglar beteendet hos visningsområdesenheter:

• cqw: 1 % av bredden på query-containern.
• cqh: 1 % av höjden på query-containern.
• cqi: 1 % av inline-storleken på query-containern. Inline-storleken motsvarar bredd i horisontella skrivlägen (som engelska) och höjd i vertikala skrivlägen (som traditionell mongoliska).
• cqb: 1 % av block-storleken på query-containern. Block-storleken motsvarar höjd i horisontella skrivlägen och bredd i vertikala skrivlägen.
• cqmin: 1 % av den mindre dimensionen (antingen inline-storlek eller block-storlek) av query-containern.
• cqmax: 1 % av den större dimensionen (antingen inline-storlek eller block-storlek) av query-containern.

Det är viktigt att förstå skillnaden mellan cqw/cqh och cqi/cqb, särskilt när man arbetar med internationalisering (i18n) och lokalisering (l10n) eftersom skrivlägen kan påverka de fysiska dimensionerna dessa enheter refererar till. cqi och cqb är utformade för att vara mer logiska och respektera skrivläget för dokumentet eller containern.

Att sätta upp Container Queries

Innan du kan använda container query-enheter måste du utse ett element som en query-container. Detta görs med CSS-egenskapen container-type.

Det finns två huvudsakliga värden för container-type:

• size: Containern genererar en query-container och beräknar containerstorleken baserat på inline- och block-dimensionerna. Detta är det vanligaste värdet för att använda CQ-enheter.
• inline-size: Containern genererar en query-container, men endast inline-storleken används för queries. Användbart när du bara bryr dig om bredden i horisontella skrivlägen.

Du kan också använda kortegenskapen container för att ställa in både container-type och container-name (vilket låter dig rikta in dig på specifika containrar):

            .container {
  container: my-container size;
}

            

              
                Copy
              
            
          

I det här exemplet har vi skapat en query-container med namnet "my-container". Du kan sedan rikta in dig på denna container i din CSS med hjälp av @container at-regeln:

            @container my-container (min-width: 300px) {
  /* Stilar att tillämpa när containerns bredd är minst 300px */
}

            

              
                Copy
              
            
          

Praktiska exempel på Container Query-enheter

Låt oss utforska några praktiska scenarier där container query-enheter kan avsevärt förbättra ditt arbetsflöde för responsiv design.

Exempel 1: Adaptivt produktkort

Föreställ dig ett produktkort som behöver anpassa sin layout baserat på det tillgängliga utrymmet. Vi vill att teckenstorleken och bildstorleken ska skalas proportionellt mot containerns bredd.

            .product-card {
  container-type: size;
  width: 100%;
  border: 1px solid #ccc;
  padding: 16px;
}

.product-card img {
  width: 40cqw; /* 40 % av containerns bredd */
  height: auto;
}

.product-card h2 {
  font-size: 5cqw; /* 5 % av containerns bredd */
  margin-bottom: 8px;
}

.product-card p {
  font-size: 3cqw; /* 3 % av containerns bredd */
}

            

              
                Copy
              
            
          

I det här exemplet definieras bildens bredd, rubrikens teckenstorlek och styckets teckenstorlek alla med cqw. När produktkortets container ändrar storlek kommer dessa element att skalas proportionellt och bibehålla ett konsekvent visuellt utseende.

Global relevans: Detta exempel är universellt tillämpligt eftersom produktkort är ett vanligt element på e-handelsplattformar över hela världen. Oavsett om du säljer varor i Nordamerika, Europa, Asien eller Afrika är det avgörande att anpassa produktkort responsivt.

Exempel 2: Dynamisk navigeringsmeny

Tänk dig en navigeringsmeny som behöver justera sin layout beroende på om den är i huvud-headern eller i ett mindre sidofält. Vi kan använda container queries för att växla mellan en horisontell och en vertikal layout.

            .navigation {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap; /* Tillåt att objekt radbryts vid behov */
  gap: 10px;
}

.navigation a {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  white-space: nowrap; /* Förhindra att texten radbryts */
}

@container (max-width: 400px) {
  .navigation {
    flex-direction: column;
    align-items: stretch;
  }

  .navigation a {
    display: block;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

I det här fallet använder vi en container query med ett max-width-villkor. När containerns bredd är mindre än eller lika med 400px, växlar navigeringsmenyn till en vertikal layout. Notera att vi bara bryr oss om containerns inline-storlek, därav `container-type: inline-size;`

Global relevans: Navigeringsmenyer är en grundläggande del av en webbplats användbarhet. Behovet av responsiv navigering är universellt, oavsett målgrupp eller geografisk plats.

Exempel 3: Anpassa en datatabell

Datatabeller är ökända för att vara svåra att göra responsiva. Container queries, i kombination med CQ-enheter, kan hjälpa oss att skapa mer flexibla tabeller som anpassar sig till mindre containrar.

            .data-table-container {
  container-type: size;
  overflow-x: auto; /* Aktivera horisontell rullning på små skärmar */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 3cqw; /* Anpassa teckenstorlek till containerns bredd */
  white-space: nowrap; /* Förhindra radbrytningar */
}

@container (max-width: 600px) {
  .data-table th, .data-table td {
    font-size: 4cqw; /* Något större teckenstorlek på mindre containrar */
  }
}

            

              
                Copy
              
            
          

Här använder vi cqw för att skala teckenstorleken inuti tabellcellerna. Vi aktiverar också horisontell rullning på containern med `overflow-x: auto` så att tabellen förblir användbar på mindre skärmar. Container queryn justerar teckenstorleken något för ännu bättre läsbarhet i smala containrar.

Global relevans: Datatabeller används i stor utsträckning i olika branscher världen över, från finans och sjukvård till utbildning och logistik. En responsiv datatabell säkerställer att viktig information är tillgänglig på olika enheter och skärmstorlekar, vilket är avgörande för en global publik.

Exempel 4: Använda cqmin och cqmax för konsekventa proportioner

Anta att du vill skapa ett kvadratiskt element inuti en container, där sidlängden alltid är en procentandel av den mindre dimensionen av containern.

            .square-container {
  container-type: size;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.square {
  width: 30cqmin; /* 30 % av den mindre dimensionen */
  height: 30cqmin; /* 30 % av den mindre dimensionen */
  background-color: lightblue;
}

            

              
                Copy
              
            
          

I det här exemplet kommer .square-elementet alltid att vara en kvadrat, och dess sidlängd kommer att vara 30 % av den mindre dimensionen (i detta fall höjden) av .square-container. Om containerns bredd var mindre än dess höjd skulle kvadratens sidlängd istället baseras på bredden. Detta är särskilt användbart för att bibehålla bildförhållanden responsivt.

Global relevans: Att bibehålla bildförhållanden är viktigt för olika visuella element, såsom logotyper, profilbilder eller ikoner. Att använda cqmin säkerställer konsekvens över olika containrar, vilket är viktigt för en sammanhängande varumärkesupplevelse för användare över hela världen.

Webbläsarstöd och polyfills

I slutet av 2023 är webbläsarstödet för container queries och container query-enheter utmärkt i moderna webbläsare som Chrome, Firefox, Safari och Edge. Om du behöver stödja äldre webbläsare kan du dock överväga att använda en polyfill. Flera polyfills finns tillgängliga som kan ge container query-funktionalitet till äldre webbläsare, även om prestandan kan variera.

Fördelar med att använda Container Query-enheter

• Förbättrad återanvändbarhet av komponenter: Komponenter blir mer fristående och anpassningsbara, eftersom deras stilar är relativa till deras container, inte hela visningsområdet.
• Mer granulär kontroll: Container queries erbjuder mer exakt kontroll över styling, vilket gör att du kan rikta in dig på specifika komponenter baserat på deras individuella kontext.
• Förenklad responsiv design: CQ-enheter förenklar komplexa responsiva layouter genom att låta dig definiera stilar som skalar proportionellt mot containerns storlek.
• Förbättrad kodunderhållbarhet: Komponentbaserad styling gör din CSS mer organiserad och lättare att underhålla.
• Bättre prestanda: I vissa fall kan container queries leda till bättre prestanda jämfört med komplexa media query-uppsättningar, eftersom webbläsaren bara behöver utvärdera queries för den specifika containern, inte hela visningsområdet.

Utmaningar och att tänka på

• Webbläsarstöd: Även om webbläsarstödet är bra, testa alltid dina designer noggrant i olika webbläsare och enheter, särskilt om du behöver stödja äldre versioner.
• Prestanda: Att överanvända container queries eller skapa alltför komplexa queries kan potentiellt påverka prestandan. Profilera din kod för att identifiera eventuella prestandaflaskhalsar.
• Komplexitet: Container queries kan göra din CSS mer komplex, särskilt när du hanterar nästlade containrar. Korrekt planering och organisation är avgörande.
• Förståelse för skrivlägen: Kom ihåg skillnaden mellan `cqw`/`cqh` och `cqi`/`cqb`, särskilt när du hanterar flerspråkiga webbplatser som använder olika skrivlägen.

Bästa praxis för att använda Container Query-enheter

• Börja med ett komponentbaserat tillvägagångssätt: Designa ditt användargränssnitt som en samling återanvändbara komponenter.
• Använd Container Queries sparsamt: Överanvänd inte container queries om enkla media queries räcker.
• Håll queries fokuserade: Håll dina container queries specifika och riktade.
• Testa noggrant: Testa dina designer i olika webbläsare, enheter och containerstorlekar.
• Dokumentera din kod: Dokumentera tydligt dina container queries och resonemanget bakom dem.
• Tänk på tillgänglighet: Se till att dina responsiva designer är tillgängliga för användare med funktionsnedsättningar, oavsett containerstorlek.

Slutsats

CSS Container Query-enheter erbjuder ett kraftfullt och flexibelt sätt att skapa verkligt responsiva designer. Genom att låta dig stilsätta element i förhållande till deras containrar, gör CQ-enheter det möjligt för dig att bygga mer återanvändbara, underhållbara och anpassningsbara komponenter. Även om det finns några utmaningar att tänka på, överväger fördelarna med att använda container queries och CQ-enheter vida nackdelarna, särskilt för komplexa och komponentdrivna webbapplikationer. I takt med att webbläsarstödet fortsätter att förbättras, är container queries på väg att bli ett oumbärligt verktyg för front-end-utvecklare världen över. Omfamna kraften i elementrelativ storleksändring och lås upp en ny nivå av responsiva designmöjligheter för dina projekt.