From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/@media/aspect-ratio/index.html | 128 ++++++ files/pt-br/web/css/@media/display-mode/index.html | 151 +++++++ files/pt-br/web/css/@media/index.html | 446 +++++++++++++++++++++ .../web/css/@media/prefers-color-scheme/index.html | 104 +++++ 4 files changed, 829 insertions(+) create mode 100644 files/pt-br/web/css/@media/aspect-ratio/index.html create mode 100644 files/pt-br/web/css/@media/display-mode/index.html create mode 100644 files/pt-br/web/css/@media/index.html create mode 100644 files/pt-br/web/css/@media/prefers-color-scheme/index.html (limited to 'files/pt-br/web/css/@media') diff --git a/files/pt-br/web/css/@media/aspect-ratio/index.html b/files/pt-br/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..73b86c6b2d --- /dev/null +++ b/files/pt-br/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,128 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - '@media' + - CSS + - Media Queries + - Taxa de aspecto + - Tradução + - características de mídia + - pt-br +translation_of: Web/CSS/@media/aspect-ratio +--- +
{{cssref}}
+ +

A  característica de mídia CSS aspect-ratio pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.

+ +

Sintaxe

+ +

A característica de aspect-ratio é especificada como um valor de {{cssxref("<ratio>")}} representando a relação de largura-para-altura em aspecto à sua viewport. É uma característica de diferencial, o que significa que você pode fazer uso de variações pré-fixadas de min-aspect-ratio e max-aspect-ratio para definir os os seus valores mínimos e máximos, respectivamente.

+ +

Exemplo

+ +

O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu próprio viewport. Redimensione o <iframe> para ver o  aspect-ratio em ação !

+ +

HTML

+ +
<div id='inner'>
+  Observe este elemento, conforme voc&ecirc; altera a largura e a altura da sua viewport.
+</div>
+
+ +

CSS

+ +
/* Taxa de aspecto mínima */
+@media (min-aspect-ratio: 8/5) {
+  div {
+    background: #9af; /* azul */
+  }
+}
+
+/* Taxa de aspecto máxima */
+@media (max-aspect-ratio: 3/2) {
+  div {
+    background: #9ff;  /* ciano */
+  }
+}
+
+/* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita*/
+@media (aspect-ratio: 1/1) {
+  div {
+    background: #f9a; /* vermelho */
+  }
+}
+
+ + + +

Result

+ +
+

{{ EmbedLiveSample('_Exemplo', '300px', '400px') }}

+
+ +

Specificações

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}No change.
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/pt-br/web/css/@media/display-mode/index.html b/files/pt-br/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..64fdf5f4d8 --- /dev/null +++ b/files/pt-br/web/css/@media/display-mode/index.html @@ -0,0 +1,151 @@ +--- +title: Modo de exibição (display-mode) +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - Internet + - Rede + - Referencia + - Web + - display + - display-moe + - funcionalidade de mídia + - manifesto das aplicações web +translation_of: Web/CSS/@media/display-mode +--- +
{{cssref}}
+ +

O recurso de mídia CSS {{cssxref("@media")}} do modo de exibição pode ser usado para aplicar estilos com base no modo de exibição de um aplicativo. Você pode usar para prover uma consistente experiência de usuário entre abrir um site a partir de uma URL e um ícone desktop.

+ +

Esse recurso corresponde ao membro da exibição do manifesto do aplicativo da Web. Ambos aplicam-se ao contexto de navegação de nível superior e a qualquer contexto afilhado de navegação. O recurso de consulta aplica-se independentemente de onde um manifesto de aplicativo web está presente.

+ +

Sintaxe

+ +

O recurso display-mode é especificado como um valor de uma palavra chave escolhido da lista abaixo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Modo de exibiçãoDescriçãoModo de exibição secundário
fullscreen +

Toda a área disponível da tela será usada e nada do agente-usuário (navegador) {{glossary("chrome")}} é mostrado.

+ 		standalone
standalone +

A aplicação irá parecer uma aplicação independente. Isso pode incluir a aplicação ter uma janela diferente, seu próprio ícone no menu de aplicações, etc. Neste modo, o navegador não irá mostrar os controles de navegação (como barra de endereço, botão voltar, botão página inicial, etc), mas pode incluir outros elementos gráficos como a barra de status.

+ 		minimal-ui
minimal-ui +

A aplicação irá parecer uma aplicação independente, mas terá um conjunto mínimo de elementos gráficos (UI) para controlar a navegação. Esses elementos podem variar de acordo com o navegador.

+ 		browser
browser +

A aplicação abre numa aba ou nova janela convencional do navegador, dependendo do navegador e da plataforma.

+ 		(nenhum)
+ +

Exemplo

+ +
@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}
+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Definição inicial.
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(46.0) }}[1]{{ CompatGeckoDesktop(47) }}[2]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoDesktop(47) }}[2]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatChrome(46.0) }}[1]
+
+ +

[1] Não suporta o valor minimal-ui. O valor @supports para display-mode só é suportado no Chrome 48.

+ +

[2] Somente os valores fullscreen e browser são suportados na versão 47. minimal-ui e standalone foram adicionados no Firefox 57.

diff --git a/files/pt-br/web/css/@media/index.html b/files/pt-br/web/css/@media/index.html new file mode 100644 index 0000000000..18c46ee615 --- /dev/null +++ b/files/pt-br/web/css/@media/index.html @@ -0,0 +1,446 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - At-rule + - CSS + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

The @media CSS at-rule  pode ser usada para aplicar estilos com base no resultado de uma ou mais consultas de mídia, que testam o tipo, as características específicas e o ambiente de um dispositivo.

+ +

No CSS, a regra @media deve ser posta na parte superior do seu código ou aninhada dentro de algum outro conditional group at-rule.

+ +
/* Media query */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Nested media query */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

Besides its use in the @media rule, a media query may also be applied to an HTML {{HTMLElement("link")}} element to restrict an entire style sheet to certain media.

+ +
<!-- Media-dependent style sheet included in HTML -->
+<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />
+ +

In JavaScript, @media can be accessed via the {{domxref("CSSMediaRule")}} CSS object model interface.

+ +

Syntax

+ +

The @media at-rule is composed of one or more media queries, each of which consists of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators, and are case-insensitive.

+ +

Corresponding styles are applied only if a media query computes to true, i.e., when the specified media type matches the type of device the document is being displayed on and all media feature expressions compute as true. Queries involving unknown media types are always false.

+ +
+

Note: A style sheet with a media query attached to its {{HTMLElement("link")}} tag will still download even if the query returns false. Nevertheless, its contents will not apply unless and until the result of the query changes to true.

+
+ +

Media types

+ +

Media types describe the general category of a device. Unless you use the not or only logical operators, the media type is optional and the all type will be implied.

+ +
+
all
+
Suitable for all devices.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Intended primarily for color computer screens.
+
speech
+
Intended for speech synthesizers.
+
+ +
Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech, which is similar.
+ +

Media features

+ +

Media feature expressions test for specific characteristics of the {{glossary("user agent")}}, output device, or environment. They are entirely optional. Each media feature expression must be surrounded by parentheses.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSummaryNotes
widthWidth of the viewport
heightHeight of the viewport
aspect-ratioWidth-to-height aspect ratio of the viewport
orientationOrientation of the viewport
resolutionPixel density of the output device
scanScanning process of the output device
gridDoes the device use a grid or bitmap screen?
updateHow frequently the output device can modify the appearance of contentAdded in Media Queries Level 4.
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4.
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4.
colorNumber of bits per color component of the output device, or zero if the device isn't color
color-gamutApproximate range of colors that are supported by the user agent and output deviceAdded in Media Queries Level 4.
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table
display-modeThe display mode of the application, as specified in the web app manifest's display memberDefined in the Web App Manifest spec.
monochromeBits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
inverted-colorsIs the user agent or underlying OS inverting colors?Deferred to Media Queries Level 5.
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4.
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4.
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4.
any-hoverDoes any available input mechanism allow the user to hover over elements?Added in Media Queries Level 4.
light-levelLight level of the environmentDeferred to Media Queries Level 5.
scriptingIs scripting (e.g., JavaScript) available?Deferred to Media Queries Level 5.
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4.
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4.
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4.
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific. If possible, use {{cssxref("@supports")}} instead.
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.
+ +

Logical operators

+ +

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule using a comma-separated list.

+ +

and

+ +

The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.

+ +

not

+ +

The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list, it will only negate the specific query to which it is applied. If you use the not operator, you must specify an explicit media type.

+ +
+

Note: The not keyword can't be used to negate an individual feature expression, only an entire media query.

+
+ +

only

+ +

The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must specify an explicit media type.

+ +

comma-separated lists

+ +

Each query in a comma-separated media query list is treated separately from the others. If any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like the logical operator or.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4; }
+}
+
+ +

For more media feature examples, please see the reference page for each specific feature. For more logical operator examples, please see Using media queries.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Standardizes the -webkit-device-pixel-ratio and -webkit-transform-3d media features.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Defines the basic syntax of the @media rule.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Adds scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features.
+ Deprecates all media types except for screen, print, speech, and all.
+ Makes the syntax more flexible by adding, among other things, the or keyword.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}No change.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (all, print, screen)1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.7) }}9.09.21.3
display-mode media feature{{CompatUnknown}}{{CompatNo}}{{ CompatGeckoDesktop(47) }}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (all, print, screen)1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
display-mode media feature{{CompatUnknown}}{{CompatNo}}{{CompatGeckoMobile(47)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Only the fullscreen and browser values of display-mode were supported in 47. minimal-ui and standalone were added in Firefox 57.

+ +

See also

+ + diff --git a/files/pt-br/web/css/@media/prefers-color-scheme/index.html b/files/pt-br/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..dc224d8741 --- /dev/null +++ b/files/pt-br/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,104 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +
+

Se você definiu privacy.resistFingerprinting como true, prefers-color-scheme será substituída pela light.

+
+ +

O prefers-color-scheme CSS media feature é usado para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.

+ +

Syntax

+ +
+
no-preference
+
Indica que o usuário não fez nenhuma preferência conhecida pelo sistema. Este valor da palavra-chave é avaliado como false no contexo booleano.
+
light
+
Indica que o usuário notificou o sistema de que prefere uma interface com um tema claro.
+
dark
+
Indica que o usuário notificou o sistema de que prefere uma interface com um tema escuro.
+
+ +

Exemplos

+ +

Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temáticos de acordo com a preferência do esquema de cores do usuário.

+ +

HTML

+ +
<div class="day">Dia (inicial)</div>
+<div class="day light-scheme">Dia (modificar e utilizar um tema claro)</div>
+<div class="day dark-scheme">Dia (modificar e utilizar um tema escuro)</div> <br>
+
+<div class="night">Noite (inicial)</div>
+<div class="night light-scheme">Noite (modificar e utilizar um tema claro)</div>
+<div class="night dark-scheme">Noite (modificar e utilizar um tema escuro)</div>
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentários
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}Definição inicial.
+ +

Compatibilidade dos navegadores

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

Veja também

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
-- cgit v1.2.3-54-g00ecf