Translation fix in /make-typography-responsive.portuguese.md (#36902)
* Translation fix Changed the term "portas de visualização" back to "viewport", because it is a technical term, and when translated it loses its meaning * Changes in the blockquote tag The code inside the blockquote tag was translated to portuguese, but code shouldn't be translated because then it doesn't work, so I changed it to the same code of the English version of the challenge. Also, I changed "A Camper Cat" to "O Camper Cat" in the line 13 because on other pages Camper Cat is referred as male, so it makes more sense to use the article "O" in portuguese.
This commit is contained in:
LeoGuilherme
mrugesh
@ -7,10 +7,10 @@ localeTitle: Tornar os elementos visíveis apenas para um leitor de tela usando
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você já reparou que todos os desafios de acessibilidade aplicados até agora não usaram nenhum CSS? Isso é para mostrar a importância de um esboço de documento lógico e usar tags semanticamente significativas ao redor do seu conteúdo antes de introduzir o aspecto do design visual. No entanto, a mágica do CSS também pode melhorar a acessibilidade em sua página quando você deseja ocultar visualmente o conteúdo destinado apenas a leitores de tela. Isso acontece quando as informações estão em um formato visual (como um gráfico), mas os usuários de leitores de tela precisam de uma apresentação alternativa (como uma tabela) para acessar os dados. O CSS é usado para posicionar os elementos somente leitura da tela fora da área visual da janela do navegador. Aqui está um exemplo das regras CSS que fazem isso: <blockquote> .sr-only { <br> posição: absoluta; <br> esquerda: -10000px; <br> largura: 1px; <br> altura: 1px; <br> top: auto; <br> estouro: oculto; <br> } </blockquote> <strong>Nota</strong> <br> As seguintes abordagens CSS NÃO farão o mesmo: <ul><li> <code>display: none;</code> ou <code>visibility: hidden;</code> oculta conteúdo para todos, incluindo usuários de leitores de tela </li><li> Valores zero para tamanhos de pixel, como <code>width: 0px; height: 0px;</code> remove esse elemento do fluxo do seu documento, o que significa que os leitores de tela o ignoram </li></ul></section>
|
||||
<section id="description"> Você já reparou que todos os desafios de acessibilidade aplicados até agora não usaram nenhum CSS? Isso é para mostrar a importância de um esboço de documento lógico e usar tags semanticamente significativas ao redor do seu conteúdo antes de introduzir o aspecto do design visual. No entanto, a mágica do CSS também pode melhorar a acessibilidade em sua página quando você deseja ocultar visualmente o conteúdo destinado apenas a leitores de tela. Isso acontece quando as informações estão em um formato visual (como um gráfico), mas os usuários de leitores de tela precisam de uma apresentação alternativa (como uma tabela) para acessar os dados. O CSS é usado para posicionar os elementos somente leitura da tela fora da área visual da janela do navegador. Aqui está um exemplo das regras CSS que fazem isso: <blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote> <strong>Nota</strong> <br> As seguintes abordagens CSS NÃO farão o mesmo: <ul><li> <code>display: none;</code> ou <code>visibility: hidden;</code> oculta conteúdo para todos, incluindo usuários de leitores de tela </li><li> Valores zero para tamanhos de pixel, como <code>width: 0px; height: 0px;</code> remove esse elemento do fluxo do seu documento, o que significa que os leitores de tela o ignoram </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A Camper Cat criou um gráfico de barras muito legal para sua página de treinamento e colocou os dados em uma tabela para seus usuários com deficiência visual. A tabela já tem uma classe <code>sr-only</code> , mas as regras CSS ainda não foram preenchidas. Atribua à <code>position</code> um valor absoluto, a <code>left</code> um valor de -10000px e a <code>width</code> e a <code>height</code> ambos os valores de 1px. </section>
|
||||
<section id="instructions"> O Camper Cat criou um gráfico de barras muito legal para sua página de treinamento e colocou os dados em uma tabela para seus usuários com deficiência visual. A tabela já tem uma classe <code>sr-only</code> , mas as regras CSS ainda não foram preenchidas. Atribua à <code>position</code> um valor absoluto, a <code>left</code> um valor de -10000px e a <code>width</code> e a <code>height</code> ambos os valores de 1px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Faça tipografia responsiva
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em vez de usar <code>em</code> ou <code>px</code> para dimensionar texto, você pode usar unidades de viewport para tipografia responsiva. As unidades de viewport, como porcentagens, são unidades relativas, mas são baseadas em itens diferentes. As unidades de porta de visualização são relativas às dimensões da janela de visualização (largura ou altura) de um dispositivo e as porcentagens são relativas ao tamanho do elemento de contêiner pai. As quatro unidades de viewport diferentes são: <ul><li> <code>vw: 10vw</code> seria 10% da largura da janela de visualização. </li><li> <code>vh: 3vh</code> seria 3% da altura da viewport. </li><li> <code>vmin: 70vmin</code> seria 70% da dimensão menor da viewport (altura vs. largura). </li><li> <code>vmax: 100vmax</code> seria 100% da dimensão maior da viewport (altura vs. largura). </li></ul></section>
|
||||
<section id="description"> Em vez de usar <code>em</code> ou <code>px</code> para dimensionar texto, você pode usar unidades de viewport para tipografia responsiva. As unidades de viewport, como porcentagens, são unidades relativas, mas são baseadas em itens diferentes. As unidades de viewport são relativas às dimensões da janela de visualização (largura ou altura) de um dispositivo e as porcentagens são relativas ao tamanho do elemento de contêiner pai. As quatro unidades de viewport diferentes são: <ul><li> <code>vw: 10vw</code> seria 10% da largura da janela de visualização. </li><li> <code>vh: 3vh</code> seria 3% da altura da viewport. </li><li> <code>vmin: 70vmin</code> seria 70% da dimensão menor da viewport (altura vs. largura). </li><li> <code>vmax: 100vmax</code> seria 100% da dimensão maior da viewport (altura vs. largura). </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina a <code>width</code> da tag <code>h2</code> para 80% da largura da viewport e a <code>width</code> do parágrafo como 75% da dimensão menor da viewport. </section>
|
||||
|
||||
Reference in New Issue
Block a user