Geliştiricilerin HTML ve CSS yazarken yaptığı en yaygın altı hata
Hayatta hata yapmak normaldir, bırakın geliştiriciler, kimse hata yapmaz mı? Bugün, geliştiricilerin HTML ve CSS yazarken yaptığı en yaygın altı hataya bir göz atacağız.
Yazar | Stas Melnikov
Çevirmen | Crescent Moon, Baş Editör | Liu Jing
Üretildi | CSDN (ID: CSDNnews)
Aşağıdaki çeviridir:
Etiket öğesi yerine yer tutucu özelliğini kullanın
Geliştiriciler genellikle etiket öğeleri yerine yer tutucu öznitelikleri kullanır. Ancak bu şekilde, ekran okuyucuları yer tutucu özelliğinden metin okuyamayacağı için ekran okuyucu kullanan kullanıcılar alanları dolduramazlar.
< input type = "email" placeholder = "E-postanızı girin" >Bu nedenle, alan adını görüntülemek için etiket öğesini kullanmanızı öneririm ve yer tutucunun, kullanıcının doldurması gereken verilerde örnek olarak gösterilmesi gerekir.
< etiket > < açıklık > E-postanızı giriniz < / span > < input type = "email" placeholder = "ör. örnek @ gmail .com " > < /etiket >
Resmi dekorasyon için işaretlemek için img öğesini kullanın
Genellikle geliştiricilerin dekorasyon resimlerini ve içerik resimlerini karıştırdığını görüyorum. Örneğin, sosyal simgeleri görüntülemek için img öğesini kullanacaklar.
< a href = "https: // twitter .com "sınıf =" sosyal " > < img class = "social__icon" src = "twitter.svg" alt > < span class = "social__name" > Twitter < / span > < / a >Bununla birlikte, sosyal simgeler, amacı kullanıcıların metni okumak zorunda kalmadan öğelerin anlamını çabucak anlamalarına yardımcı olmak olan dekoratif simgelerdir. Bu simgeleri silsek bile, öğelerin anlamı kaybolmayacaktır, bu nedenle background-image özelliğini kullanmalıyız.
< a href = "https: // twitter .com "sınıf =" sosyal " > < span class = "social__name" > Twitter < / span > < / a > .social :: önce { arkaplan resmi: url ("twitter.svg"); }
Resize özelliğini kullanın
Metin alanının yeniden boyutlandırılmasını engellemek için yeniden boyutlandırma özelliğini kullanırsanız, erişilebilirliği yok edersiniz. Çünkü kullanıcı rahat veri girişi yapamıyor.
textarea { genişlik:% 100; yükseklik: 200px; yeniden boyutlandırma: yok; }Min-width, max-width, min-height ve max-height özelliklerini kullanmalısınız, bu özellikler öğenin boyutunu sınırlayabilir ve kullanıcılar verileri rahatça girebilir.
textarea { min-genişlik:% 100; maksimum genişlik:% 100; min-yükseklik: 200px; maksimum yükseklik: 400 piksel; }
Display: block ve position: mutlak (sabit) aynı anda kullanın
Geliştiricilerin görüntüleme ve konum özelliklerini şu şekilde kullandığını sık sık görüyorum:
.button :: before { içerik: ""; Ekran bloğu; konum: mutlak; üst: 0; sol: 0; }Ancak, tarayıcı varsayılan olarak engellemeyi ayarlayacaktır. Bu nedenle, mutlak veya sabit öğeler için bu değeri ayarlamanıza gerek yoktur. Başka bir deyişle, aşağıdaki kodun sonucu yukarıdaki kodla tamamen aynıdır.
.button :: before { içerik: ""; konum: mutlak; üst: 0; sol: 0; }
Outline özelliğinin hiçbir değeri
Web sitesine klavye ile erişilemiyor; bağlantı açılamıyor; kayıt yapılamıyor vb. Bu durumlar, geliştiricinin anahat özniteliğini yok değerine ayarlaması nedeniyle oluşur, bu nedenle öğeye odaklanılamaz.
.button: focus { anahat: yok; } / * veya * / .button: focus { anahat: 0; }Varsayılan odağı devre dışı bırakmanız gerekirse, bunun yerine odak durumunu belirtmeyi unutmayın.
.button: focus { anahat: yok; kutu gölgesi: 00 3px 0 mavi; }
Boş öğe
Geliştiriciler, öğelerin stilini ayarlamak için genellikle HTML boş öğeleri kullanır. Örneğin, gezinme çubuğu menüsünü görüntülemek için boş div veya span öğelerini kullanın.
< düğme sınıfı = "hamburger" > < açıklık > < / span > < açıklık > < / span > < açıklık > < / span > < /buton > .Hamburger { genişlik: 60px; yükseklik: 45px; konum: göreceli; } .hamburger span { genişlik:% 100; yükseklik: 9px; arka plan rengi: # d3531a; kenarlık yarıçapı: 9px; konum: mutlak; sol: 0; } .hamburger aralığı: nth-child (1) { üst: 0; } .hamburger aralığı: nth-child (2) { üst: 18px; } .hamburger aralığı: nth-child (3) { üst: 36px; }Aslında, aynı etkiyi elde etmek için sözde elemanlardan :: önce ve :: sonra kullanabilirsiniz.
< düğme sınıfı = "hamburger" > < span class = "hamburger__text" > < span class = "görsel olarak yüksek gg en " > Menüyü aç < / span > < / span > < /buton > .Hamburger { genişlik: 60px; yükseklik: 45px; konum: göreceli; } .hamburger :: önce, .hamburger :: sonra, .hamburger__text :: önce { içerik: ""; genişlik:% 100; yükseklik: 9px; arka plan rengi: # d3531a; kenarlık yarıçapı: 9px; konum: mutlak; sol: 0; } .hamburger :: önce { üst: 0; } .hamburger :: after { üst: 18px; } .hamburger__text :: önce { üst: 36px; } .visually-hi gg en { konum: mutlak! önemli; klip: rect (1px, 1px, 1px, 1px); genişlik: 1px! önemli; yükseklik: 1px! önemli; taşma: merhaba gg en; }Orijinal: https://dev.to/melnik909/the-6-most-common-mistakes-developers-when-writing-html-and-css-f92
Bu makale bir CSDN çevirisidir, lütfen yeniden basımın kaynağını belirtin.
SON
