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 todo o seletor de mídia (media query) 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 separada 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)) - não se aplica a todos os 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 para aplicação e uso 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 um mecanismo para que os documentos HTML dependentes de visualização em formatos de mídia diferentes ou adaptados para diferentes tipos de mídia (media types) como TV, impressão, etc. Por exemplo, um mesmo documento HTML 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, conforme o exemplo a seguir:
- 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) { … }
