Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Explore as CSS Container Queries, a próxima evolução no design responsivo. Aprenda a criar componentes adaptáveis com base no tamanho do contêiner, e não apenas no tamanho da viewport.
O design responsivo tem sido uma pedra angular do desenvolvimento web por mais de uma década. Tradicionalmente, temos dependido de media queries para adaptar nossos layouts com base no tamanho da viewport. No entanto, essa abordagem pode, por vezes, parecer limitante, especialmente ao lidar com designs complexos, baseados em componentes. Apresentamos as CSS Container Queries – um novo e poderoso recurso que permite que os componentes se adaptem com base no tamanho do seu elemento contêiner, e não apenas na viewport.
As container queries são uma virada de jogo porque habilitam o design responsivo baseado em elementos. Em vez de perguntar "Qual é o tamanho da tela?", você pode perguntar "Quanto espaço este componente tem disponível?" Isso abre um mundo de possibilidades para criar componentes verdadeiramente reutilizáveis e adaptáveis.
Pense em um componente de cartão que pode aparecer em vários contextos: uma barra lateral estreita, uma seção hero ampla ou uma grade de várias colunas. Com media queries, você precisaria escrever regras específicas para cada um desses cenários com base na largura da viewport. Com container queries, o cartão pode ajustar de forma inteligente seu layout e estilo com base nas dimensões de seu contêiner pai, independentemente do tamanho geral da tela.
As container queries oferecem várias vantagens importantes sobre as media queries tradicionais:
Vamos mergulhar nos aspectos práticos do uso de container queries. O primeiro passo é declarar um contêiner. Você pode fazer isso usando a propriedade container-type no elemento pai:
A propriedade container-type aceita vários valores:
size: As container queries responderão às dimensões inline e de bloco do contêiner.inline-size: As container queries responderão apenas à dimensão inline (largura em modos de escrita horizontal) do contêiner. Esta é a opção mais comum e, frequentemente, a mais útil.block-size: As container queries responderão apenas à dimensão de bloco (altura em modos de escrita horizontal) do contêiner.normal: O elemento não é um contêiner de consulta. Este é o valor padrão.style: As container queries responderão a consultas de estilo e consultas de nome de contêiner (abordadas posteriormente), permitindo que você consulte propriedades personalizadas definidas no contêiner.Aqui está um exemplo de definição de um contêiner que responde ao seu tamanho inline:
.card-container {
container-type: inline-size;
}
Você também pode usar a propriedade abreviada container para especificar tanto o container-type quanto o container-name (que discutiremos mais tarde) em uma única declaração:
.card-container {
container: card / inline-size;
}
Neste caso, 'card' é o nome do contêiner.
Depois de definir um contêiner, você pode usar a regra @container para escrever suas consultas. A sintaxe é semelhante às media queries, mas, em vez de segmentar as dimensões da viewport, você está segmentando as dimensões do contêiner:
@container card (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
Neste exemplo, estamos segmentando o contêiner "card" e aplicando estilos aos elementos .card, .card__image e .card__content quando a largura do contêiner é de pelo menos 400px. Observe o `card` antes de `(min-width: 400px)`. Isso é crucial quando você nomeou seu contêiner usando `container-name` ou a propriedade abreviada `container`.
Se você não nomeou seu contêiner, pode omitir o nome do contêiner:
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
}
.card__content {
width: 50%;
}
}
Você pode usar a mesma gama de recursos de mídia que estão disponíveis nas media queries, como min-width, max-width, min-height, max-height e orientation.
Nomear seus contêineres pode ser útil, especialmente ao lidar com contêineres aninhados ou layouts complexos. Você pode atribuir um nome a um contêiner usando a propriedade container-name:
.card-container {
container-name: card;
container-type: inline-size;
}
Então, em suas container queries, você pode segmentar o contêiner pelo nome:
@container card (min-width: 400px) {
/* Estilos para o contêiner 'card' */
}
Container Style Queries permitem que você reaja ao estilo do seu contêiner em vez de seu tamanho. Isso é particularmente poderoso quando combinado com propriedades personalizadas. Primeiro, você deve definir seu contêiner com container-type: style:
.component-container {
container-type: style;
}
Então você pode usar @container style(--theme: dark) para consultar o valor da propriedade personalizada --theme:
.component-container {
--theme: light;
}
@container style(--theme: dark) {
.component {
background-color: black;
color: white;
}
}
Isso permite que seus componentes se adaptem com base em uma configuração definida por meio de CSS em vez de tamanho da viewport. Isso abre grandes possibilidades para temas e estilos dinâmicos.
Vamos dar uma olhada em alguns exemplos concretos de como as container queries podem ser usadas em cenários do mundo real:
Imagine um componente de cartão que exibe informações sobre um produto. Em um contêiner estreito, podemos querer empilhar a imagem e o conteúdo verticalmente. Em um contêiner mais largo, podemos exibi-los lado a lado.
HTML:
CSS:
.card-container {
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 16px;
}
.card__image {
width: 100%;
margin-bottom: 16px;
}
.card__content {
width: 100%;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 50%;
margin-bottom: 0;
}
.card__content {
width: 50%;
}
}
Neste exemplo, o cartão exibirá inicialmente a imagem e o conteúdo empilhados verticalmente. Quando a largura do contêiner atingir 400px, o cartão mudará para um layout horizontal.
Considere um menu de navegação que precisa se adaptar com base no espaço disponível. Em um contêiner estreito (por exemplo, uma barra lateral móvel), podemos querer exibir os itens do menu em uma lista vertical. Em um contêiner mais largo (por exemplo, um cabeçalho de desktop), podemos exibi-los horizontalmente.
HTML:
CSS:
.nav-container {
container-type: inline-size;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav__item {
margin-bottom: 8px;
}
.nav__item a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
@container (min-width: 600px) {
.nav {
display: flex;
}
.nav__item {
margin-right: 16px;
margin-bottom: 0;
}
.nav__item a {
display: inline-block;
}
}
Neste exemplo, o menu de navegação exibirá inicialmente os itens em uma lista vertical. Quando a largura do contêiner atingir 600px, o menu mudará para um layout horizontal.
Imagine um layout de artigo que precisa se adaptar dependendo de onde é colocado. Se em uma pequena seção de visualização, a imagem deve estar acima do texto. Se for o artigo principal, a imagem pode estar ao lado.
HTML
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
CSS
.article-container {
container-type: inline-size;
}
.article {
display: flex;
flex-direction: column;
}
.article-image {
width: 100%;
margin-bottom: 10px;
}
.article-content {
width: 100%;
}
@container (min-width: 768px) {
.article {
flex-direction: row;
}
.article-image {
width: 40%;
margin-right: 20px;
margin-bottom: 0;
}
.article-content {
width: 60%;
}
}
O suporte do navegador para container queries agora é excelente nos navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. É importante verificar Can I Use para obter as informações mais recentes sobre o suporte do navegador, pois os recursos e os detalhes de implementação podem evoluir.
Embora as container queries ofereçam uma alternativa poderosa às media queries, é importante entender quando cada abordagem é mais apropriada.
Em muitos casos, você provavelmente usará uma combinação de media queries e container queries. Use media queries para estabelecer o layout geral do seu aplicativo e, em seguida, use container queries para ajustar a aparência e o comportamento de componentes individuais dentro desse layout.
As CSS Container Queries representam um passo significativo na evolução do design responsivo. Ao habilitar a responsividade baseada em elementos, elas capacitam os desenvolvedores a criar componentes mais flexíveis, reutilizáveis e de fácil manutenção. À medida que o suporte do navegador continua a melhorar, as container queries estão prestes a se tornar uma ferramenta essencial no arsenal de todo desenvolvedor web.
Ao implementar container queries para um público global, considere o seguinte:
inline-start e inline-end em vez de propriedades físicas como left e right.em, rem) para garantir que seu texto seja dimensionado adequadamente.CSS Container Queries são uma ferramenta poderosa para construir aplicações web verdadeiramente responsivas e adaptáveis. Ao abraçar o design responsivo baseado em elementos, você pode criar componentes que se adaptam perfeitamente a diferentes contextos, simplificar seu código e melhorar a experiência geral do usuário. À medida que o suporte do navegador continua a crescer, as container queries estão prestes a se tornar uma parte fundamental do desenvolvimento web moderno. Abrace esta tecnologia, experimente suas capacidades e desbloqueie um novo nível de flexibilidade em seus designs responsivos. Esta abordagem permite uma melhor reutilização, manutenção e um processo de design mais intuitivo dos componentes, tornando-se um trunfo inestimável para desenvolvedores front-end em todo o mundo. A transição para container queries incentiva uma abordagem mais centrada no componente para o design, resultando em experiências web mais robustas e adaptáveis para usuários em todo o mundo.