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

De AleloWiki
Ir para: navegação, pesquisa
(→‎W3C Normativo)
(→‎W3C Tradução)
Linha 99: Linha 99:
 
==W3C Tradução==
 
==W3C Tradução==
  
−
1. Introdução
+
===1. Introdução===
−
Esta seção não é normativa.
 
  
−
HTML4 [HTML401] definiu um mecanismo para suportar folhas de estilo dependentes de mídia, adaptadas para diferentes tipos de mídia. Por exemplo, um documento pode usar diferentes folhas de estilo para a tela e para a impressão. Em HTML, isso pode ser escrito como:
+
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 diferente para visualização em tela e para a impressão do documento. Em HTML, isso pode ser escrito como:
  
−
<link rel = "stylesheet" type = "text / css" media = "screen" href = "style.css">
+
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
−
<link rel = "stylesheet" type = "text / css" media = "print" href = "print.css">
+
<link rel="stylesheet" type="text/css" media="print" href="print.css">
−
O CSS adaptou e estendeu essa funcionalidade com suas regras @media e @import, adicionando a capacidade de consultar o valor de recursos individuais:
 
  
−
Dentro de uma folha de estilo CSS, pode-se declarar que as seções se aplicam a certos tipos de mídia:
+
O CSS foi adaptado e estendeu essa funcionalidade com suas regras @media e @import, adicionando a capacidade de consultar o valor de cada recurso de forma individual:
−
@media screen {
 
−
  * {font-family: sans-serif}
 
−
}
 
−
Da mesma forma, as folhas de estilo podem ser importadas condicionalmente com base em consultas de mídia:
 
  
−
@import "print-styles.css" print;
+
Dentro da folha de estilo CSS, é possível declarar seções aplicadas a certos tipos de mídia:
−
Consultas de mídia podem ser usadas com HTML, XHTML, XML [xml-stylesheet] e as regras @import e @media do CSS.
+
 
 +
@media screen {
 +
  * {font-family: sans-serif}
 +
}
 +
 
 +
Da mesma forma, as folhas de estilo podem ser importadas condicionalmente com base em consultas de mídia (''media queries''):
 +
 
 +
@import "print-styles.css" print;
 +
 
 +
Consultas de mídia (''media queries'') podem ser usadas com HTML, XHTML, XML [xml-stylesheet], e com as regras ''@import'' e ''@media'' do CSS.
  
 
Aqui está o mesmo exemplo escrito em HTML, XHTML, XML, @import e @media:
 
Aqui está o mesmo exemplo escrito em HTML, XHTML, XML, @import e @media:
−
<link media = "tela e (cor), projeção e (cor)"
 
−
      rel = "stylesheet" href = "example.css">
 
  
−
<link media = "tela e (cor), projeção e (cor)"
+
*'''HTML'''
−
      rel = "stylesheet" href = "example.css" />
+
 
 +
<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 media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
 +
 
 +
*'''@import'''
  
−
<? xml-stylesheet media = "tela e (cor), projeção e (cor)"
+
@import url(example.css) screen and (color), projection and (color);
−
                rel = "stylesheet" href = "example.css"?>
 
  
−
@import url (exemplo.css) tela e (cor), projeção e (cor);
+
*'''@media'''
  
−
tela @mídia e (cor), projeção e (cor) {…}
+
@media screen and (color), projection and (color) { … }

Edição das 23h46min de 11 de dezembro de 2021

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

W3C Tradução

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 diferente para visualização em tela e para a impressão do documento. Em HTML, isso pode ser escrito como: 

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

O CSS foi adaptado e estendeu essa funcionalidade com suas 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 declarar seções aplicadas a certos tipos de mídia: 

@media screen {
  * {font-family: sans-serif}
}

Da mesma forma, as folhas de estilo podem ser importadas condicionalmente com base em consultas de mídia (media queries): 

@import "print-styles.css" print;

Consultas de mídia (media queries) podem ser usadas com HTML, XHTML, XML [xml-stylesheet], e com as regras @import e @media do CSS.

Aqui está o mesmo exemplo escrito em HTML, XHTML, XML, @import e @media:

  • 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 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) { … }
Disponível em "https://alelowiki.cenargen.embrapa.br/index.php?title=CSS:_media_query&oldid=21548"