` element has no text value but the `href` attribute has a link:
```css
a[href^="http"]:empty::before {
@@ -334,7 +334,7 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott
}
.container div {
- border: 2px dashed #ddd;
+ border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
@@ -353,7 +353,7 @@ Using 20% for padding makes the height of the box equal to 20% of its width. No
Make broken images more aesthetically-pleasing with a little bit of CSS:
```css
-img {
+img {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
@@ -368,13 +368,13 @@ img {
Now add pseudo-elements rules to display a user message and URL reference of the broken image:
```css
-img:before {
+img:before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
-img:after {
+img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
@@ -391,7 +391,7 @@ Learn more about styling for this pattern in [Ire Aderinokun](https://github.com
After setting the base font size at the root (`html { font-size: 16px; }`), set the font size for textual elements to `em`:
```css
-h2 {
+h2 {
font-size: 2em;
}
@@ -462,5 +462,6 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.
* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
+* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
* [русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md
index d212c3aa..d1677438 100644
--- a/translations/es-ES/README.md
+++ b/translations/es-ES/README.md
@@ -98,7 +98,7 @@ No, no es magia negro, que realmente puede centrar verticalmente elementos:
```css
html, body {
- altura: 100%;
+ height: 100%;
margin: 0;
}
diff --git a/translations/pt-BR/README.md b/translations/pt-BR/README.md
new file mode 100644
index 00000000..825758f5
--- /dev/null
+++ b/translations/pt-BR/README.md
@@ -0,0 +1,467 @@
+
+ 
+
+
+# CSS Protips [](https://github.com/sindresorhus/awesome)
+
+Uma coleção de dicas para elevar suas habilidades de CSS.
+
+> Dê uma olhada em mais algumas [listas fantásticas](https://github.com/sindresorhus/awesome/) mantidas por [@sindresorhus](https://github.com/sindresorhus/).
+
+
+## Índice
+
+* [Protips](#protips)
+* [Suporte](#support)
+* [Traduções](#translations)
+* [Contribuição](../../CONTRIBUTING.md)
+
+
+## Protips
+
+1. [Use `:not()` para Aplicar/Remover Bordas](#use-not-to-applyunapply-borders-on-navigation)
+1. [Defina o `line-height` no `body`](#add-line-height-to-body)
+1. [Alinhe Elementos Verticalmente](#vertically-center-anything)
+1. [Listas Separadas por Vírgula](#comma-separated-lists)
+1. [Selecione Itens Usando `nth-child` Negativo](#select-items-using-negative-nth-child)
+1. [Ícones SVG](#use-svg-for-icons)
+1. [Use o Seletor "Lobotomized Owl"](#use-the-lobotomized-owl-selector)
+1. [Sliders em CSS com `max-height`](#use-max-height-for-pure-css-sliders)
+1. [Herde o `box-sizing`](#inherit-box-sizing)
+1. [Tabelas com Células de Tamanho Igual](#equal-width-table-cells)
+1. [Esqueça as "Margin Hacks", use Flexbox](#get-rid-of-margin-hacks-with-flexbox)
+1. [Use Seletores de Atributo em Links Vazios](#use-attribute-selectors-with-empty-links)
+1. [Estilize Links "Default"](#style-default-links)
+1. [Espaçamento Vertical Consistente](#consistent-vertical-rhythm)
+1. [Div com Proporção de Tela Fixa](#intrinsic-ratio-boxes)
+1. [Estilize Imagens Quebradas](#style-broken-images)
+1. [Use `rem` para Definir Tamanhos Globais; Use `em` para Definir Tamanhos Locais](#use-rem-for-global-sizing-use-em-for-local-sizing)
+1. [Esconda Vídeos em Autoplay Que Não Estejam no Mudo](#hide-autoplay-videos-that-arent-muted)
+1. [Use `:root` para uma Typografia Flexível](#use-root-for-flexible-type)
+
+
+### Use `:not()` para Aplicar/Remover Bordas
+
+Ao invés de colocar a borda…
+
+```css
+/* adiciona a borda */
+.nav li {
+ border-right: 1px solid #666;
+}
+```
+
+…para então remover no último elemento…
+
+```css
+/* remove a borda */
+.nav li:last-child {
+ border-right: none;
+}
+```
+
+…utilize a _pseudo-class_ `:not()` para aplicar a borda apenas nos elementos corretos:
+
+```css
+.nav li:not(:last-child) {
+ border-right: 1px solid #666;
+}
+```
+
+Claro, você poderia usar `.nav li + li` ou ainda `.nav li:first-child ~ li`, mas usando `:not()` a intenção fica mais clara e o seletor CSS passa a definir a borda de uma maneira que nós humanos entendemos mais claramente.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Defina o `line-height` no `body`
+
+Você não precisa adicionar o `line-height` para cada ``, ``, _et al_. separadamente. Apenas adicione ao `body`:
+
+```css
+body {
+ line-height: 1.5;
+}
+```
+
+Dessa maneira elementos de texto vão herdar o `line-height` do `body`.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Alinhe Elementos Verticalmente
+
+Que bruxaria é essa? Não é bruxaria! Você realmente pode centralizar elementos verticalmente:
+
+```css
+html, body {
+ height: 100%;
+ margin: 0;
+}
+
+body {
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-flex;
+ display: flex;
+}
+```
+
+Isso não resolveu seu problema? O site CSS-Tricks tem [um guia completo](https://css-tricks.com/centering-css-complete-guide/) de como centralizar elementos com CSS.
+
+**Aviso:** Fique atento com os [bugs](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) quando utilizar flexbox no IE11.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Listas Separadas por Vírgula
+
+Transforme listas normais em listas separadas por vírgula:
+
+```css
+ul > li:not(:last-child)::after {
+ content: ",";
+}
+```
+
+Utilize a _pseudo-class_ `:not()` para evitar que a vírgula seja adicionada depois do último item.
+
+**Aviso:** Se considerarmos acessibilidade essa dica pode não ser ideal, especialmente para usuários de leitores de tela. Além disso, copiar e/ou colar não funcionam em conteúdo criado com CSS. Proceda com cautela.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Selecione Itens Usando `nth-child` Negativo
+
+Utilize `nth-child` negativo no CSS para selecionar itens de 1 a n.
+
+```css
+li {
+ display: none;
+}
+
+/* mostrar itens de 1 a 3 */
+li:nth-child(-n+3) {
+ display: block;
+}
+```
+
+Já que você aprendeu um pouquinho sobre como usar a _pseudo-class_ [using `:not()`](#use-not-to-applyunapply-borders-on-navigation), você pode tentar:
+
+```css
+/* mostrar itens de 1 a 3 */
+li:not(:nth-child(-n+3)) {
+ display: none;
+}
+```
+
+Mais fácil que isso só dois disso.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Ícones SVG
+
+Não tem porque você não usar ícones em SVG:
+
+```css
+.logo {
+ background: url("logo.svg");
+}
+```
+
+A vantagem do SVG é que o ícone fica bom em qualquer resolução, além de ter suporte amplo em todos os browsers [desde o IE9](http://caniuse.com/#search=svg). Agora você pode se desfazer dos seus arquivos .png, .jpg, ou ainda .gif-jif-qissomano.
+
+**Aviso:** Se você tem botões feitos apenas com ícones SVG, a dica a seguir o ajudará a manter a acessibilidade:
+
+```css
+.no-svg .icon-only:after {
+ content: attr(aria-label);
+}
+```
+
+[voltar ao índice](#table-of-contents)
+
+
+### Use o Seletor "Lobotomized Owl"
+
+O nome é super estranho (coruja lobotomizada), mas o uso do seletor universal (`*`) com o seletor adjacente (`+`) pode ser muito útil:
+
+```css
+* + * {
+ margin-top: 1.5em;
+}
+```
+
+Nesse exemplo, todos os elementos acompanhados de outros elementos recebem `margin-top: 1.5em`.
+
+Para mais exemplos utilizando o seletor "lobotomized owl", leia [o artigo escrito por Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) no site *A List Apart*.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Sliders em CSS com `max-height`
+
+Crie _sliders_ usando apenas CSS com `max-height` e `overflow-y: hidden`:
+
+```css
+.slider {
+ max-height: 200px;
+ overflow-y: hidden;
+ width: 300px;
+}
+
+.slider:hover {
+ max-height: 600px;
+ overflow-y: scroll;
+}
+```
+
+O elemento se expandirá ao valor definido no `max-height` no _hover_ e você terá um _slider_ devido ao uso do overflow.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Herde o `box-sizing`
+
+Faça que o `box-sizing` seja herdado do `html`:
+
+```css
+html {
+ box-sizing: border-box;
+}
+
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+```
+
+Assim fica fácil de alterar o `box-sizing` em plugins ou outros componentes que tenham um comportamento diferente.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Tabelas com Células de Tamanho Igual
+
+Não tem nada mais chato do que trabalhar com tabelas, mas você pode usar `table-layout: fixed` para manter as células do mesmo tamanho:
+
+```css
+.calendar {
+ table-layout: fixed;
+}
+```
+
+Tabelas sem dor de cabeça.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Esqueça as "Margin Hacks", use Flexbox
+
+Quando definir o espaçamento entre as colunas, você pode deixar os seletores `nth-`, `first-`, e `last-child` de lado e usar a propriedade `space-between` do flexbox:
+
+```css
+.list {
+ display: flex;
+ justify-content: space-between;
+}
+
+.list .person {
+ flex-basis: 23%;
+}
+```
+
+Assim as colunas ficam espaçadas uniformemente.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Use Seletores de Atributo em Links Vazios
+
+Mostre links para `` tags vazias que possuem o atributo `href`:
+
+```css
+a[href^="http"]:empty::before {
+ content: attr(href);
+}
+```
+
+Mão na roda.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Estilize Links "Default"
+
+Defina estilos para links "default":
+
+```css
+a[href]:not([class]) {
+ color: #008000;
+ text-decoration: underline;
+}
+```
+
+Dessa forma, links que são inseridos por CMS – que normalmente não possuem o atributo `class` – vão ser estilizados sem comprometer outros links.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Espaçamento Vertical Consistente
+
+Use o seletor universal dentro de um elemento para criar um espaçamento vertical consistente:
+
+```css
+.intro > * {
+ margin-bottom: 1.25rem;
+}
+```
+
+Com um espaçamento vertical consistente o seu conteúdo fica visualmente mais agradável de ler.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Div com Proporção de Tela Fixa
+
+Para criar uma div com proporção de tela fixa, tudo que você precisa fazer é adicionar `padding` (`top` ou `bottom`) a div pai:
+
+```css
+.container {
+ height: 0;
+ padding-bottom: 20%;
+ position: relative;
+}
+
+.container div {
+ border: 2px dashed #ddd;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+```
+
+Se você usar 20% no `padding` a altura da div vai ser igual a 20% de sua largura. Independente da largura do _viewport_, a div filho vai sempre manter a proporção de tela (100% / 20% = 5:1).
+
+[voltar ao índice](#table-of-contents)
+
+
+### Estilize Imagens Quebradas
+
+Faça com que imagens quebradas fiquem esteticamente mais agradáveis com um pouquinho de CSS:
+
+```css
+img {
+ display: block;
+ font-family: Helvetica, Arial, sans-serif;
+ font-weight: 300;
+ height: auto;
+ line-height: 2;
+ position: relative;
+ text-align: center;
+ width: 100%;
+}
+```
+
+Agora adicione regras com _pseudo-elements_ para mostrar uma mensagem e a URL da imagem quebrada:
+
+```css
+img:before {
+ content: "Desculpe, a imagem abaixo não pode ser carregada :(";
+ display: block;
+ margin-bottom: 10px;
+}
+
+img:after {
+ content: "(url: " attr(src) ")";
+ display: block;
+ font-size: 12px;
+}
+```
+
+Leia mais sobre como estilizar imagens quebradas no [artigo original](http://bitsofco.de/styling-broken-images/) por [Ire Aderinokun](https://github.com/ireade/).
+
+[voltar ao índice](#table-of-contents)
+
+
+### UUse `rem` para Definir Tamanhos Globais; Use `em` para Definir Tamanhos Locais
+
+Depois de definir o tamanho de fonte base na raíz (`html { font-size: 16px; }`), defina o tamanho de fonte para elementos de texto utilizando `em`:
+
+```css
+h2 {
+ font-size: 2em;
+}
+
+p {
+ font-size: 1em;
+}
+```
+
+Então defina o tamanho da fonte de módulos utilizando `rem`:
+
+```css
+article {
+ font-size: 1.25rem;
+}
+
+aside .module {
+ font-size: .9rem;
+}
+```
+
+Assim fica mais fácil de estilizar e manter cada módulo, além de ser flexível.
+
+[voltar ao índice](#table-of-contents)
+
+
+### Esconda Vídeos em Autoplay Que Não Estejam no Mudo
+
+Ótima dica para uma _stylesheet_ personalizada. Evite sobrecarregar o usuário com som de vídeos em autoplay. Se o som não estiver no mudo, esconda o vídeo:
+
+```css
+video[autoplay]:not([muted]) {
+ display: none;
+}
+```
+
+E aqui mais uma entre as muitas vantagens de usar a _pseudo-class_ [`:not()`](#use-not-to-applyunapply-borders-on-navigation).
+
+[voltar ao índice](#table-of-contents)
+
+
+### Use `:root` para uma Typografia Flexível
+
+O tamanho de fonte de um site _responsive_ deveria ser ajustável de acordo com cada _viewport_. Você pode calcular o tamanho da fonte baseado na largura e na altura do _viewport_ usando `:root`:
+
+```css
+:root {
+ font-size: calc(1vw + 1vh + .5vmin);
+}
+```
+
+Assim você pode utilizar a unidade de medida `root em` baseada no valor calculado por `:root`:
+
+```css
+body {
+ font: 1em/1.6 sans-serif;
+}
+```
+
+[voltar ao índice](#table-of-contents)
+
+
+## Suporte
+
+Versões atuais do Chrome, Firefox, Safari, Opera, Edge, e IE11.
+
+
+## Traduções
+
+* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
+* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
+* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
+* [русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
+* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)