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

De AleloWiki
Ir para: navegação, pesquisa
(→‎not)
(→‎only)
Linha 93: Linha 93:
  
 
'''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''.
 
'''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==
 +
 +
1. Introduction
 +
This section is not normative.
 +
 +
HTML4 [HTML401] defined a mechanism to support media-dependent style sheets, tailored for different media types. For example, a document may use different style sheets for screen and for print. In HTML, this can be written as:
 +
 +
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
 +
<link rel="stylesheet" type="text/css" media="print" href="print.css">
 +
CSS adapted and extended this functionality with its @media and @import rules, adding the ability to query the value of individual features:
 +
 +
Inside a CSS style sheet, one can declare that sections apply to certain media types:
 +
@media screen {
 +
  * { font-family: sans-serif }
 +
}
 +
Similarly, stylesheets can be conditionally imported based on media queries:
 +
 +
@import "print-styles.css" print;
 +
Media queries can be used with HTML, XHTML, XML [xml-stylesheet] and the @import and @media rules of CSS.
 +
 +
Here is the same example written in HTML, XHTML, XML, @import and @media:
 +
<link media="screen and (color), projection and (color)"
 +
      rel="stylesheet" href="example.css">
 +
 +
<link media="screen and (color), projection and (color)"
 +
      rel="stylesheet" href="example.css" />
 +
 +
<?xml-stylesheet media="screen and (color), projection and (color)"
 +
                rel="stylesheet" href="example.css" ?>
 +
 +
@import url(example.css) screen and (color), projection and (color);
 +
 +
@media screen and (color), projection and (color) { … }
 +
 +
==W3C Traduçã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:
 +
 +
<link rel = "stylesheet" type = "text / css" media = "screen" href = "style.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:
 +
@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;
 +
Consultas de mídia podem ser usadas com HTML, XHTML, XML [xml-stylesheet] e as regras @import e @media do CSS.
 +
 +
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)"
 +
      rel = "stylesheet" href = "example.css" />
 +
 +
<? xml-stylesheet media = "tela e (cor), projeção e (cor)"
 +
                rel = "stylesheet" href = "example.css"?>
 +
 +
@import url (exemplo.css) tela e (cor), projeção e (cor);
 +
 +
tela @mídia e (cor), projeção e (cor) {…}

Edição das 23h26min 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

1. Introduction This section is not normative.

HTML4 [HTML401] defined a mechanism to support media-dependent style sheets, tailored for different media types. For example, a document may use different style sheets for screen and for print. In HTML, this can be written as:

<link rel="stylesheet" type="text/css" media="screen" href="style.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> CSS adapted and extended this functionality with its @media and @import rules, adding the ability to query the value of individual features:

Inside a CSS style sheet, one can declare that sections apply to certain media types: @media screen { 

 * { font-family: sans-serif }

} Similarly, stylesheets can be conditionally imported based on media queries:

@import "print-styles.css" print; Media queries can be used with HTML, XHTML, XML [xml-stylesheet] and the @import and @media rules of CSS.

Here is the same example written in HTML, XHTML, XML, @import and @media: <link media="screen and (color), projection and (color)" 

     rel="stylesheet" href="example.css">

<link media="screen and (color), projection and (color)" 

     rel="stylesheet" href="example.css" />

<?xml-stylesheet media="screen and (color), projection and (color)" 

                rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

W3C Traduçã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:

<link rel = "stylesheet" type = "text / css" media = "screen" href = "style.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: @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; Consultas de mídia podem ser usadas com HTML, XHTML, XML [xml-stylesheet] e as regras @import e @media do CSS.

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)" 

     rel = "stylesheet" href = "example.css" />

<? xml-stylesheet media = "tela e (cor), projeção e (cor)" 

                rel = "stylesheet" href = "example.css"?>

@import url (exemplo.css) tela e (cor), projeção e (cor);

tela @mídia e (cor), projeção e (cor) {…}

Disponível em "https://alelowiki.cenargen.embrapa.br/index.php?title=CSS:_media_query&oldid=21546"