Bonjour, Habr! Je vous présente la traduction de l'article «
Les 6 développeurs d'erreurs les plus courantes lors de l'écriture HTML et CSS » par Stas Melnikov.
Utilisation de l'attribut d'espace réservé au lieu de l'élément d'étiquette
Souvent, les développeurs utilisent l'attribut d'espace réservé au lieu de l'élément label. Mais dans ce cas, les utilisateurs de lecteur d'écran (lecteurs d'écran) ne peuvent pas remplir les champs car le lecteur d'écran ne peut pas lire le texte de l'attribut d'espace réservé.
<input type="email" placeholder="Enter your email">
Par conséquent, je recommande d'utiliser l'élément d'étiquette pour le champ de nom et l'attribut d'espace réservé, par exemple, les données que l'utilisateur doit remplir.
<label> <span>Enter your email</span> <input type="email" placeholder="eg example@gmail.com"> </label>
Utilisation de l'élément img pour disposer des graphiques décoratifs
Je vois souvent des développeurs confondre des graphiques décoratifs avec des images de contenu. Par exemple, ils balisent les icônes sociales à l'aide de l'élément img.
<a href="https://twitter.com" class="social"> <img class="social__icon" src="twitter.svg" alt> <span class="social__name">Twitter</span> </a>
Mais l'icône de réseau social est une icône décorative qui aide les utilisateurs à comprendre rapidement la signification d'un élément sans lire le texte. Si nous supprimons l'icône, nous ne perdons pas la valeur de l'élément, nous pouvons donc utiliser la propriété background-image pour cela.
<a href="https://twitter.com" class="social"> <span class="social__name">Twitter</span> </a>
.social::before { background-image: url("twitter.svg"); }
Utilisation de la propriété resize
Lorsque vous désactivez le redimensionnement d'une zone de texte à l'aide de la propriété resize, l'accessibilité est dégradée. Ainsi, l'utilisateur ne peut pas saisir de données de manière pratique.
textarea { width: 100%; height: 200px; resize: none; }
Vous pouvez utiliser les propriétés min-width, max-width, min-height et max-height, qui limitent la taille de l'élément, et l'utilisateur peut remplir les champs de manière pratique pour lui-même.
textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; }
Utilisation de l'affichage: bloc et position: absolu (fixe) ensemble.
Je vois souvent des développeurs utiliser les propriétés d'affichage et de position comme suit:
.button::before { content: ""; display: block; position: absolute; top: 0; left: 0; }
Mais le navigateur définit la valeur de bloc par défaut. Par conséquent, vous n'avez pas besoin d'ajouter cette valeur pour les éléments avec un positionnement absolu ou fixe. Par conséquent, le code suivant donne les mêmes résultats que le précédent.
.button::before { content: ""; position: absolute; top: 0; left: 0; }
Aucune valeur pour la propriété de structure
Je ne peux pas travailler avec le site Web en utilisant le clavier. Je ne peux pas suivre le lien. Je ne peux pas m'inscrire. En effet, les développeurs désactivent le focus sur les éléments lorsqu'ils n'en ajoutent aucun à la propriété de contour.
.button:focus { outline: none; } .button:focus { outline: 0; }
Si vous devez désactiver la mise au point par défaut, assurez-vous de définir l'état de mise au point alternative.
.button:focus { outline: none; box-shadow: 0 0 3px 0 blue; }
Éléments vides
Souvent, les développeurs utilisent des éléments HTML vides pour styliser les éléments. Par exemple, baliser un menu hamburger à l'aide d'éléments div ou span vides:
<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; }
Mais vous pouvez utiliser les pseudo-éléments :: avant et :: après et obtenir des résultats similaires.
<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; }