6 kesalahan paling umum yang dibuat pengembang saat menulis HTML dan CSS

Halo, Habr! Saya sajikan kepada Anda terjemahan artikel " 6 pengembang kesalahan paling umum saat menulis HTML dan CSS " oleh Stas Melnikov.

Menggunakan atribut placeholder alih-alih elemen label

Seringkali, pengembang menggunakan atribut placeholder alih-alih elemen label. Tetapi dalam kasus ini, pengguna pembaca layar (pembaca layar) tidak dapat mengisi bidang karena pembaca layar tidak dapat membaca teks dari atribut placeholder.

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

Oleh karena itu, saya sarankan menggunakan elemen label untuk bidang nama dan atribut placeholder sebagai contoh data yang harus diisi pengguna.

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

Menggunakan elemen img untuk meletakkan grafis dekoratif

Saya sering melihat pengembang mengacaukan gambar dekoratif dengan gambar konten. Misalnya, mereka menandai ikon sosial menggunakan elemen img.

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

Tetapi ikon jejaring sosial adalah ikon dekoratif yang membantu pengguna dengan cepat memahami makna elemen tanpa membaca teks. Jika kita menghapus ikon, kita tidak kehilangan nilai elemen, sehingga kita dapat menggunakan properti gambar latar untuk itu.

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

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

Menggunakan properti resize

Saat menonaktifkan pengubahan ukuran area teks menggunakan properti pengubahan ukuran, aksesibilitas terdegradasi. Dengan demikian, pengguna tidak dapat memasukkan data dengan cara yang mudah.

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

Anda dapat menggunakan properti min-width, max-width, min-height dan max-height, yang membatasi ukuran elemen, dan pengguna dapat mengisi kolom dengan cara yang mudah untuk diri mereka sendiri.

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

Menggunakan tampilan: blok dan posisi: absolut (tetap) bersama.

Saya sering melihat pengembang menggunakan properti tampilan dan posisi sebagai berikut:

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

Tetapi browser menetapkan nilai blok default. Karenanya, Anda tidak perlu menambahkan nilai ini untuk elemen dengan penentuan posisi absolut atau tetap. Oleh karena itu, kode berikut memberikan hasil yang sama dengan yang sebelumnya.

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

Tidak ada nilai untuk properti struktur

Saya tidak dapat bekerja dengan situs web menggunakan keyboard. Saya tidak bisa mengikuti tautannya. Saya tidak bisa mendaftar. Ini karena pengembang mematikan fokus pada elemen ketika mereka tidak menambahkan properti outline.

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

Jika Anda harus mematikan fokus secara default, pastikan untuk membuat status fokus alternatif.

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

Item kosong

Seringkali, pengembang menggunakan elemen HTML kosong untuk elemen gaya. Misalnya, menandai menu hamburger menggunakan elemen div atau span kosong:

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

Tetapi Anda dapat menggunakan pseudo-elements :: before dan :: after dan mencapai hasil yang serupa.

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