Estilo que considera o tamanho

Visão geral

Com o estilo que considera o tamanho, os componentes podem mudar o layout ou a aparência com base no espaço disponível, em vez do tamanho de toda a tela. Isso é útil para componentes como cards ou barras de navegação que podem ser colocados em diferentes partes de um layout (como uma barra lateral estreita ou uma área principal ampla).

Recomendamos o uso de consultas de contêiner porque elas tornam os componentes verdadeiramente modulares. Não é necessário saber onde o componente vai ficar ou escrever consultas de mídia complexas para lidar com todos os layouts possíveis.

Implementação

1. Definir o contêiner

OBRIGATÓRIO: primeiro, você precisa informar ao navegador qual elemento é o contêiner a ser medido.

.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. Aplicar estilos com base no tamanho do contêiner

Use a regra @container para aplicar estilos quando o contêiner atingir um determinado tamanho.

/* 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. Mostrar conteúdo condicionalmente

Você também pode usar consultas de contêiner para ocultar ou mostrar detalhes extras quando houver mais espaço.

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

Estratégias de fallback

Para navegadores que não oferecem suporte a consultas de contêiner, a melhor abordagem é usar um layout padrão seguro (como o layout vertical empilhado) e melhorá-lo progressivamente usando consultas de mídia, se o tamanho geral da tela permitir.

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

Isso garante que os usuários de navegadores mais antigos ainda tenham um layout utilizável, mesmo que ele não se adapte perfeitamente a cada largura de contêiner específica.