Mudanças entre as edições de "CSS: media query"

De AleloWiki
Ir para: navegação, pesquisa
(→‎Sintaxe)
(→‎Sintaxe)
 
(53 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
−
Dentro da linguagem de marcação CSS,  [[CSS: media query | ''Media query'']] é o recurso utilizado para determinar o conjunto de marcadores de estilo específico para exibir um mesmo conteúdo Web em determinada medida de visualização da tela de 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, 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'']] definida na folha de estilo do projeto, permitindo que um mesmo conteúdo seja exibido de forma peculiar a cada dispositivo utilizado.
+
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==
 
==Sintaxe==
Linha 5: Linha 5:
 
''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.
 
''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.
  
−
<nolink><!- CSS media query em um elemento de link -></nolink>
+
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 máxima de 800px (''max-width: 800px''):
−
<nolink><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /></nolink>
+
 
−
  <nolink><!- CSS media query dentro de um stylesheet -></nolink>
+
<html>
−
  <style>
+
  <head>
−
  @media (max-width: 600px)
+
    <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 de largura máxima de 800px (''max-width: 800px'').
 +
   
 +
  @media (max-width: 800px)
 
  {
 
  {
 
   .facet_sidebar
 
   .facet_sidebar
Linha 16: Linha 21:
 
   }
 
   }
 
  }
 
  }
−
</style>
 
  
−
Quando uma ''media query'' é verdadeira, a camada de estilo ou as regras de estilo correspondentes são aplicadas seguindo o padrão de regras aplicadas em "cascata". Camadas de estilos com ''media queries'' ligadas a ''tag'' ''<link>'' são carregadas por ''download'' mesmo que suas ''medias queries'' retornem ''falso'' (caso não se aplicam ao contexto).
+
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" */
  
−
A menos que sejam definidos os operadores ''not'' ou ''only'', o ''media type'' é opcional e o tipo ''all'' será implícito.
+
... em vez disso:
  
−
==Operadores lógicos==
+
@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; <ref>''Canaltech:'' O que é XML; Fonte: [https://canaltech.com.br/software/xml-o-que-e/ Canaltech]; Consultado em 12/12/2021;</ref>
 +
 
 +
===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:
  
−
É possível se propor ''media queries'' elaboradas a partir dos operadores lógicos ''not'', ''and'', e ''only''.
+
@import url (example.css) screen and (color);
  
−
O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro.  
+
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.
  
−
O operador not é usado para negar uma media query inteira.  
+
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.
  
−
O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.
+
==Referências==
  
−
Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.
+
[[Categoria: CSS]]
 +
[[Categoria: Manual]]

Edição atual tal como às 22h08min de 7 de janeiro de 2022

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.

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 máxima de 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 de largura máxima de 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

  1. @import - sintaxe de marcação CSS para importação de folha de estilo CSS aplicada à determinada media type (tipo de mídia);
  2. @media - sintaxe de marcação CSS para consultas de mídia (media query);
  3. 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;
  4. HTML - do Inglês Hiper Text Markup Language, Linguagem de marcação de hipertexto;
  5. 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;
  6. viewport - tela de visualização de um dispositivo de mídia: computador desktop, laptop, tablet, telefone celular;
  7. media type - tipo de mídia de exibição de conteúdos: TV, computador, impressão;
  8. XHTML - do Inglês, Extensive Hiper Text Markup Language, Linguagem extensiva de marcação de hipertexto;
  9. 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.

Referências

  1. ↑ Canaltech: O que é XML; Fonte: Canaltech; Consultado em 12/12/2021;
Disponível em "https://alelowiki.cenargen.embrapa.br/index.php?title=CSS:_media_query&oldid=21617"