Olá pessoal, no artigo de hoje vamos falar sobre as medias queries, mas antes vamos falar um pouco sobre o que vinha antes delas, as media types.
As Medias Types, basicamente definem pra qual tipo de media o css que você usa em seu site será direcionado, ou seja, para cada dispositivo diferente que você acessa um website, será necessário um css diferente também.
Além da media mais comum que é o caso de acessar um site do desktop e acessar de um smartphone ou tablet, existem muitas outras medias, como por exemplo:
- All :Para todos os dispositivos.
- Screen :Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.
- Handheld: Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.
- Embossed: Para dispositivos que “imprimem” em braille.
- Tty: Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
- Print: Para impressão em papel.
- Braille: Para dispositivos táteis.
- Projection: Para apresentações, como PowerPoint.
- TV: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.
- Speech: Para sintetizadores de voz.
A forma de se utilizar essas medias types pode ser vista no código abaixo na listagem 1:
Listagem 1: Como utilizar as Media Type
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Exemplo de Media Type - DevMedia</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />
</head>
<body>
</body>
</html>
Como podemos observar, a tag link está chamando um arquivo css usando a media handheld, ou seja, caso você acesse de um dispositivo móvel, smartphone, tablet’s, esse será o css chamado e carregado pelo website.
Esse css só será carregado nesse tipo de dispositivo, para cada dispositivo diferente que acessamos, temos que definir um css específico para ele, como por exemplo se quisermos o mais comum que é acessar de um desktop usamos a media type screen.
Listagem 2: Acessando de um desktop
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
Por que as media types viraram um problema?
Com a quantidade cada vez maior de dispositivos de diversos tamanhos e com um hardware muito bons, quase como um desktop, surgiram algumas dúvidas muito fortes em que media usar, pois os smartphones mais potentes por exemplo, possuem uma navegação bem parecida com a de um desktop, mas ainda sim são handheld’s e não podem ser considerados desktops, ou seja, não podemos disponibilizar um CSS para handheld, nem um CSS totalmente screen.
Media Queries
Como solução desse “problema”, surgiram as Media Queries, elas definem algumas condições para o uso de css específicos. Como o bom e velho “IF” das linguagens de programação, ela funciona de maneira parecida, fazendo com que se as condições do dispositivo se adequarem aquela condição que você disse na media querie, ela vai aplicar aquele css, caso contrário, não aplica.
Listagem 3: Media Queries
<link rel="stylesheet" href="estilo.css" media="screen and (color)" />
Neste exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color, ou seja, se este dispositivo for monocromático o css não será aplicado.
Operadores Lógicos
Os Operadores Lógicos são usados justamente para darem essa condição a Media Querie, possibilitando assim que sejam criadas diversas media queries, são eles: not, and e only.
Operador not
O operador not irá fazer uma condição de negação. Como vemos na listagem 4 um exemplo de uso desse operador:
Listagem 4: Operador not
<link rel="stylesheet" href="estilo.css" media="all and (not color)" />
No código acima temos uma sentença verdadeira para dispositivos monocromáticos.
Operador only
O operador only não irá mostrar os estilos de browser's que não reconhecem as medias queries, para usá-lo basta usar a palavra only antes da sentença, como vemos na listagem 5 um exemplo de uso desse operador.
Listagem 5: Usando operador only
<link rel="stylesheet" href="estilo.css" media="only screen and (color)" />
É possível também agrupar várias media queries separando-os com (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or, como vemos na listagem 6 um exemplo de uso desse operador.
Listagem 6: Usando vírgula como operador or
<link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />
Media features
Para diferenciar um dispositivo do outro, você precisa utilizar as características de cada um, para isso usamos as Media Features. Dessa forma definimos se nosso dispositivo será um smartphone, tablet ou pc comum. Como vemos na listagem 5 um exemplo de uso das Media Features.
Listagem 7: Media Features
<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />
Neste exemplo foi especificado que o css será aplicado somente nos dispositivos de media screen e que suas telas possuam no máximo a resolução de 480px.
Abaixo podemos ver uma listagem com algumas características que podem ser utilizadas para selecionar e definir os dispositivos que serão utilizados.
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- scan
- grid
Conclusão
Infelizmente não são todos os navegadores que suportam as media queries, elas são principalmente utilizadas para separar o css do site desktop com o css do site móbile, melhorando assim a experiência de seus usuários nos dispositivos móveis.
Espero que tenham gostado e até o próximo artigo.
