0Pricing
HTML Academy · Ders

selectlist Öğesi

Önerilen selectlist öğesiyle açılır denetimleri özelleştirin

selectlist Öğesi, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Uzun Süredir Var Olan Sınırlama

<select> öğesi, görünümü biçimlendirilemeyen az sayıdaki form denetiminden biridir. Ona uygulanan her CSS kuralı (özel kenarlıklar, yazı tipleri, seçenek stilleri) tarayıcı tarafından yok sayılır. Bu da yalnızca biçimlendirilebilir seçenekler elde etmek için yerleşik davranışı yineleyen binlerce özel açılır liste kütüphanesinin ortaya çıkmasına yol açmıştır.

selectlist Nedir

<selectlist> (aynı zamanda <selectmenu> olarak da görülür), <select> yerine biçimlendirilebilir şekilde tasarlanmış yerleşik bir HTML öğesidir. Aynı kavramsal modeli (bir düğme tetikleyicisi ve seçenekler listesi) kullanır, ancak her bölümü CSS ile özelleştirilmeye açıktır.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Biçimlendirebileceğiniz Bölümler

selectlist, düğmeyi (kapalı durumdaki tetikleyici), listbox'ı (açık durumdaki açılır listeyi) ve seçenekleri dışarı açar. CSS sözde öğeleri (::part(button), ::part(listbox)), yerleşik davranışı etkilemeden her birini biçimlendirmenizi sağlar.

Seçenekleri Özelleştirme

selectlist içindeki seçenekler yalnızca metin değil, simgeler, açıklamalar ve özel düzenler gibi her tür içeriği içerebilir. Tarayıcı seçim mantığını, klavye ile gezinmeyi ve odak yönetimini yine de üstlenir; görünümü ise tamamen siz kontrol edersiniz.

Yerleşik Davranışlar Korunur

selectlist, <select> öğesinin iyi yaptığı her şeyi korur: klavye ile gezinme (ok tuşları, yazarken arama), ekran okuyucu duyuruları, forma katılım ve odak yönetimi. Erişilebilir davranışı hazır olarak alır, üstüne kullanıcı arayüzünü istediğiniz gibi biçimlendirebilirsiniz.

Özel Düğme

Tetikleyici için bir yuva sağlayın: <button slot="button">Choose fruit <svg>...</svg></button>. Düğmeyi istediğiniz gibi tasarlayabilirsiniz; yerleşik üçgeni özel bir simgeyle değiştirebilir, etiketler ekleyebilir ve renkleri değiştirebilirsiniz. Tarayıcı açma ve kapatma işlemlerini yine yönetir.

Forma Katılım

selectlist, select gibi form gönderimine katılır: name özniteliği ve value değeri vardır ve formla birlikte gönderilir. Sunucu tarafındaki işlem aynıdır. Çoğu select kullanım senaryosunda işaretleme düzeyinde doğrudan kullanılabilir bir alternatiftir.

Tarayıcı Desteği

selectlist erken aşamadaki bir özelliktir. 2026 itibarıyla Chromium tabanlı tarayıcılarda bayrakların arkasında veya sınırlı biçimde kullanılabilir. Firefox ve Safari henüz desteklememektedir. Üretimde kullanım, desteklenmeyen tarayıcılar için normal bir <select> öğesine geri dönüş gerektirir.

Uyumluluk Katmanı Yazmanın Zorluğu

Yerleşik davranışla eşleşen, tam erişilebilirliğe sahip özel bir açılır liste için uyumluluk katmanı yazmak zordur; odak yakalamaları, klavye ile gezinme, ekran okuyucu entegrasyonu ve forma katılımın tümü dikkat ister. Downshift, Combobox ve react-aria gibi kütüphaneler bu işi binlerce satır kodla yapar. selectlist ise bunların tümünün yerini tek bir öğeyle alır.

Ne Zaman Benimsenmeli

Dahili uygulamalar veya yalnızca Chromium dağıtımları için seçim listesi bugün önemli ölçüde kod tasarrufu sağlar. Geniş kitlelere yönelik herkese açık siteler için Firefox ve Safari desteğini bekleyin ya da desteklenen yerlerde seçim listesini kullanan, diğer yerlerde özel bir React/Vue açılır menüsüne geri dönen bir sarmalayıcı kütüphane kullanın.

Değiştirme Yol Haritası

Seçim listesi her yerde kullanıma sunulduğunda, birçok özel açılır menü kütüphanesinin kullanımdan kaldırılmasını veya yerel öğenin etrafında ince sarmalayıcılara dönüşmesini bekleyin. Standartlaştırma sürecini izleyin; API, çeşitli gözden geçirmelerden geçti ve nihai standarda dönüşmeden önce gelişmeye devam edebilir.

Tasarım Açısından Sonuçlar

Tasarımcılar artık “Tasarım burada, ancak açılır menü tarayıcıda farklı görünecek” gibi çekinceler olmadan piksel düzeyinde kusursuz açılır menüler belirleyebilir. Seçim listesi, tasarım taslaklarıyla kullanıma sunulan HTML arasındaki uzun süredir devam eden görsel tutarsızlıklardan birini ortadan kaldırır.

Bilgi Kontrolü

Seçim listesi öğesi neden önemlidir — yerel