Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

CSS Protips Awesome

Uma coleção de dicas para aumentar as tuas habilidades no CSS.

Dá uma olhada em outras listas fantásticas mantidas por @sindresorhus.

Índice

Protips

  1. Usa um Reset CSS
  2. Herda o box-sizing
  3. Usa :not() para Aplicar/Remover Bordas
  4. Define o line-height no body
  5. Alinha Elementos Verticalmente
  6. Definir :focus para elementos de formulário
  7. Listas Separadas por Vírgula
  8. Seleciona Itens Usando nth-child Negativo
  9. Ícones SVG
  10. Usa o Seletor "Lobotomized Owl"
  11. Sliders em CSS com max-height
  12. Tabelas com Células de Tamanho Igual
  13. Esquece as "Margin Hacks", use Flexbox
  14. Usa Seletores de Atributo em Links Vazios
  15. Estiliza Links "Default"
  16. Espaçamento Vertical Consistente
  17. Div com Proporção de Tela Fixa
  18. Estiliza Imagens Quebradas
  19. Usa rem para Definir Tamanhos Globais; Usa em para Definir Tamanhos Locais
  20. Esconde Vídeos em Autoplay Que Não Estejam no modo Mudo
  21. Usa :root para uma Tipografia Flexível
  22. Defina font-size em Elementos de Formulário para uma Melhor Experiência Mobile
  23. Use eventos de ponteiro para controlar eventos do mouse

Usa um Reset CSS

Reiniciar o CSS vai ajudar te a manter a consistência de estilo em diferentes navegadores com um ponto de partida limpo para elementos de estilo. Tu podes usar a biblioteca de reset CSS como Normalize, ou se preferires,adota uma abordagem mais simplificada.:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Agora os elementos estão sem margens, preenchimento e box-sizing.Permitindo-te gerir o layout com o teu CSS.

Passeata

Nota: Se tu seguires o guia Herda o box-sizing abaixo, podes optar por não incluir a propriedade box-sizing na tua redefinição de CSS.

Regressar ao índice

Herda o box-sizing

Faz com que o box-sizing seja herdado do html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Assim fica mais fácil de alterar o box-sizing em plugins ou outros componentes que tenham um comportamento diferente.

Regressar ao índice

Usa :not() para Aplicar/Retirar Bordas

Ao invés de colocar a borda…

/* adiciona a borda */
.nav li {
  border-right: 1px solid #666;
}

…para então retirar o último elemento…

/* retira a borda */
.nav li:last-child {
  border-right: none;
}

…utiliza a pseudo-class :not() para aplicar a borda apenas nos elementos corretos:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Claro,podes usar .nav li + li ou até .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 seres humanos entendemos mais fácilmente.

Passeata

Regressar ao índice

Define o line-height no body

Não precisas de adicionar o line-height para cada <p>, <h*>, et al. separadamente. Apenas adiciona ao body:

body {
  line-height: 1.5;
}

Desta forma elementos de texto vão herdar o line-height do body.

Passeata

Regressar ao índice

Definir :focus para elementos de formulário

Os usuários de teclado com visão dependem do foco para determinar onde os eventos de teclado vão na página. Faça com que os elementos do formulário se foquem e sejam consistentes com a implementação padrão do navegador:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Passeata

Regressar ao índice

Alinha Elementos Verticalmente

Que bruxaria é essa? Não é bruxaria!Tu realmente podes centralizar elementos verticalmente:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

...e também com CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Isto não resolveu o teu problema? O site CSS-Tricks tem um guia completo em como centralizar elementos com CSS.

Aviso: Fica atento aos bugs quando estás a utilizar a flexbox no IE11.

Passeata

Regressar ao índice

Listas Separadas por Vírgula

Transforma listas normais em listas separadas por vírgula:

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: Tendo em conta acessibilidade esta dica pode não ser ideal, especialmente para utilizadores de leitores de tela. Além disso, copiar e/ou colar não funciona em conteúdo criado com CSS. Procede com cautela.

Regressar ao índice

Seleciona Itens Usando nth-child Negativo

Utilize nth-child negativo no CSS para selecionar itens de 1 a n.

li {
  display: none;
}

/* mostrar itens de 1 a 3 */
li:nth-child(-n+3) {
  display: block;
}

Já que aprendeste um bocadinho sobre como usar a pseudo-class using :not(), agora podes tentar:

/* seleciona todos os itens, exceto o primeiro 3 e exibe-os */
li:not(:nth-child(-n+3)) {
  display: none;
}

Mais fácil que isto não há.

Passeata

Regressar ao índice

Ícones SVG

Não há motivo nenhum para não usares ícones em SVG:

.logo {
  background: url("logo.svg");
}

A vantagem da SVG é que o ícone fica bom em qualquer resolução, além de ter suporte amplo em todos os browsers desde o IE9. Agora podes desfazer-te dos teus arquivos .png, .jpg, ou ainda .gif-jif-qissomano.

Aviso: Se tens botões feitos apenas com ícones SVG, a dica a seguir ajudará-te a manter a acessibilidade:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

Regressar ao índice

Usa o Seletor "Lobotomized Owl"

O nome é super estranho (traduzido literalmente para:"coruja lobotomizada"), mas o seu uso do seletor universal (*) com o seletor adjacente (+) pode ser muito útil:

* + * {
  margin-top: 1.5em;
}

Neste exemplo, todos os elementos acompanhados de outros elementos recebem margin-top: 1.5em.

Para mais exemplos utilizando o seletor "lobotomized owl", lê o artigo escrito por Heydon Pickering no site A List Apart.

Passeata

Regressar ao índice

Sliders em CSS com max-height

Cria sliders usando apenas CSS com max-height e overflow-y: hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

O elemento expandirá-se ao valor definido no max-height no hover e terás um slider devido ao uso do overflow.

Regressar ao índice

Tabelas com Células de Tamanho Igual

Não há nada mais chato do que trabalhar com tabelas, mas agora podes usar table-layout: fixed para manter as células do mesmo tamanho:

.calendar {
  table-layout: fixed;
}

Tabelas sem dores de cabeça.

Passeata

Regressar ao índice

Esquece as "Margin Hacks", usa a Flexbox

Quando definires o espaçamento entre as colunas,deixa os seletores nth-, first-, e last-child de lado e usa a propriedade space-between do flexbox:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Assim as colunas ficam espaçadas uniformemente.

Regressar ao índice

Usa Seletores de Atributo em Links Vazios

Mostra links para <a> tags vazias que possuem o atributo href:

a[href^="http"]:empty::before {
  content: attr(href);
}

Mão na roda.

Passeata

Regressar ao índice

Estiliza Links "Default"

Define estilos para links "default":

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Desta forma, links que foram inseridos por CMS – que normalmente não possuem o atributo class – vão ser estilizados sem comprometer outros links.

Regressar ao índice

Espaçamento Vertical Consistente

Usa o seletor universal dentro de um elemento para criar um espaçamento vertical consistente:

.intro > * {
  margin-bottom: 1.25rem;
}

Com um espaçamento vertical consistente o seu conteúdo fica visualmente mais agradável de ler.

Regressar ao índice

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:

.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 usares 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).

Passeata

Regressar ao índice

Estiliza Imagens Quebradas

Faz com que imagens quebradas fiquem esteticamente mais agradáveis com um pouquinho de CSS:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Agora adiciona regras com pseudo-elements para mostrar uma mensagem e a URL da imagem quebrada:

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;
}

Lê mais um pouco sobre como estilizar imagens quebradas no artigo original por Ire Aderinokun.

Regressar ao índice

Usa rem para Definir Tamanhos Globais; Usa em para Definir Tamanhos Locais

Depois de definires o tamanho de fonte base na raíz (html { font-size: 100%; }), define o tamanho de fonte para elementos de texto utilizando em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Então define o tamanho da fonte de módulos utilizando rem:

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.

Regressar ao índice

Esconde Vídeos em Autoplay Que Não Estejam no Mudo

Ótima dica para uma stylesheet personalizada. Evita sobrecarregar o utilizador com sons de vídeos em autoplay. Se o som não estiver no mudo, esconde o vídeo:

video[autoplay]:not([muted]) {
  display: none;
}

E aqui está mais uma entre as muitas vantagens de usar a pseudo-class :not().

Regressar ao índice

Usa :root para uma Typografia Flexível

O tamanho de fonte de um site responsive deverá ser ajustável de acordo com cada viewport.Podes calcular o tamanho da fonte baseando-te na largura e na altura do viewport usando :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Desta forma,podes utilizar a unidade de medida root em baseada no valor calculado por :root:

body {
  font: 1rem/1.6 sans-serif;
}

Passeata

Regressar ao índice

Defina font-size em Elementos de Formulário para uma Melhor Experiência Mobile

Para evitar zoom indesejado em elementos de formulários de navegadores mobile (iOS Safari, et al) quando um <select> é selecionado, adicione font-size no seletor:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

Regressar ao índice

Usa eventos de ponteiro para controlar eventos do mouse

Eventos de ponteiro permitem que você especifique como o mouse interage com o elemento que está tocando. Para desativar o evento de ponteiro padrão em um botão, por exemplo:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

É simples assim.

Regressar ao índice

Suporte

Versões atuais do Chrome, Firefox, Safari, Opera, Edge, e IE11.