Stijl voor groottebewustzijn

Overzicht

Met groottebewuste opmaak kunnen componenten hun indeling of uiterlijk wijzigen op basis van de beschikbare ruimte, in plaats van de grootte van het hele scherm. Dit is handig voor componenten zoals kaarten of navigatiebalken die in verschillende delen van een vormgeving kunnen worden geplaatst (zoals een smalle zijbalk of een breed hoofdgebied).

We raden je aan containerquery's te gebruiken, omdat componenten hierdoor echt modulair worden. Je hoeft niet te weten waar de component komt te staan of complexe mediaquery's te schrijven om elke mogelijke indeling te verwerken.

Implementatie

1. De container definiëren

VERPLICHT: Je moet de browser eerst vertellen welk element de container is die moet worden gemeten.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Stijlen toepassen op basis van containergrootte

Gebruik de regel @container om stijlen toe te passen als de container een bepaalde grootte bereikt.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Content voorwaardelijk tonen

Je kunt ook containerquery's gebruiken om extra details te verbergen of te tonen als er meer ruimte is.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Reservestrategieën

Voor browsers die geen containerquery's ondersteunen, kun je het beste een veilige standaardindeling gebruiken (zoals de gestapelde verticale indeling) en deze geleidelijk verbeteren met mediaquery's als de algemene schermgrootte dit toestaat.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

Zo krijgen gebruikers met oudere browsers nog steeds een bruikbare indeling, zelfs als deze niet perfect is aangepast aan elke specifieke containerbreedte.