M

MLOG

Dansk

Mestr CSS container queries for ægte responsivt design. Lær at tilpasse layouts baseret på container-størrelse, ikke viewporten, for en perfekt brugeroplevelse.

Opnå Responsivt Design: En Omfattende Guide til CSS Container Queries

I årevis har responsivt webdesign primært baseret sig på media queries, som gør det muligt for websteder at tilpasse deres layout og styling baseret på viewportens bredde og højde. Selvom denne tilgang er effektiv, kan den undertiden føles begrænsende, især når man arbejder med komplekse komponenter, der skal tilpasse sig uafhængigt af den samlede skærmstørrelse. Her kommer CSS Container Queries ind i billedet – et kraftfuldt nyt værktøj, der giver elementer mulighed for at reagere på størrelsen af deres indeholdende element, snarere end viewporten selv. Dette åbner op for et nyt niveau af fleksibilitet og præcision i responsivt design.

Hvad er CSS Container Queries?

CSS Container Queries er en CSS-funktion, der giver dig mulighed for at anvende stilarter på et element baseret på størrelsen eller andre egenskaber af dets overordnede container. I modsætning til media queries, der retter sig mod viewporten, retter container queries sig mod et specifikt element. Dette gør det muligt at skabe komponenter, der tilpasser deres styling baseret på den tilgængelige plads i deres container, uanset skærmstørrelsen.

Forestil dig en kortkomponent, der vises forskelligt, afhængigt af om den er placeret i en smal sidebjælke eller et bredt hovedindholdsområde. Med media queries ville du måske skulle justere kortets styling baseret på skærmstørrelsen, hvilket kunne føre til uoverensstemmelser. Med container queries kan du definere stilarter, der gælder specifikt, når kortets container når en bestemt bredde, hvilket sikrer en ensartet og responsiv oplevelse på tværs af forskellige layouts.

Hvorfor bruge Container Queries?

Container queries tilbyder flere fordele i forhold til traditionelle media queries:

Sådan implementeres CSS Container Queries

Implementering af CSS container queries involverer to hovedtrin: definition af containeren og skrivning af forespørgslerne.

1. Definition af Containeren

Først skal du udpege et element som en *container*. Dette gøres ved hjælp af container-type-egenskaben. Der er to hovedværdier for container-type:

Du kan også bruge container-name til at give din container et navn, hvilket kan være nyttigt til at målrette specifikke containere i dine forespørgsler. For eksempel:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

Denne kode erklærer elementet med klassen .card-container som en container. Vi specificerer inline-size for at tillade forespørgsler baseret på containerens bredde. Vi har også givet den navnet cardContainer.

2. Skrivning af Container Queries

Når du har defineret containeren, kan du skrive container queries ved hjælp af @container at-reglen. Syntaksen ligner media queries:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Denne forespørgsel anvender stilarterne inden for de krøllede parenteser, kun når containeren med navnet cardContainer har en minimumsbredde på 400px. Den målretter .card-elementet (formodentlig et barn af .card-container) og justerer dets layout. Hvis containeren er smallere end 400px, vil disse stilarter ikke blive anvendt.

Kortform: Du kan også bruge kortformen af `@container`-reglen, når du ikke behøver at specificere et container-navn:

@container (min-width: 400px) {
  /* Stilarter, der skal anvendes, når containeren er mindst 400px bred */
}

Praktiske Eksempler på Container Queries

Lad os se på nogle praktiske eksempler på, hvordan du kan bruge container queries til at skabe mere responsive og tilpasningsdygtige layouts.

Eksempel 1: Kortkomponent

Dette eksempel viser, hvordan man tilpasser en kortkomponent baseret på dens containers bredde. Kortet vil vise sit indhold i en enkelt kolonne, når containeren er smal, og i to kolonner, når containeren er bredere.

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Kortbillede" class="card-image">
    <div class="card-content">
      <h3>Kortets Titel</h3>
      <p>Dette er noget eksempelindhold til kortet.</p>
      <a href="#">Lær Mere</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

I dette eksempel er .card-container erklæret som container. Når containerens bredde er mindre end 500px, vil .card bruge et kolonne-layout, hvor billede og indhold stables lodret. Når containerens bredde er 500px eller mere, skifter .card til et række-layout, hvor billede og indhold vises side om side.

Eksempel 2: Navigationsmenu

Dette eksempel demonstrerer, hvordan man tilpasser en navigationsmenu baseret på den tilgængelige plads. Når containeren er smal, vil menupunkterne blive vist i en dropdown-menu. Når containeren er bredere, vil menupunkterne blive vist horisontalt.

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">Hjem</a></li>
    <li><a href="#">Om os</a></li>
    <li><a href="#">Tjenester</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

I dette eksempel er .nav-container erklæret som container. Når containerens bredde er mindre end 600px, vil menupunkterne blive vist som en lodret liste. Når containerens bredde er 600px eller mere, vil menupunkterne blive vist horisontalt ved hjælp af flexbox.

Eksempel 3: Produktliste

En e-handels produktliste kan tilpasse sit layout baseret på containerens bredde. I mindre containere kan en simpel liste med produktbillede, titel og pris fungere godt. Efterhånden som containeren vokser, kan yderligere oplysninger som en kort beskrivelse eller kundeanmeldelser tilføjes for at forbedre præsentationen. Dette giver også en mere detaljeret kontrol end udelukkende at målrette viewporten.

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="Produkt 1">
    <h3>Produktnavn 1</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Produkt 2">
    <h3>Produktnavn 2</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Denne CSS-kode etablerer først `product-listing-container` som en container. For smalle containere (mindre end 400px) optager hvert produkt 100% af bredden. Når containeren vokser ud over 400px, arrangeres produkterne i to kolonner. Ud over 768px vises produkterne i tre kolonner.

Browserunderstøttelse og Polyfills

Container queries har god browserunderstøttelse i moderne browsere, herunder Chrome, Firefox, Safari og Edge. Ældre browsere understøtter dem dog muligvis ikke indbygget.

For at understøtte ældre browsere kan du bruge en polyfill. En populær mulighed er container-query-polyfill, som kan findes på npm og GitHub. Polyfills udfylder hullet for ikke-understøttede funktioner, så du kan bruge container queries selv i ældre browsere.

Bedste Praksis for Brug af Container Queries

Her er nogle bedste praksis, du skal huske på, når du bruger container queries:

Almindelige Faldgruber og Hvordan man Undgår Dem

Container Queries vs. Media Queries: Valg af det Rette Værktøj

Selvom container queries tilbyder betydelige fordele, har media queries stadig deres plads i responsivt design. Her er en sammenligning for at hjælpe dig med at beslutte, hvilket værktøj der er bedst til forskellige situationer:

Funktion Container Queries Media Queries
Mål Container-størrelse Viewport-størrelse
Responsivitet Komponentbaseret Sidebaseret
Fleksibilitet Høj Mellem
Kodeduplikering Lavere Højere
Anvendelsestilfælde Genanvendelige komponenter, komplekse layouts Globale layoutjusteringer, grundlæggende responsivitet

Generelt set skal du bruge container queries, når du har brug for at tilpasse stylingen af en komponent baseret på dens containers størrelse, og bruge media queries, når du skal foretage globale layoutjusteringer baseret på viewportens størrelse. Ofte er en kombination af begge teknikker den bedste tilgang.

Fremtiden for Responsivt Design med Container Queries

Container queries repræsenterer et betydeligt fremskridt inden for responsivt design og tilbyder større fleksibilitet og kontrol over, hvordan elementer tilpasser sig forskellige kontekster. I takt med at browserunderstøttelsen fortsat forbedres, vil container queries sandsynligvis blive et stadig vigtigere værktøj for webudviklere. De giver designere og udviklere mulighed for at skabe virkelig adaptive og brugervenlige websteder, der giver en problemfri oplevelse på tværs af alle enheder og skærmstørrelser.

Konklusion

CSS Container Queries er en kraftfuld tilføjelse til værktøjskassen for responsivt design. Ved at lade elementer reagere på størrelsen af deres indeholdende element, muliggør de ægte komponentbaseret responsivitet og åbner op for nye niveauer af fleksibilitet og præcision i webdesign. Ved at forstå, hvordan man implementerer og bruger container queries effektivt, kan du skabe mere tilpasningsdygtige, vedligeholdelsesvenlige og brugervenlige websteder, der giver en bedre oplevelse for alle.

Ressourcer