mdn · josielrocha · Sep 7, 2022 · Aug 23, 2022
@@ -5,7 +5,7 @@
 ---
 <div>{{CSSRef}}{{SeeCompatTable}}</div>
 
-<p class="summary"><span class="seoSummary">Nomes de propriedades com o prefixo <code>--</code>, como <code>--example-name</code>, representam <em>Propriedade personalizadas</em> que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).</span></p>
+<p class="summary">Nomes de propriedades com o prefixo <code>--</code>, como <code>--example-name</code>, representam <em>Propriedade personalizadas</em> que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).</p>
 
 <p>Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.</p>
 

@@ -19,7 +19,7 @@
 
 <h2 id="Resumo">Resumo</h2>
 
-<p><span style="line-height: 1.5;">A propriedade CSS <code>-webkit-overflow-scrolling</code> controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.</span></p>
+<p>A propriedade CSS <code>-webkit-overflow-scrolling</code> controla quando dispositivos com a funcionalidade de toque na tela usam uma rolagem baseada no "momentum" de um dado elemento.</p>
 
 <p>{{cssinfo}}</p>
 

@@ -9,7 +9,7 @@
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
-<pre class="brush: css no-line-numbers notranslate">-webkit-text-security: circle;
+<pre class="brush: css">-webkit-text-security: circle;
 -webkit-text-security: disc;
 -webkit-text-security: square;
 -webkit-text-security: none;
@@ -21,12 +21,12 @@ <h2 id="Exemplo">Exemplo</h2>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html notranslate">&lt;label for="name"&gt;Name:&lt;/label&gt;
+<pre class="brush: html">&lt;label for="name"&gt;Name:&lt;/label&gt;
 &lt;input type="text" name="name" id="name" /&gt;</pre>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css notranslate">input {
+<pre class="brush: css">input {
   -webkit-text-security: square;
 }</pre>
 

@@ -5,7 +5,9 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p><span class="seoSummary">O <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.</span> Se a função <code>local()</code> for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função <code>url()</code> é baixado e usado.</p>
+<p>O <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> especifica uma fonte customizada com a qual exibe o texto; a fonte pode ser carregada de um servidor remoto ou de uma fonte instalada localmente no computador do usuário.</p>
+
+<p>Se a função <code>local()</code> for fornecida, a especificação do nome da fonte a ser procurada no computador do usuário, e a {{Glossary("user agent")}} encontrar uma correspondência, essa fonte local será usada. Caso contrário, o recurso de fonte especificado usando a função <code>url()</code> é baixado e usado.</p>
 
 <p>Ao permitir que os autores forneçam suas próprias fontes, <code>@font-face</code> torna possível projetar conteúdo sem se limitar às chamadas fontes "seguras para a web" (ou seja, as fontes que são tão comuns que são consideradas como universalmente disponível). A capacidade de especificar o nome de uma fonte instalada localmente a ser procurada e usada permite personalizar a fonte além do básico, ao mesmo tempo em que é possível fazê-lo sem depender de uma conexão com a Internet.</p>
 

@@ -9,7 +9,7 @@ <h2 id="Sumário">Sumário</h2>
 
 <p>A <a href="/en-US/docs/Web/CSS/At-rule">Regra Atribuída (at-rule) </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>@import </code></strong>é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as  regrasde <a href="/pt-BR/docs/Web/CSS/@charset">@charset</a> ; uma vez que não é um <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">Declaração aninhada</a>, <code>@import não pode ser usado dentro do</code> <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">grupo condicional de regras atribuídas (at-rules)</a>.</p>
 
-<p><span id="result_box" lang="pt"><span class="alt-edited">Assim como</span> <span class="alt-edited">os agentes do usuário</span> <span class="alt-edited">podem evitar</span> <span>a recuperação de</span> <span>recursos</span> <span>para os tipos de</span> <span>mídia incompatíveis</span><span>, os autores podem</span> <span>especificar regras</span> <span>@import</span> <span>dependentes de mídia</span><span>.</span> <span>Estas importações</span> <span>condicionais</span> <span class="alt-edited">devem ter </span></span> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> <span lang="pt"><span class="alt-edited">separadas por vírgulas</span></span> após a URI. <span id="result_box" lang="pt"><span>Na ausência</span> <span>de qualquer</span> <span>consulta de mídia</span><span> (media queries), a importação</span> <span>é incondicional.</span> <span>Especificando</span> <span>todos</span> <span>para o médio</span> <span>tem o mesmo efeito</span></span>.</p>
+<p>Assim como os agentes do usuário podem evitar a recuperação de recursos para os tipos de mídia incompatíveis, os autores podem especificar regras @import dependentes de mídia. Estas importações condicionais devem ter  <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> separadas por vírgulas após a URI. Na ausência de qualquer consulta de mídia (media queries), a importação é incondicional. Especificando todos para o médio tem o mesmo efeito.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -54,7 +54,7 @@ <h2 id="Especificações">Especificações</h2>
   <tr>
    <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
    <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td><span id="result_box" lang="pt"><span class="alt-edited">Estendeu</span> <span>a sintaxe</span> <span>para apoiar qualquer</span> <span>consulta de mídia</span> <span>e</span> <span>não apenas</span> <span>simples</span></span> <a href="/en-US/docs/Web/CSS/@media#Media_types">tipos de mídia (media types)</a>.</td>
+   <td>Estendeu a sintaxe para apoiar qualquer consulta de mídia e não apenas simples <a href="/en-US/docs/Web/CSS/@media#Media_types">tipos de mídia (media types)</a>.</td>
   </tr>
   <tr>
    <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>

@@ -5,7 +5,7 @@
 ---
 <p>{{CSSRef}}</p>
 
-<p><span class="seoSummary">The <strong><code>@keyframes</code></strong> CSS <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.</span> This gives more control over the intermediate steps of the animation sequence than <a href="/en-US/docs/Web/CSS/CSS_Transitions">transitions</a>.</p>
+<p>The <strong><code>@keyframes</code></strong> CSS <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than <a href="/en-US/docs/Web/CSS/CSS_Transitions">transitions</a>.</p>
 
 <pre class="brush: css no-line-numbers">@keyframes slidein {
   from {

@@ -55,10 +55,6 @@ <h3 id="CSS">CSS</h3>
 </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;
@@ -71,14 +67,10 @@ <h3 id="HTML_2">HTML</h3>
 &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(){

@@ -12,7 +12,7 @@
 ---
 <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>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> 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.</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>
 

@@ -11,11 +11,11 @@
 
 <h2 id="Resumo">Resumo</h2>
 
-<p class="note">A regra CSS <code>@page</code> é utilizada para modificar algumas propriedades CSS quando o documento for impresso.<strong> </strong>Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.</p>
+<p>A regra CSS <code>@page</code> é utilizada para modificar algumas propriedades CSS quando o documento for impresso.<strong> </strong>Você não pode mudar todas as propriedades CSS com @page. Você poderá somente mudar as margens, orphans, widows, e page breaks do documento. Na tentativa de mudar outra propriedade CSS, elas serão ignoradas.</p>
 
-<p class="note">A regra CSS <code>@page</code> pode ser acessada via interface do modelo de objeto {{domxref("CSSPageRule")}}.</p>
+<p>A regra CSS <code>@page</code> pode ser acessada via interface do modelo de objeto {{domxref("CSSPageRule")}}.</p>
 
-<div class="note"><strong>Nota:<code> </code></strong>A W3C está analisando como lidar com unidades viewport-related {{cssxref("&lt;length&gt;")}}, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>. Enquanto isso, não use eles junto com a regra @page.</div>
+<div class="note"><strong>Nota:</strong> A W3C está analisando como lidar com unidades viewport-related {{cssxref("&lt;length&gt;")}}, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>. Enquanto isso, não use eles junto com a regra @page.</div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 

@@ -28,13 +28,13 @@ <h3 id="CSS">CSS</h3>
 <pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 }
 a:link { color: blue } /* links não visitados */
 a:visited { color: purple } /* links visitados */
-a:hover { <span class="st">font-weight: bold</span> } /* user hovers */
+a:hover { font-weight: bold } /* user hovers */
 a:active { color: lime } /* links ativos */</pre>
 </div>
 
 <div>{{EmbedLiveSample('example',600,140)}}</div>
 
-<h2 id="Especificações"><span>Especificações</span></h2>
+<h2 id="Especificações">Especificações</h2>
 
 <table class="standard-table">
  <thead>
@@ -48,38 +48,22 @@ <h2 id="Especificações"><span>Especificações</span></h2>
   <tr>
    <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
    <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>
-    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
-    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
-    </div>
-   </td>
+   <td>Nenhuma mudança.</td>
   </tr>
   <tr>
    <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
    <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>
-    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
-    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
-    </div>
-   </td>
+   <td>Nenhuma mudança.</td>
   </tr>
   <tr>
    <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
    <td>{{Spec2('CSS2.1')}}</td>
-   <td>
-    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
-    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.6883987804935804"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.5335362648221555">.</span></div>
-    </div>
-   </td>
+   <td>Nenhuma mudança.</td>
   </tr>
   <tr>
    <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
    <td>{{Spec2('CSS1')}}</td>
-   <td>
-    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
-    <div><span id="ouHighlight__8_17TO0_8">Definição</span><span id="noHighlight_0.9831647105645616"> </span><span id="ouHighlight__0_6TO10_16">inicial</span><span id="noHighlight_0.3416173095780455">.</span></div>
-    </div>
-   </td>
+   <td>Definição inicial.</td>
   </tr>
  </tbody>
 </table>

@@ -64,7 +64,7 @@ <h3 id="Example_selectors" name="Example_selectors">Exemplo de seletores</h3>
  <dd>Representa todos os selects na página que estão selecionados</dd>
 </dl>
 
-<h3 id="Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano.">Usando checkboxes escodindos para amarzenar algum valor <span class="st">booleano</span>.</h3>
+<h3 id="Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano.">Usando checkboxes escodindos para amarzenar algum valor booleano.</h3>
 
 <p>A pseudo-classe <code>:checked </code>aplicada em checkboxes escondidos, adicionado ao início de sua página pode<br>
  ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download esse demo</a>).</p>
@@ -183,7 +183,7 @@ <h2 id="Specifications" name="Specifications">Especificações</h2>
   <tr>
    <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
    <td>{{ Spec2('CSS3 Selectors') }}</td>
-   <td>Define a pseudo-classe, mas não <span class="short_text" id="result_box" lang="pt"><span class="hps">associação</span> <span class="hps">semântica</span></span></td>
+   <td>Define a pseudo-classe, mas não associação semântica</td>
   </tr>
  </tbody>
 </table>

@@ -5,7 +5,7 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p><font><font>A </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes"><font>pseudo-classe </font></a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font>  </font></font><strong><code>:disabled</code></strong><font><font> representa qualquer elemento desativado. </font><font>Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. </font><font>O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.</font></font></p>
+<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe </a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>  <strong><code>:disabled</code></strong> representa qualquer elemento desativado. Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.</p>
 
 <pre class="brush: css no-line-numbers">/* Selects any disabled &lt;input&gt; */
 input:disabled {
@@ -18,7 +18,7 @@ <h2 id="Sintaxe">Sintaxe</h2>
 
 <h2 id="Exemplo">Exemplo</h2>
 
-<p><font><font>Este exemplo mostra um formulário básico de envio. </font><font>Ele usa o </font><font>evento </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><font><font>JavaScript</font></font></a> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/change" title="/en-US/docs/Web/Events/change">change</a></code><font><font> para permitir que o usuário ative / desative os campos de faturamento.</font></font></p>
+<p>Este exemplo mostra um formulário básico de envio. Ele usa o evento <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/change" title="/en-US/docs/Web/Events/change">change</a></code> para permitir que o usuário ative / desative os campos de faturamento.</p>
 
 <h3 id="HTML">HTML</h3>
 

@@ -5,7 +5,7 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p><font><font>A </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes"><font>pseudo-classe </font></a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font>  </font></font><strong><code>:enabled</code></strong><font><font> representa qualquer elemento ativado. </font><font>Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. </font><font>O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.</font></font></p>
+<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe </a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>  <strong><code>:enabled</code></strong> representa qualquer elemento ativado. Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.</p>
 
 <pre class="brush: css no-line-numbers">/* Seleciona qualquer &lt;input&gt; ativado */
 input:enabled {
@@ -18,7 +18,7 @@ <h2 id="Sintaxe">Sintaxe</h2>
 
 <h2 id="Exemplo">Exemplo</h2>
 
-<p><font><font>O exemplo a seguir torna a cor do texto e do botão </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="O elemento HTML &lt;input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário;  uma ampla variedade de tipos de dados de entrada e widgets de controle estão disponíveis, dependendo do dispositivo e do agente do usuário.">&lt;input&gt;</a> </code><font><font>verde quando ativada e cinza quando desativada. </font><font>Isso ajuda o usuário a entender quais elementos podem ser interagidos.</font></font>.</p>
+<p>O exemplo a seguir torna a cor do texto e do botão <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="O elemento HTML &lt;input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário;  uma ampla variedade de tipos de dados de entrada e widgets de controle estão disponíveis, dependendo do dispositivo e do agente do usuário.">&lt;input&gt;</a> </code>verde quando ativada e cinza quando desativada. Isso ajuda o usuário a entender quais elementos podem ser interagidos..</p>
 
 <div id="Enabled_Disabled_Inputs_Example">
 <h3 id="HTML">HTML</h3>

@@ -37,7 +37,7 @@ <h4 id="CSS">CSS</h4>
 
 <p>... resultado ...</p>
 
-<p><span>{{EmbedLiveSample('Exemplo_1',300,50)}}</span></p>
+<p>{{EmbedLiveSample('Exemplo_1',300,50)}}</p>
 
 <h3 id="Example_2_-_Using_UL" name="Example_2_-_Using_UL">Exemplo 2 - Usando UL</h3>