Os 6 erros mais comuns que os desenvolvedores cometem ao escrever HTML e CSS

Olá Habr! Apresento a você a tradução do artigo “ Os 6 erros mais comuns dos desenvolvedores ao escrever HTML e CSS ” por Stas Melnikov.

Usando o atributo placeholder em vez do elemento label

Muitas vezes, os desenvolvedores usam o atributo placeholder em vez do elemento label. Porém, nesse caso, os usuários de leitores de tela (leitores de tela) não podem preencher os campos, porque o leitor de tela não pode ler o texto do atributo de espaço reservado.

<input type="email" placeholder="Enter your email"> 

Portanto, recomendo usar o elemento label para o campo name e o atributo placeholder, por exemplo, dados que o usuário deve preencher.

 <label> <span>Enter your email</span> <input type="email" placeholder="eg example@gmail.com"> </label> 

Usando o elemento img para criar gráficos decorativos

Muitas vezes vejo desenvolvedores confundirem gráficos decorativos com imagens de conteúdo. Por exemplo, eles marcam ícones sociais usando o elemento img.

 <a href="https://twitter.com" class="social"> <img class="social__icon" src="twitter.svg" alt> <span class="social__name">Twitter</span> </a> 

Mas o ícone de rede social é um ícone decorativo que ajuda os usuários a entender rapidamente o significado de um elemento sem ler o texto. Se removermos o ícone, não perderemos o valor do elemento, para que possamos usar a propriedade background-image.

 <a href="https://twitter.com" class="social"> <span class="social__name">Twitter</span> </a> 

 .social::before { background-image: url("twitter.svg"); } 

Usando a propriedade redimensionar

Ao desativar o redimensionamento de uma área de texto usando a propriedade redimensionar, a acessibilidade é reduzida. Assim, o usuário não pode inserir dados de maneira conveniente.

 textarea { width: 100%; height: 200px; resize: none; } 

Você pode usar as propriedades min-width, max-width, min-height e max-height, que limitam o tamanho do elemento, e o usuário pode preencher os campos de maneira conveniente para si.

 textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; } 

Usando display: bloco e posição: absoluto (fixo) juntos.

Muitas vezes vejo os desenvolvedores usarem as propriedades de exibição e posição da seguinte maneira:

 .button::before { content: ""; display: block; position: absolute; top: 0; left: 0; } 

Mas o navegador define o valor padrão do bloco. Portanto, você não precisa adicionar esse valor para elementos com posicionamento absoluto ou fixo. Portanto, o código a seguir fornece os mesmos resultados que o anterior.

 .button::before { content: ""; position: absolute; top: 0; left: 0; } 

Nenhum valor para a propriedade da estrutura

Não consigo trabalhar com o site usando o teclado. Não consigo seguir o link. Não consigo me registrar. Isso ocorre porque os desenvolvedores desativam o foco nos elementos quando eles não adicionam nenhum à propriedade de estrutura de tópicos.

 .button:focus { outline: none; } /* or */ .button:focus { outline: 0; } 

Se você precisar desativar o foco por padrão, verifique o estado do foco alternativo.

 .button:focus { outline: none; box-shadow: 0 0 3px 0 blue; } 

Itens vazios

Geralmente, os desenvolvedores usam elementos HTML vazios para estilizar elementos. Por exemplo, marcando um menu de hambúrguer usando elementos div ou span vazios:

 <button class="hamburger"> <span></span> <span></span> <span></span> </button> 

 .hamburger { width: 60px; height: 45px; position: relative; } .hamburger span { width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 18px; } .hamburger span:nth-child(3) { top: 36px; } 

Mas você pode usar os pseudoelementos :: before e :: after e obter resultados semelhantes.

 <button class="hamburger"> <span class="hamburger__text"> <span class="visually-hidden">Open menu</span> </span> </button> 

 .hamburger { width: 60px; height: 45px; position: relative; } .hamburger::before, .hamburger::after, .hamburger__text::before { content: ""; width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger::before { top: 0; } .hamburger::after { top: 18px; } .hamburger__text::before { top: 36px; } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px !important; height: 1px !important; overflow: hidden; }