CSS: media query
Dentro da linguagem de marcação CSS, Media query é o recurso utilizado para determinar um conjunto de marcadores de estilo específico para exibir o mesmo conteúdo de um documento HTML em determinada medida de visualização da tela de um dispositivos de exibição. O recurso Media query é muito utilizado para a construção de sítios Web responsivos, onde a cada tipo de dispositivo de exibição (desktops, laptops, tablets, telefones celulares) o conteúdo seja adaptado para melhor visualização do usuário. Marcadores de exibição de elementos de página, como largura, altura, cores, estilos e tamanho de fontes de texto, por exemplo, podem ser definidos a cada Media query conforme a folha de estilo do projeto, permitindo que um mesmo conteúdo seja exibido de forma específica a cada dispositivo utilizado.
Índice
Sintaxe
Media queries consistem formas de media type e podem conter uma ou mais expressões que determinam se são verdadeiras ou falsas uma determinada especificação CSS3 expressa em media features. Os resultados de uma query são verdadeiros se o tipo de media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.
Uma das formas marcação da media query é defini-la no link de importação da folha de estilo CSS do documento HTML, no cabeçalho da página (<head>). O valor media define a media type que receberá a marcação da folha de estilo, no caso, de largura maior que 800px (max-width: 800px):
<html>
<head>
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
</head>
O mais comum é a marcação de media queries no corpo da folha de estilo CSS, onde é possível demarcar as várias opções e condições de visualização. A marcação a seguir define a media query para tamanho de visualização maior que 800px (max-width: 800px).
@media (max-width: 800px)
{
.facet_sidebar
{
display: none;
}
}
Quando a marcação de uma media query é verdadeira, a camada de estilo ou as regras de estilo correspondentes são aplicadas em "cascata" nos elementos definidos na estrutura do documento. Camadas de estilos com media queries ligadas a tag <link> são carregadas por download mesmo que a definição da media query retorne falso (não se aplique ao contexto).
Operadores lógicos
É possível a criação de media queries elaboradas com uso de operadores lógicos not, and, e only.
and
- usado para combinar múltiplas media features em uma mesma media query;
- permite combinar media features com media types.
- requer que cada sequência de características retorne verdadeiro, na ordem, para que a query seja verdadeira;
O exemplo a seguir apresenta uma media query básica: com marcação simples para todos os tipos de visualização, equivalente à media type 'all':
@media (min-width: 700px) { ... }
/* @media - quando não possui marcador específico, aplica-se a todos os tipos de viewport; */
/* (min-width: 700px) - definido para tamanho de tela de no mínimo 700px, ou mais largo; */
Se desejar que a marcação se aplique apenas para telas em landscape (tipo paisagem, horizontal), o operador and deve ser usado para adicionar o tipo de orientação. A media query a seguir é verdadeira se o viewport (tela de visualização do dispositivo) for igual ou maior que 700px e estiver com a posição de orientação definida para landscape:
@media (min-width: 700px) and (orientation: landscape) { ... }
/* @media - quando não possui media type específico, é aplicado a todos os tipos de viewport; */
/* (min-width: 700px) - é aplicado a tamanho de tela de no mínimo 700px ou de largura maior; */
/* (orientation: landscape) - é aplicado somente ao viewport de orientação landscape (paisagem); */
Se deseja que esse contexto seja aplicado para telas de media type TV, é necessário encadear a marcação com o operador and. A media query a seguir é aplicada apenas se a media type for TV, o viewport for igual ou maior que 700px e a tela estiver na posição landscape (horizontal, tipo paisagem).
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* @media tv - é aplicado somente à media type TV; */
/* (min-width: 700px) - é aplicado somente a tamanho de tela de no mínimo 700px ou de largura maior; */
/* (orientation: landscape) - é aplicado somente ao viewport de orientação landscape (paisagem); */
not
- usado para negar uma media query inteira;
- usado para aplicar um estilo apenas se a query inteira for igual;
- útil para prevenir que navegadores antigos apliquem os estilos selecionados;
- é necessário especificar um tipo de media explícito.
O operador not se aplica em aos seletores de mídia (media queries) e retorna verdadeiro, caso contrário retorna falso. A palavra chave not vai negar exclusivamente o seletor de mídia (media query) a que é aplicado. Ele não se aplica ao seletor de mídia que apresente lista de marcadores separados por vírgulas. O operador not não pode ser usado para negar uma característica individual do seletor de mídia (media query), apenas o seletor inteiro. No seletor de mídia (media query) a seguir, o not é avaliado por último:
@media not all and (monochrome) { ... }
/* (monochrome) - cor de tela;
O seletor de mídia (media query) é avaliado assim:
@media not (all and (monochrome)) { ... }
/* .......... */
/* (all and (monochrome)) - A seção de estilos entre as chaves do seletor @media não será aplicada aos dispositivos de tela monochrome" */
... em vez disso:
@media (not all) and (monochrome) { ... }
Um outro exemplo, veja a media query seguinte:
@media not screen and (color), print and (color)
É avalida desta forma:
@media (not (screen and (color))), print and (color)
only
- é necessário especificar um tipo de media explícito.
Observação: A menos que sejam definidos os operadores not ou only, o media type é opcional e o tipo all será implícito; é possível combinar múltiplas medias queries em uma lista separadas por vírgulas. Se qualquer uma das media queries da lista for verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.
W3C Tradução
Glossário
- @import - sintaxe de marcação CSS para importação de folha de estilo CSS aplicada à determinada media type (tipo de mídia);
- @media - sintaxe de marcação CSS para consultas de mídia (media query);
- CSS - do Inglês Cascade Style Sheet (folha de estilo em cascata) linguagem de marcação de estilo de visualização aplicado a conteúdos de documentos HTML;
- HTML - do Inglês Hiper Text Markup Language, Linguagem de marcação de hipertexto;
- media query - em Português, consulta de mídia; recurso CSS que permite definir a aplicação de um conjunto de marcadores de estilo para determinado padrão de visualização (formato, cores, tamanho) e tipo de mídia (media type) no qual a seção de marcadores será aplicada (TV, impressão, tela de monitores ou dispositivos). Sintaxe: @media;
- viewport - tela de visualização de um dispositivo de mídia: computador desktop, laptop, tablet, telefone celular;
- media type - tipo de mídia de exibição de conteúdos: TV, computador, impressão;
- XHTML - do Inglês, Extensive Hiper Text Markup Language, Linguagem extensiva de marcação de hipertexto;
- XML - da sigla em Inglês, eXtensible Markup Language, tipo de linguagem de marcação que define regras para codificar diferentes documentos; [1]
Introdução
A linguagem HTML4 definiu mecanismo para os documentos HTML dependentes de visualização em diferentes formatos de mídia ou adaptados para diferentes 'media types como TV, impressão, etc. Um mesmo documento HTML, por exemplo, pode usar uma folha de estilo para visualização em tela e outra distinta para impressão do documento. Na seção <head> do documento HTML a marcação ficaria assim:
<link rel="stylesheet" type="text/css" media="screen" href="style.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css">
A linguagem CSS foi adaptada e estendeu essa funcionalidade com as regras @media e @import, adicionando a capacidade de consultar o valor de cada recurso de forma individual. Dentro da folha de estilo CSS, é possível se declarar seções aplicadas especialmente para cada media type:
@media screen {
* {font-family: sans-serif}
}
Da mesma forma, as folhas de estilo podem ser importadas condicionalmente com base em media queries:
@import "print-styles.css" print;
Media queries podem ser usadas e aplicadas a linguagens de marcação HTML, XHTML, XML [xml-stylesheet], e com as regras @import e @media do CSS. A seguir a forma de marcação para cada uma das linguagens:
- HTML
<link media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
- XHTML
<link media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />
- XML [xml-stylesheet]
<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
- @import
@import url(example.css) screen and (color), projection and (color);
- @media
@media screen and (color), projection and (color) { … }
Módulos de interação
Este módulo substitui e estende as Consultas de mídia, Tipo de mídia e Recursos de mídia definidos em [CSS2] seções 7 e em [MEDIAQUERIES-3].
Valores
Tipos de valor não definidos nesta especificação, como <inteiro>, <número> ou <resolução>, são definidos em [CSS-VALUES-3]. Outros módulos CSS podem expandir as definições desses tipos de valor.
Unidades
As unidades usadas nas consultas de mídia são as mesmas que em outras partes do CSS, conforme definido em [CSS-VALUES-3]. Por exemplo, a unidade de pixel representa pixels CSS e não pixels físicos.
As unidades de comprimento relativo em consultas de mídia são baseadas no valor inicial, o que significa que as unidades nunca são baseadas em resultados de declarações. Por exemplo, em HTML, a unidade em é relativa ao valor inicial de font-size, definido pelo agente do usuário ou pelas preferências do usuário, não a qualquer estilo na página.
Consultas de mídia
Uma consulta de mídia é um método de testar certos aspectos do agente do usuário ou dispositivo em que o documento está sendo exibido. As consultas de mídia são (quase) sempre independentes do conteúdo do documento, seu estilo ou qualquer outro aspecto interno; eles dependem apenas de informações “externas”, a menos que outro recurso especifique explicitamente que isso afeta a resolução das Consultas de mídia.
A sintaxe de uma consulta de mídia consiste em um modificador de consulta de mídia opcional, um tipo de mídia opcional e zero ou mais recursos de mídia:
condição de mídia só não tipo de mídia e condição de mídia Uma consulta de mídia é uma expressão lógica verdadeira ou falsa. Uma consulta de mídia é verdadeira se:
o tipo de mídia, se especificado, corresponde ao tipo de mídia do dispositivo onde o agente do usuário está sendo executado e
a condição da mídia é verdadeira.
As declarações relacionadas às consultas de mídia nesta seção pressupõem que a seção de sintaxe seja seguida. Consultas de mídia que não estão em conformidade com a sintaxe são discutidas em §3.2 Tratamento de erros. Ou seja, a sintaxe tem precedência sobre os requisitos desta seção.
Aqui está um exemplo simples escrito em HTML:
<link rel = "stylesheet" media = "screen and (color)" href = "example.css" />
Este exemplo expressa que uma determinada folha de estilo (example.css) se aplica a dispositivos de um determinado tipo de mídia (tela) com determinado recurso (deve ser uma tela colorida).
Aqui está a mesma consulta de mídia escrita em uma regra @ import em CSS:
@import url (example.css) screen and (color);
Os agentes do usuário devem reavaliar as consultas de mídia em resposta às mudanças no ambiente do usuário de que estão cientes, por exemplo, se o dispositivo for lado a lado da orientação paisagem para retrato, e alterar o comportamento de quaisquer construções dependentes dessas consultas de mídia de acordo.
A menos que outro recurso especifique explicitamente que afeta a resolução das Consultas de mídia, nunca é necessário aplicar uma folha de estilo para avaliar as expressões.
