Die 6 häufigsten Fehler, die Entwickler beim Schreiben von HTML und CSS machen

Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels " Die 6 häufigsten Fehler Entwickler beim Schreiben von HTML und CSS " von Stas Melnikov.

Verwenden Sie das Platzhalterattribut anstelle des Beschriftungselements

Entwickler verwenden häufig das Platzhalterattribut anstelle des Beschriftungselements. In diesem Fall können Benutzer von Bildschirmleseprogrammen (Bildschirmleseprogramme) die Felder nicht ausfüllen, da das Bildschirmleseprogramm den Text aus dem Platzhalterattribut nicht lesen kann.

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

Daher empfehle ich, das label-Element für das Namensfeld und das Platzhalterattribut zu verwenden, zum Beispiel Daten, die der Benutzer ausfüllen muss.

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

Verwenden Sie das Element img, um dekorative Grafiken zu erstellen

Ich sehe oft Entwickler, die dekorative Grafiken mit Inhaltsbildern verwechseln. Zum Beispiel markieren sie soziale Symbole mit dem Element img.

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

Das soziale Netzwerksymbol ist jedoch ein dekoratives Symbol, mit dem Benutzer die Bedeutung eines Elements schnell verstehen können, ohne den Text zu lesen. Wenn wir das Symbol entfernen, verlieren wir den Wert des Elements nicht, sodass wir die Eigenschaft background-image dafür verwenden können.

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

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

Verwenden der Größenänderungseigenschaft

Wenn Sie die Größenänderung eines Textbereichs mithilfe der Größenänderungseigenschaft deaktivieren, wird die Barrierefreiheit beeinträchtigt. Daher kann der Benutzer keine Daten auf bequeme Weise eingeben.

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

Sie können die Eigenschaften min-width, max-width, min-height und max-height verwenden, die die Größe des Elements begrenzen, und der Benutzer kann die Felder auf bequeme Weise ausfüllen.

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

Verwendung von Anzeige: Satz und Position: absolut (fest) zusammen.

Ich sehe oft, dass Entwickler die Anzeige- und Positionseigenschaften wie folgt verwenden:

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

Der Browser legt jedoch den Standardblockwert fest. Daher müssen Sie diesen Wert nicht für Elemente mit absoluter oder fester Positionierung hinzufügen. Daher gibt der folgende Code die gleichen Ergebnisse wie der vorherige.

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

Kein Wert für die Struktureigenschaft

Ich kann mit der Website nicht über die Tastatur arbeiten. Ich kann dem Link nicht folgen. Ich kann mich nicht registrieren. Dies liegt daran, dass Entwickler den Fokus auf Elemente deaktivieren, wenn sie der Gliederungseigenschaft keine Elemente hinzufügen.

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

Wenn Sie den Fokus standardmäßig deaktivieren müssen, stellen Sie sicher, dass der Status des alternativen Fokus eingestellt ist.

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

Leere Gegenstände

Häufig verwenden Entwickler leere HTML-Elemente, um Elemente zu formatieren. So markieren Sie beispielsweise ein Hamburger-Menü mit leeren div- oder span-Elementen:

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

Sie können aber die Pseudoelemente :: vorher und :: nachher verwenden und ähnliche Ergebnisse erzielen.

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