Feature Queries no CSS

Tempo de leitura: 3 minutos

Feature Queries no CSS: O CSS responsivo é a arte de adaptar o design a diferentes contextos. As Media Queries nos permitem aplicar estilos com base em características do dispositivo (como largura e altura), mas também podem verificar recursos de interação e preferências.

Há duas regras cruciais para o CSS condicional, e é importante distingui-las:

Features de Mídia (@media): Verificam as capacidades do dispositivo/viewport.
Feature Queries de Suporte (@supports): Verificam o suporte do navegador a uma sintaxe CSS.

1. Features de Mídia (`@media (feature: value)`)

As Features de Mídia são as condições que você aninha na regra @media. Elas verificam características do ambiente de visualização (tela, resolução, orientação, etc.).

A sintaxe básica é: @media ([tipo de mídia] and) ([feature: value]) { ... }.

Feature de Mídia	Função	Exemplo de Uso
`(orientation)`	Verifica se a tela está em modo paisagem (horizontal) ou retrato (vertical).	`@media (orientation: landscape)`
`(hover)`	Verifica se o dispositivo suporta a capacidade de hover (ex: mouse). Essencial para aplicar efeitos interativos apenas onde funcionam.	`@media (hover: hover)`
`(prefers-color-scheme)`	Verifica se o usuário ativou o Modo Escuro em seu sistema operacional.	`@media (prefers-color-scheme: dark)`
`(pointer)`	Verifica o tipo de ponteiro primário do usuário (ex: fino como mouse, ou grosso como toque).	`@media (pointer: coarse)`
`(resolution)`	Verifica a densidade de pixels (útil para imagens Retina).	`@media (resolution: 2dppx)`

Exemplo de Adaptação à Interação:

CSS

/* Aplicar transformações de hover apenas se o dispositivo tiver suporte a mouse */
@media (hover: hover) {
  .botao:hover {
    transform: scale(1.05);
  }
}

2. Feature Queries de Suporte (`@supports`)

A regra @supports é a verdadeira Feature Query de CSS e não se preocupa com o dispositivo, mas sim com o suporte do navegador a uma determinada declaração CSS.

Isso é a base do Aprimoramento Progressivo (Progressive Enhancement): forneça um layout simples (fallback) para navegadores antigos e, se o navegador suportar a nova sintaxe, aplique os estilos avançados.

Sintaxe e Uso para Fallback

Você usa @supports para verificar se o navegador entende uma declaração de propriedade/valor (ex: display: grid ou a função minmax).

CSS

/* 1. Estilos de Fallback (aplicados a todos os navegadores) */
.layout {
  float: left; /* Layout antigo baseado em float */
  width: 33.33%;
}

/* 2. Estilos Avançados (aplicados SOMENTE se Grid for suportado) */
@supports (display: grid) {
  /* O navegador suporta Grid. Desfazemos o float e aplicamos o Grid. */
  .layout-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .layout {
    float: none; /* Desativa a regra de fallback */
    width: auto;
  }
}

Operadores Lógicos

É possível combinar condições usando and, or e not:

Operador	Função	Exemplo
`and`	Deve suportar AMBAS as declarações.	`@supports (display: flex) and (gap: 10px)`
`or`	Deve suportar PELO MENOS UMA das declarações.	`@supports (position: sticky) or (-webkit-position: sticky)`
`not`	Aplica estilos SE NÃO suportar a declaração. Útil para aplicar fallbacks limpos.	`@supports not (display: grid)`

3. Combinação de Regras

Você pode aninhar as regras para criar verificações muito específicas:

CSS

/* Aplica um layout Grid SOMENTE em telas grandes E SE o navegador suportar CSS Grid. */
@media (min-width: 1024px) {
  @supports (display: grid) {
    .container {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 20px;
    }
  }
}

✅ Conclusão Feature Queries no CSS

O CSS Condicional é uma ferramenta de alta engenharia. Use as Features de Mídia (@media) para adaptar o Design à Capacidade do Dispositivo (Modo Escuro, mouse/toque). Use as Feature Queries de Suporte (@supports) para garantir que seus layouts modernos, baseados em Grid e Flexbox, sejam usados apenas quando o Navegador os Suporta, garantindo robustez e compatibilidade.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: