Plato Veri Zekası.
Dikey Arama ve Yapay Zeka.

Good Ol' HTML Listeleri Hakkında Bilmeniz Gereken Daha Yeni Şeyler

Tarih:

HTML listeleri sıkıcıdır. onlar yapmaz do çok, bu yüzden ne kadar yaygın olarak kullanılsalar da onlar hakkında gerçekten düşünmüyoruz. İşaretçileri kaldırmak, sırayı tersine çevirmek ve özel sayaçlar yapmak gibi bunları özelleştirmek için her zaman yaptığımız şeyleri hâlâ yapabiliyoruz.

Bununla birlikte, listeleri kullanırken bilinmesi gereken - tehlikeler de dahil olmak üzere - birkaç "daha yeni" şey vardır. Tehlikeler çoğunlukla küçüktür, ancak düşündüğünüzden çok daha yaygındır. Bunlara, ayrıca listelerle yapabileceğimiz bazı yeni şeylere ve hatta eski çözümlere yaklaşmanın yeni yollarına değineceğiz.

Açıklığa kavuşturmak için, bahsettiğimiz HTML öğeleri şunlardır:

  • sıralı listeler <ol>
  • Sırasız listeler <ul>
  • Açıklama listeleri <dl>
  • Etkileşimli listeler <menu>

Sıralı listeler, sırasız listeler ve etkileşimli listeler liste öğeleri içerir (<li>) hangi tür listelerle uğraştığımıza göre görüntülenir. Sıralı bir liste (<ol>) liste öğelerinin yanında sayıları görüntüler. Sırasız listeler (<ul>) ve menü öğeleri (<menu>) liste öğelerinin yanında madde işaretleri görüntüler. Bunlara "liste işaretleri" diyoruz ve tarz bile olabilirler ile ::işaretleyici sözde eleman Açıklama listeleri açıklama terimlerini kullanır (<dt>) ve açıklama ayrıntıları (<dd>) yerine <li> ve liste işaretleyicileri yok. Meta verileri ve sözlükleri görüntülemek için kullanılmaları gerekiyordu, ancak onları vahşi doğada gördüğümü söyleyemem.

Kolay şeylerle başlayalım - (en azından bence) liste stillerini nasıl doğru bir şekilde sıfırlayacağız. Bundan sonra, zor olana ışık tutmadan önce birkaç erişilebilirlik sorununa göz atacağız. <menu> öğrenince şaşıracağınız element... aslında bir çeşit liste!

Liste stillerini sıfırlama

Tarayıcılar, kutudan çıkar çıkmaz listelerin görsel yapısına yardımcı olmak için kendi Kullanıcı Aracısı stillerini otomatik olarak uygular. Bu harika olabilir! Ancak, stil fikirlerinden arınmış boş bir sayfa ile başlamak istiyorsak, önce bu stilleri sıfırlamamız gerekir.

Örneğin, liste öğelerinin yanındaki işaretçileri oldukça kolay bir şekilde kaldırabiliriz. Burada yeni bir şey yok:

/* Zap all list markers! */
ol, ul, menu { list-style: none;
}

Ancak modern CSS, belirli liste örneklerini hedeflememize yardımcı olacak yeni yöntemlere sahiptir. Diyelim ki tüm listelerdeki işaretçileri silmek istiyoruz, bu listelerin içinde görünmesi durumu hariç. makale gibi uzun biçimli içerik. Daha yeni CSS sözde sınıf işlevlerinin güçlerini birleştirirsek :where() ve :not(), bu örnekleri izole edebilir ve bu durumlarda işaretçilere izin verebiliriz:

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) { list-style: none;
}

Neden kullanım :where() yerine :is()? özgüllüğü :where() her zaman sıfırdır, halbuki :is() Seçiciler listesindeki en özel öğenin özgüllüğünü alır. Yani, kullanarak :where() şeyleri geçersiz kılmanın daha az güçlü bir yoludur ve kendisi kolayca geçersiz kılınabilir.

UA stilleri ayrıca bir liste öğesinin içeriğini işaretçisinden ayırmak için dolgu uygular. Yine, bu, bazı durumlarda kutudan çıkar çıkmaz oldukça hoş bir uygunluktur, ancak yukarıda yaptığımız gibi liste işaretçilerini zaten kaldırıyorsak, o zaman bu dolguyu da silebiliriz. Bu başka bir durum için :where():

:where(ol, ul, menu) { padding-left: 0; /* or padding-inline-start */
}

Tamam, bu, işaretsiz liste öğelerinin boşlukta yüzer gibi görünmesini engelleyecek. Ama bebeği banyo suyuyla birlikte bir şekilde dışarı attık ve daha önce izole ettiğimiz örnekler de dahil olmak üzere tüm durumlarda dolguyu kaldırdık. <article>. Yani, şimdi işaretçileri olan listeler, içerik kutusunun kenarından sarkıyor.

UA stillerinin fazladan uygulandığına dikkat edin. 40px için <menu> eleman.

Yani yapmak istediğimiz, liste işaretçilerinin kabın dışında "takılmasını" engellemektir. ile bunu düzeltebiliriz. list-style-position özelliği:

Ya da değil… belki stil tercihine bağlıdır?

Listelerle ilgili daha yeni erişilebilirlik endişeleri

Ne yazık ki, söz konusu listeler olduğunda, bu daha modern zamanlarda bile birkaç erişilebilirlik endişesi var. Bir endişe, uygulamanın bir sonucudur list-style: none; UA stillerini sıfırlarken yaptığımız gibi.

Özetle, Safari değil stiline sahip sıralı ve sırasız listeleri oku list-style: none bir ekran okuyucuyla içerikte gezinirken olduğu gibi gerçek listeler olarak. Başka bir deyişle, işaretçileri kaldırmak, listenin anlamsal anlamını da ortadan kaldırır. bu bu düzeltme için düzeltme uygulamak bir ARIA list listedeki rolü ve listitem liste öğelerinin rolü bu nedenle ekran okuyucular bunları alacaktır:

<ol style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ol> <ul style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ul>

Garip bir şekilde, Safari bunu bir özellik olarak görüyor bir böcek yerine. Temel olarak, kullanıcılar ekran okuyucuların çok fazla liste duyurduğunu bildirir (çünkü geliştiriciler bunları aşırı kullanma eğilimindedir), bu nedenle şimdi yalnızca role="list" aslında o kadar da tuhaf olmayan ekran okuyucular tarafından duyurulur. Scott O'Hara Sahiptir-A ayrıntılı özet her şeyin nasıl düştüğünü.

İkinci bir erişilebilirlik endişesi, kendi yapımımız değil (yaşasın!). Yani, nasıl olduğunu biliyorsun yapman gerekiyordu Bir ekleme aria-label için <section> başlıksız öğeler? Bazen, listeyi açıklamaya yardımcı olan bir başlık öğesi içermeyen bir listeyle aynı şeyi yapmak mantıklıdır.

<!-- This list is somewhat described by the heading -->
<section> <h2>Grocery list</h2> <ol role="list"> <!-- ... --> </ol>
</section> <!-- This list is described by the aria-label -->
<ol role="list" aria-label="Grocery list"> <!-- ... -->
</ol>

Sen kesinlikle değil mi herhangi bir yöntemi kullanmak zorunda. Bir başlık veya ARIA etiketi kullanmak bir gereklilik değil, yalnızca eklenen bağlamdır — web sitelerinizi ekran okuyucularla test ettiğinizden ve durum için en iyi kullanıcı deneyimini sunan şeyi yaptığınızdan emin olun.

Biraz ilgili bir haberde, Eric Bailey hakkında mükemmel bir yazı yazdı. neden ve nasıl düşünüyor aria-label kod kokusu olmak.

Bekleyin, <menu> o da bir liste mi?

Tamam, muhtemelen tümünü merak ediyorsundur. <menu> kod örneklerine aktardığım öğeler. Aslında çok basit; menüler, etkileşimli öğelere yönelik olmaları dışında sıralanmamış listelerdir. Hatta erişilebilirlik ağacına sıralanmamış listeler olarak maruz kalıyorlar.

Semantik ağın ilk günlerinde, yanlışlıkla menülerin benzer olduğuna inandım. <nav>bağlam menüleri (veya "araç çubukları") için olduklarına inanmadan önce teknik özellik diyor) çünkü HTML spesifikasyonunun ilk sürümleri böyle söylüyordu. (MDN'nin ilginç bir yazısı var ile ilgili kullanımdan kaldırılan tüm şeyler hakkında <menu> eğer hiç ilgileniyorsanız.)

Ancak bugün, menüleri kullanmanın anlamsal yolu bu:

<menu aria-label="Share article"> <li><button>Email</button></li> <li><button>Twitter</button></li> <li><button>Facebook</button></li>
</menu>

Şahsen, bunun için bazı iyi kullanım durumları olduğunu düşünüyorum. <menu>. Bu son örnek, etiketli bir etikete sarılmış sosyal paylaşım düğmelerinin bir listesini gösterir. <menu> öğesinin dikkate değer yönü, "Makaleyi paylaş" etiketinin, düğmelerin ne yaptığını açıklamaya yardımcı olan önemli miktarda bağlama katkıda bulunmasıdır.

Menüler kesinlikle gerekli mi? Hayır. HTML yer işaretleri? Kesinlikle hayır. Ama daha az keyif alıyorsan oradalar <div>s ve bileşenin kullanabileceğini hissediyorsunuz aria-label ek bağlam için.

Başka herhangi bir şey?

Evet, ayrıca yukarıda bahsedilen var <dl> (açıklama listesi) öğesi, ancak, MDN onları liste olarak görmüyor gibi görünüyor aynı şekilde - bu, terimler içeren grupların bir listesidir - ve bunların kullanımda olduğunu gerçekten gördüğümü söyleyemem. MDN'ye göre, bunların meta veriler, sözlükler ve diğer anahtar/değer çiftleri türleri için kullanılması gerekiyor. Tüm ekran okuyucuların bunları farklı şekilde duyurduğu gerekçesiyle onlardan kaçınırdım.

Ama her şeyi olumsuz bir notla bitirmeyelim. İşte listelerle yapabileceğiniz harika şeylerin bir listesi:

spot_img

En Son İstihbarat

spot_img