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.
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.
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)
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:
Deixe um comentário