Bordas pontilhadas ao redor dos links são um recurso de acessibilidade que a maioria dos navegadores tem por padrão. É para usuários que devem ou optam por navegar pelo teclado, lá "

Webkit-tap-highlight-color: rgba (0,0,0,0); E para permitir: estilos ativos funcionem em seu CSS em uma página do Mobile Safari: "

Esta página lista uma tonelada de diferentes dispositivos e consultas de mídia que visam especificamente aquele dispositivo. Isso provavelmente não é geralmente uma boa prática, mas é útil saber quais são as dimensões de todos esses dispositivos em um contexto CSS. "

Às vezes, pode ser desejável remover a margem superior ou esquerda do primeiro elemento em um contêiner. Da mesma forma, a margem direita ou inferior do último "

A (contorno: 0;) Cuidado ao remover estilos de contorno dos links, pois são um recurso de usabilidade. Se o fizer, certifique-se de definir estilos de foco claros. Se"

Para idiomas da direita para a esquerda, você pode trocar o layout padrão da esquerda para a direita na maioria dos navegadores simplesmente por meio do atributo dir. texto da direita para a esquerda "

Há momentos em que uma seqüência de texto muito longa pode estourar o contêiner de um layout. Por exemplo: URLs normalmente não têm espaços, então eles "

Por incluir gráficos de alta resolução, mas apenas para telas que possam fazer uso deles. "Retina" sendo "2x": @media (-webkit-min-device-pixel-ratio: 2), "

Todo mundo adora fitas

.ribbon (font-size: 16px! important; / * This ribbon "

Traga seus próprios prefixos! .grow (transição: all .2s easy-in-out;) .grow: hover (transform: scale (1.1);) "

Padrão: -moz-border-radius: 10px; -webkit-border-radius: 10px; raio da borda: 10px; / * verificação futura * / -khtml-border-radius: 10px; / * para o antigo "

Isso pressupõe o uso de um autoprefixer. .face: hover (animação: agitar 0,82s cúbico-bezier (0,36, 0,07, 0,19, 0,97) ambos; transform: translate3d (0, 0, 0); "

Qualquer link de âncora antigo pode ser um link para um documento PDF, mas clicar em um link como esse pensando o contrário pode ser surpreendente e desconfortável para o usuário. Esta"

Por padrão, todas as versões do IE têm uma barra de rolagem nas áreas de texto, mesmo quando estão vazias. Nenhum outro navegador faz isso, então, se você quiser removê-lo para que o IE possa "

Do rodapé do design v8 de CSS-Tricks. Ver rodapé de demonstração (limpar: ambos; overflow: hidden; font-size: 16px; line-height: 1.3;) # footer-boxes ("

Requer jQuery e jQuery UI para o controle deslizante real. A face é feita de elementos formados em círculos com raio de borda. A boca, indicando felicidade "

O blockquote é exibido em navegadores compatíveis com os padrões com o efeito "aspas grandes antes de" e no IE com uma borda esquerda espessa e um cinza claro "

H1 # logo (largura: 200px; // largura da altura da imagem: 100px; // altura do fundo da imagem: url (../ caminho / para / imagem.jpg.webp); indentação do texto: -9999px;) Esta técnica "

Aqui está o Google Code Prettify (encontrado nesta fonte). .prettyprint (color: # 839496; background-color: # 002b36;) .prettyprint .pln (color: inherit;) "

Home Catálogo Preço Sobre Contato nav (largura: 960px; altura: 100px; margem: 120px automático; alinhamento de texto: centro;) .top-menu li (exibição: bloco em linha; "