Como essas pequenas técnicas de Media Queries podem e vão tornar o seu CSS muito melhor
E ai pessoal tudo bom? Voltando ao assunto da semana passada onde falei um pouco sobre design responsivo hoje vou me aprofundar um pouco mais técnicamente no assunto e falar sobre Media Queries, e como essa arma pode te ajudar a sobreviver a selva de dispositivos, navegadores e resoluções que enfrentamos todos os dias… vamos lá?
O que são Media Queries?
Basicamente, se você se interessou em ler este post deve ter claro em sua cabeça o que são Queries, as consultas, que escrevemos normalmente para buscar em sistemas de bancos de dados.
Porém, neste no contexto de Css as queries são condições que devem ser respeitadas para que um determinado bloco de CSS seja aplicado pelo navegador, tais queries são executada também para definir a media (dispositivo) que o usuário esta utilizando no acesso dentre as opções de media, temos:
- all [Todo os dispositivos]
- braille [Para dispositivos táteis.]
- embossed [Para dispositivos que “imprimem” em braille.]
- handheld [Para dispositivos de mão. ]
- print [Para impressão em papel.]
- projection [Para apresentações, como PowerPoint.]
- screen [Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.]
- speech [Para sintetizadores de voz. ]
- tv [Para televisores.]
E o css que sera carregado de acordo com a media é definido conforme exemplo abaixo:
<link rel=”stylesheet” href=”arquivo.css” type=”text/css” media=”tv” />
Parte do problema esta resolvido, porém, e sempre tem um porém, dentro de cada classe de media temos aparelhos dos mais diversos, afinal um iPhone é um handheld (conceitualmente), mas renderiza as páginas de forma praticamente igual ao desktop e assim por diante
Desta forma as media queries surgem para flexibilizar um pouco mais essa dura escolha de “qual css renderizar”.
E como funcionam as media queries?
Basicamente apesar do nome queries a estrutura é bem diferente do SQL que você pode estar imaginando. As média queries trabalham basicamente com: Operadores lógicos e features (atributos), e a composição destes elementos irá permitir a você, desenvolvedor sofrido :), carregar um css de acordo com o dispositivo e manter o seu cliente feliz.
Veja alguns exemplos de media queries:
#apenas monitores e coloridos
<link rel=”stylesheet” href=”estilo.css” media=”screen and (color)” />
#monitores coloridos e projecoes coloridas
<link rel=”stylesheet” href=”estilo.css” media=”screen and (color), projection and (color)” />
Outra forma de uso
#apenas monitores com tamanho máximo de 768px de largura
@media screen and (max-width: 768px) {
…
}/*/mediaquery*/
Veja a lista de operadores e features disponíveis:
Operadores lógicos:
- not
- and
- only
Features
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- scan
- grid
Gostou do assunto? Saiba mais aqui, aqui e aqui.
É isso pessoal, o conteúdo foi técnico porém prático, espero que essas idéias possam facilitar sua vida nos próximos projetos. Sexta que vem tem mais sobre o assunto!