Stile sensibile alle dimensioni

Panoramica

Lo stile basato sulle dimensioni consente ai componenti di modificare il layout o l'aspetto in base allo spazio disponibile, anziché alle dimensioni dell'intero schermo. Ciò è utile per componenti come schede o barre di navigazione che potrebbero essere posizionati in parti diverse di un layout (ad esempio una barra laterale stretta o un'area principale ampia).

Ti consigliamo di utilizzare le query container perché rendono i componenti veramente modulari. Non è necessario sapere dove verrà posizionato il componente o scrivere query supporti complesse per gestire ogni possibile layout.

Implementazione

1. Definisci il container

OBBLIGATORIO: devi prima indicare al browser quale elemento è il contenitore da misurare.

.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. Applica gli stili in base alle dimensioni del container

Utilizza la regola @container per applicare gli stili quando il contenitore raggiunge una determinata dimensione.

/* 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. Mostra i contenuti in modo condizionale

Puoi anche utilizzare le query container per nascondere o mostrare dettagli aggiuntivi quando c'è più spazio.

.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;
  }
}

Strategie di riserva

Per i browser che non supportano le query contenitore, l'approccio migliore è utilizzare un layout predefinito sicuro (come il layout verticale impilato) e migliorarlo progressivamente utilizzando le query supporti se le dimensioni generali dello schermo lo consentono.

/* 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;
    }
  }
}

In questo modo, gli utenti che utilizzano browser meno recenti possono comunque usufruire di un layout utilizzabile, anche se non si adatta perfettamente a ogni larghezza specifica del contenitore.