initial commit

4 files changed, 829 insertions, 0 deletions

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
+---
+<div>{{cssref}}</div>
+
+<p>A  <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Caracter%C3%ADsticas_de_m%C3%ADdia">característica de mídia</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>A característica de <code>aspect-ratio</code> é especificada como um valor de {{cssxref("&lt;ratio&gt;")}} 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 <strong><code>min-aspect-ratio</code></strong> e <code><strong>max-aspect-ratio</strong></code> para definir os os seus valores mínimos e máximos, respectivamente.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O exemplo abaixo está contido em um {{htmlElement("iframe")}}, que cria o seu próprio viewport. Redimensione o <code>&lt;iframe&gt;</code> para ver o  <code>aspect-ratio</code> em ação !</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='inner'&gt;
+  Observe este elemento, conforme voc&amp;ecirc; altera a largura e a altura da sua viewport.
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: 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 */
+  }
+}
+</pre>
+
+<div class="hidden">
+<h2 id="_Exemplo">_Exemplo</h2>
+
+<p>utilizado iframe e DataURL para que este iframe possa redimensionar</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;label id="wf" for="w"&gt;width:165&lt;/label&gt;
+&lt;input id="w" name="w" type="range" min="100" max="250" step="5" value="165"&gt;
+&lt;label id="hf" for="w"&gt;height:165&lt;/label&gt;
+&lt;input id="h" name="h" type="range" min="100" max="250" step="5" value="165"&gt;
+
+&lt;iframe id="outer" src="data:text/html,&lt;style&gt; @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }&lt;/style&gt;&lt;div id='inner'&gt; Observe este elemento, conforme voc&amp;ecirc; altera a largura e a altura da sua viewport.&lt;/div&gt;"&gt;
+
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">iframe{
+  display:block;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<div style="overflow: auto;">
+<p>{{ EmbedLiveSample('_Exemplo', '300px', '400px') }}</p>
+</div>
+
+<h2 id="Specificações">Specificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p>
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
+---
+<div>{{cssref}}</div>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>O recurso <code>display-mode</code> é especificado como um valor de uma palavra chave escolhido da lista abaixo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Modo de exibição</th>
+   <th scope="col">Descrição</th>
+   <th scope="col">Modo de exibição secundário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>
+    <p>Toda a área disponível da tela será usada e nada do agente-usuário (navegador) {{glossary("chrome")}} é mostrado.</p>
+   </td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>
+    <p>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.</p>
+   </td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>
+    <p>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.</p>
+   </td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>
+    <p>A aplicação abre numa aba ou nova janela convencional do navegador, dependendo do navegador e da plataforma.</p>
+   </td>
+   <td>(nenhum)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(46.0) }}[1]</td>
+   <td>{{ CompatGeckoDesktop(47) }}<sup>[2]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(47) }}<sup>[2]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatChrome(46.0) }}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Não suporta o valor <code>minimal-ui</code>. O valor <code>@supports</code> para <code>display-mode</code> só é suportado no Chrome 48.</p>
+
+<p>[2] Somente os valores <code>fullscreen</code> e <code>browser</code> são suportados na versão 47. <code>minimal-ui</code> e <code>standalone</code> foram adicionados no Firefox 57.</p>
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
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>@media</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule </a><font><font> 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.</font></font></p>
+
+<p>No CSS, a regra <code>@media</code> deve ser posta na parte superior do seu código ou aninhada dentro de algum outro <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">conditional group at-rule</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* 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;
+    }
+  }
+}
+</pre>
+
+<p>Besides its use in the <code>@media</code> rule, a media query may also be applied to an HTML {{HTMLElement("link")}} element to restrict an entire style sheet to certain media.</p>
+
+<pre class="brush: html no-line-numbers">&lt;!-- Media-dependent style sheet included in HTML --&gt;
+&lt;link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" /&gt;</pre>
+
+<p>In JavaScript, <code>@media</code> can be accessed via the {{domxref("CSSMediaRule")}} CSS object model interface.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<p>The <code>@media</code> at-rule is composed of one or more media queries, each of which consists of an optional <a href="#Media_types">media type</a> and any number of <a href="#Media_features">media feature</a> expressions. Multiple queries can be combined in various ways by using <a href="#Logical_operators">logical operators</a>, and are case-insensitive.</p>
+
+<p>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 <em>and</em> all media feature expressions compute as true. Queries involving unknown media types are always false.</p>
+
+<div class="note">
+<p><strong>Note:</strong> A style sheet with a media query attached to its {{HTMLElement("link")}} tag <a href="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if the query returns false. Nevertheless, its contents will not apply unless and until the result of the query changes to true.</p>
+</div>
+
+<h3 id="Media_types" name="Media_types">Media types</h3>
+
+<p><em>Media types</em> describe the general category of a device. Unless you use the <code>not</code> or <code>only</code> logical operators, the media type is optional and the <code>all</code> type will be implied.</p>
+
+<dl>
+ <dt><code>all</code></dt>
+ <dd>Suitable for all devices.</dd>
+ <dt><code>print</code></dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt><code>screen</code></dt>
+ <dd>Intended primarily for color computer screens.</dd>
+ <dt><code>speech</code></dt>
+ <dd>Intended for speech synthesizers.</dd>
+</dl>
+
+<div class="note"><strong>Deprecated media types:</strong> CSS2.1 and <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used. The <code>aural</code> type has been replaced by <code>speech</code>, which is similar.</div>
+
+<h3 id="Media_features" name="Media_features">Media features</h3>
+
+<p><em>Media feature expressions</em> 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.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Width of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Height of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Does the device use a grid or bitmap screen?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update</code></a></td>
+   <td>How frequently the output device can modify the appearance of content</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/color-gamut">color-gamut</a></code></td>
+   <td>Approximate range of colors that are supported by the user agent and output device</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
+   <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display"><code>display</code></a> member</td>
+   <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Deferred to Media Queries Level 5.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Light level of the environment</td>
+   <td>Deferred to Media Queries Level 5.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g., JavaScript) available?</td>
+   <td>Deferred to Media Queries Level 5.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use {{cssxref("@supports")}} instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific. If possible, use {{cssxref("@supports")}} instead.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Logical_operators">Logical operators</h3>
+
+<p>The <em>logical operators</em> <code>not</code>, <code>and</code>, and <code>only</code> 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.</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p>The <code>and</code> 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.</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p>The <code>not</code> 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 <code>not</code> operator, you <em>must</em> specify an explicit media type.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>not</code> keyword can't be used to negate an individual feature expression, only an entire media query.</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p>The <code>only</code> 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 <code>only</code> operator, you <em>must</em> specify an explicit media type.</p>
+
+<h4 id="comma-separated_lists">comma-separated lists</h4>
+
+<p>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 <code>or</code>.</p>
+
+<h3 id="Examples" name="Examples">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">@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; }
+}
+</pre>
+
+<p>For more media feature examples, please see the reference page for each specific feature. For more logical operator examples, please see <a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using media queries</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Standardizes the <code>-webkit-device-pixel-ratio</code> and <code>-webkit-transform-3d</code> media features.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Adds <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
+     Makes the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>6.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop(47) }}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(47)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Only the <code>fullscreen</code> and <code>browser</code> values of <code>display-mode</code> were supported in 47. <code>minimal-ui</code> and <code>standalone</code> were added in Firefox 57.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Using media queries</a></li>
+ <li>In JavaScript, <code>@media</code> can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</li>
+</ul>
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
+---
+<div class="blockIndicator note">
+<p>Se você definiu <code>privacy.resistFingerprinting</code> como <strong>true</strong>, <code><a href="https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> será substituída pela <code>light</code>.</p>
+</div>
+
+<p>O <strong><code>prefers-color-scheme</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> é usado para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Indica que o usuário não fez nenhuma preferência conhecida pelo sistema. Este valor da palavra-chave é avaliado como <code>false</code> no <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">contexo booleano</a>.</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>Indica que o usuário notificou o sistema de que prefere uma interface com um tema claro.</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>Indica que o usuário notificou o sistema de que prefere uma interface com um tema escuro.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>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.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="day"&gt;Dia (inicial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Dia (modificar e utilizar um tema claro)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Dia (modificar e utilizar um tema escuro)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Noite (inicial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Noite (modificar e utilizar um tema claro)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Noite (modificar e utilizar um tema escuro)&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: 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;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
+ <li>Changing color schemes in <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> and <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a>.</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>