Exibir código-fonte para CSS: media query

Dentro da linguagem de marcação CSS,  [[CSS: media query | ''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 [[CSS: media query | ''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 [[CSS: media query | ''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.

==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===

#'''media query''' - ou ''consulta de mídia'', é o recurso CSS que permite se definir a aplicação de uma seção de marcadores de estilo para determinado padrão de visualização de dispositivo, ou a que tipo de mídia a seção de marcadores será aplicada: TV, impressão, tela de dispositivo. 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;
#'''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'';
#'''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; <ref>''Canaltech:'' O que é XML; Fonte: [https://canaltech.com.br/software/xml-o-que-e/ Canaltech]; Consultado em 12/12/2021;</ref>
#'''@media''' - sintaxe de marcação CSS para consultas de mídia (''media query'');
#'''@import''' - sintaxe de marcação CSS para importação de estilo CSS aplicado à determinado ''media type'' (''tipo de mídia'');

===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) { … }