Blog fellyph cintra - nova sintaxe para media queries jpg

Nova sintaxe para media queries

As media queries receberam uma atualização que as torna mais claras e fáceis de usar! Se você já se deparou com a sintaxe complexa das media queries e sentiu-se confuso com min-width ou max-width, essa novidade é para você.

Atualmente media query mais utilizada é a que define regras de acordo o tamanho máximo ou mínimo da tela. Na versão 16.4 do iOS foi incluído o suporte para o novo formato de sintaxe utilizando sinais matemáticos como <= e >=, assim facilitando a vida de quem sempre parava para conferir o formato antigo.

suporte dos navegardores a media queries

Com o recurso suportado por 89% dos navegadores contando os principais navegadores do mercado, podemos usar com segurança a nova sintaxe.

Como funciona uma media query?

Uma media query CSS permite aplicar estilos específicos a diferentes tipos de dispositivos e tamanhos de tela. Ela funciona como uma pergunta que o navegador faz ao dispositivo: “Você se encaixa nesta descrição?”. Se a resposta for “sim”, os estilos dentro da “media query” são aplicados.

Estrutura tradicional de media queries
Estrutura tradicional

Por exemplo, você pode criar uma “media query” para telas menores que 600px de largura. Se um usuário acessa o seu site num celular, a “media query” será ativada e os estilos específicos para dispositivos móveis serão aplicados. Isso garante que o seu site tenha uma boa aparência em qualquer dispositivo, independentemente do tamanho da tela.

A media query não se preocupa com o tipo do dispositivo, mas com a regra baseada no tamanho da tela. Para usar “media queries”, você precisa usar a regra “@media” no seu CSS. Dentro da regra, você especifica o tipo de dispositivo atualmente a media query aceita três tipos:

  • all: para todos os tipos de mídia
  • print: atende a impressoras e dispositivos destinados a reproduzir uma exibição impressa, como um navegador da Web mostrando um documento em “Visualização de impressão”.
  • screen: para todos os dispositivos que não tem uma intenção de imprimir.

Além das características que podem ser diversas, a mais comum é o tamanho da tela, mas podemos aplicar para densidade de pixeis, suporte a cores ou modo do display. Depois disso, você pode adicionar os estilos que deseja aplicar.

Compreendendo a mudança de sintaxe das media queries

A nova sintaxe visa simplificar a definição de regras conforme o tamanho da tela. A principal mudança é a substituição de valores como max-width por operadores lógicos como and e or. Isso torna o código mais intuitivo e legível.

@media (max-width: 768px) {
  /* Regras para dispositivos móveis */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Regras para tablets */
}

@media (min-width: 1025px) {
  /* Regras para desktops */
}
Code language: CSS (css)

Com a nova sintaxe, você pode escrever:

@media (min-width: 0px) and (max-width: 768px) {
  /* Regras para dispositivos móveis */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Regras para tablets */
}

@media (min-width: 1025px) {
  /* Regras para desktops */
}

Code language: CSS (css)
Nova estrutura de media queries
Nova estrutura

Benefícios da Nova Sintaxe

Ambas soluções ainda continuam a funcionar, mas com essa nova sintaxe temos os seguintes benefícios.

  • Maior clareza: O código se torna mais fácil de entender e interpretar, facilitando a manutenção e o desenvolvimento de websites responsivos.
  • Menos código: A nova sintaxe permite escrever regras de forma mais concisa, reduzindo a quantidade de código necessária.
  • Melhor legibilidade: O código fica mais organizado e legível, facilitando a colaboração entre desenvolvedores.

Conclusão

Com iniciativas como interop, o suporte a novos recursos nos navegadores ganham suporte muito mais rápido do que em épocas passadas. A nova sintaxe para media queries é uma excelente ferramenta para simplificar a criação de websites responsivos. Ela não adiciona nenhuma funcionalidade extra, mas adiciona maior clareza, legibilidade e menos código, ela torna o desenvolvimento web mais eficiente e facilita a manutenção do código.

Para mais conteúdo sobre CSS acesse:


Publicado

em

por

Tags:

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *