<select> öğesi gibi form denetimlerinin biçimlendirilmesi, geliştiricilerin yıllardır yaşadığı en büyük sorunlardan biri olarak bildiriliyor. Bu soruna çözüm bulmak için çalışıyoruz. Bu çalışma karmaşık ve doğru şekilde uygulanması uzun zaman aldı. Ancak bu özelliği kullanıma sunmaya çok yaklaştık. Seçim öğesinin özelleştirilebilir bir sürümü, WHATWG'de resmi olarak 2. Aşama'dadır. Tarayıcılar arası güçlü bir ilgi görmektedir ve Chrome Canary 130'dan test edebileceğiniz bir prototipi vardır.
Deneyin ve geri bildirimlerinizi bizimle paylaşın
Yüklediğiniz Chrome Canary sürümünün 130'a güncellendiğinden ve deneysel web platformu özellikleri işaretinin etkin olduğundan emin olun. Adres çubuğunuzdaki chrome://flags adresine gidip #experimental-web-platform-features seçeneğini etkinleştirerek bu işareti açabilirsiniz. Ardından, bu yayındaki Codepen demolarını görebilirsiniz. Alternatif olarak, hepsini tek bir yerde görüntülemek için bu Codepen koleksiyonuna göz atabilirsiniz.
Özellikle ilgili geri bildirimde bulunmak için bu formu kullanın. Bu işlem yalnızca üç dakika sürecektir.
Mevcut HTML select etiketini temel alan özelleştirilebilir select API'nin özelliklerini inceleyelim.
Yeni <select>'ü etkinleştirme
Yeni davranışı etkinleştirmek için hem sayfa içi seçim düğmesinde hem de seçim seçicide CSS appearance özelliğini kullanın. Etkinleştirmek için <select> öğeniz ve ::picker(select) öğeniz üzerinde appearance: base-select değerini ayarlayın.
::picker(select), yalnızca appearance: base-select kullanılarak yeni davranışı etkinleştirilmiş <select> öğeleri için geçerli olan, kullanıcı aracısı tarafından sağlanan yeni bir sözde öğedir. Bu seçici sözde öğesi, temel seçim düğmesi tarafından tetiklenen pop-up'tır. Aşağıdaki kodda gösterildiği gibi her ikisini de etkinleştirebilirsiniz:
select,
::picker(select) {
appearance: base-select;
}
Yalnızca sayfa içi düğmeyi etkinleştirmeyi seçebilirsiniz ancak sayfa içi düğmeyi etkinleştirmeden yalnızca seçici pop-up'ını etkinleştiremezsiniz. ::picker(select) yalnızca appearance: base-select, <select>'ye uygulandıktan sonra oluşturulur.
Artık seçtiğiniz öğeyi özelleştirmeye hazırsınız. Yeni özelleştirilebilir seçeneğin bazı varsayılan stilleri, tarayıcılar ve işletim sistemleri arasında aynı görünür. Varsayılan özelleştirilmiş seçeneğin macOS'teki Chrome'daki mevcut seçeneğe kıyasla görünümü aşağıda verilmiştir:
Parçaları inceleme
Yeni özelleştirilebilir seçim moduna geçtiğinizde erişebileceğiniz yeni öğeler şunlardır:
- selectedoption: Şu anda seçili olan seçeneğin iç HTML'sini yansıtır.
- option::before: Varsayılan erişilebilirlik özelliği olarak seçili seçeneği belirtmek için bir onay işareti içerir (bu durum değişebilir).
- ::picker(select): Özelleştirilebilir bir seçeneğin içindeki button dışındaki tüm içeriği içeren pop-up.
Seçimin herhangi bir bölümüne stil uygulayabilirsiniz. Örneğin, <option> öğelerine istediğiniz şekilde etkileşimli olmayan içerikler ekleyebilir, seçin açılır menüsünü açan sayfa içi düğmeye ve seçeneklerin açılır listesine (::picker(select)) stil uygulayabilirsiniz.
button, kendi ok göstergenizi de biçimlendirebilir ve öğelerin içine veya çevresine istediğiniz içeriği ekleyebilirsiniz. İçerik eklemenin yanı sıra bu yeni öğelerden ve varsayılan stillerden herhangi birini gizleyebilirsiniz. Örneğin, seçeneğin ::before sözde öğesinde bir gösterge onay işareti istemiyorsanız aşağıdaki CSS'yi kullanın.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Seçiminizde sınırsız sayıda öğe bulunabilir ancak tarayıcı, <button> öğesinin dışındaki her şeyi ::picker(select) sözde öğesine gruplandırır. Bu öğe, düğmeye sabitlenmiş bir pop-up gibi davranır. Bu <button>, ::picker(select) seçeneğini açar veya kapatır. Seçimin doğrudan içindeki seçenekler ve diğer öğeler ::picker(select) içine alınır veya stillendirme amacıyla kendi sarmalayıcınızı getirebilirsiniz. Bu sarmalayıcı da ::picker(select) sözde öğesinin içine yerleştirilir.
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Özelleştirilebilir yeni <select>, pop-up ve sabitleme konumlandırma işlevlerini kullanır. Bu iki temel teknolojiyle oluşturulmuştur. Bu, bir select içindeki açılır seçenek listesinin, select'ı açan tetikleyici düğmeye sabitlenmiş bir pop-up olarak işlediği anlamına gelir.
Bu ::picker(select) pop-up'ı biçimlendirmek için ankraj konumlandırmayı kullanabilirsiniz (diğer öğelere sabitleme dahil). Bu içerik modeli, üst katman animasyon stillerinin giriş ve çıkış efektlerini canlandırmak için seçenek listesiyle birlikte çalıştığı anlamına da gelir.
Mevcut <select> öğesini geliştirme
Daha önce Chrome ekibi, <selectlist> öğesi fikri üzerinde çalışıyordu. Bu gönderide, mevcut <select> öğesini yeniden kullanmak için yeniden tasarlanan özellik açıklanmaktadır.
Mevcut <select> öğesini yeniden kullanmanın en önemli avantajlarından biri, temel HTML öğesini kademeli olarak iyileştirebilme olanağıdır. Yepyeni bir öğeye kıyasla <select> öğesini yeniden kullanmak, sayfanızda anlamlı içerikler oluşturmaya devam eder. Aşağıdaki örnekte, özelleştirilmiş seçimin desteklenmeyen bir tarayıcıdaki kullanıcının göreceğiyle karşılaştırması gösterilmektedir:
option içindeki tüm metin içeriği, seçili öğenin yedek sürümünde oluşturulur.Temel stil
Değişiklikler, seçili öğenin görsel stili kadar basit olabilir. Örneğin, düğme stillerini, fareyle üzerine gelme ve odaklanma stillerini veya seçili seçeneklerin arka planını güncellemek için. appearance: base-select'ü etkinleştirdikten sonra, seçtiğiniz bölümlere istediğiniz CSS'yi uygulayın.
Ok göstergeyi özelleştirmek için seçeneğin içine kendi düğmenizi ve okunuzu ekleyin.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Ardından oku biçimlendirin:
/* style the arrow */
button span {
/* arrow styles */
transition: rotate 0.2s;
}
/* adjust arrow styles when the picker is open */
select:open button span {
rotate: -180deg;
}
Seçenekler arasında karmaşık içerikler
<select> içindeki <option> öğelerine dizelerin ötesinde içerik ekleme ve biçimlendirme özelliğiyle daha da ileri gidin. Temel bir örnek olarak, açılır menüdeki ülke adlarının yanına bayrak resimleri ekleyebilirsiniz. Bunu yapmak için seçenek metninin yanına bir resim öğesi ekleyin.
<option value="france">
<img src="img/flag_of_france.svg" alt="" />
<span>France</span>
</option>
Daha karmaşık bir örnekte, açılır menüden hangi öğeyi seçeceğinize karar vermenize yardımcı olacak profil fotoğrafları, adlar ve alternatif bilgiler bulunabilir.
<option value="eur">
<img src="euro-flag.png" alt="" />
<div class="currency">
<div class="currency-short">EUR</div>
<div class="currency-long">Euro</div>
</div>
<div class="symbol" aria-hidden="true">€</div>
</option>
Seçilen seçeneğe stil uygulama
Seçilen seçeneğin, seçilen durumda açılır menüdekinden farklı şekilde gösterilmesini isteyebilirsiniz. Buna örnek olarak, alan kazanmak için seçenek seçildikten sonra etiketin kaldırıldığı Gmail kullanıcı arayüzünü verebiliriz. Bunu, stil için <selectedoption> öğesine bağlanarak yapabilirsiniz. <option> aşağıdaki işaretlemelerin tümünü içerir:
<option value="reply-all">
<img class="material-symbol" src="material-symbol-reply.png">
<span class="text">Reply all</span>
</option>
Ardından, metin içeriğini gizlemek ve yalnızca simgeyi göstermek için <selectedoption> içinde .text'e display: none uygulayın:
selectedoption .text {
display: none;
}
Etkileşimli seçenekler
::picker(select)'ün stili üzerinde tam kontrol sahibi olarak, önceki demodan yararlanarak fareyle üzerine gelindiğinde ve odaklanıldığında etkileşimli hale getirin. Bu demoda, seçicinin genişliğini simgelerin gösterilmesinden fareyle üzerine gelindiğinde seçeneklerin tam genişliğinin gösterilmesine animasyonlu olarak geçirmek için yeni calc-size() işlevi kullanılır. Seçimde, odak görünür olan bir seçenek varsa da bu işlev kullanılır.
/* base styles when picker is open but not interacted with */
::picker(select) {
width: var(--icon-width);
transition: width 0.5s;
}
/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
/* auto width! */
width: calc-size(auto, size + 0.5rem);
}
Sınırlılıklar ve erişilebilirlik notları
Büyük güç büyük sorumluluk getirir. Bu özelliğin erişilebilir kalması için bazı sınırlamalar vardır.
<option>öğeleri dışında,<select>içinde düğmeler veya diğer etkileşimli (odaklanabilir) öğelere henüz izin verilmemektedir. Önerilen içerik modelinde şu anda yalnızca<div>,<span>,<option>,<optgroup>,<img>,<svg>ve<hr>öğelerine izin verilmektedir.- Erişilebilir bir çözüm üzerinde çalıştığımız için bölünmüş düğmeler şu anda deneme aşamasındadır.
Bu deneyimlerin erişilebilirlik hikayesi daha da geliştirildikçe içerik modelinin gelecekte daha esnek olacak şekilde genişletilmesi bekleniyor.
Sonuç
Bu özelliğin çalışma grupları ve standart kuruluşları tarafından geliştirildiğini görmekten heyecan duyuyoruz. Prototipi aktif olarak oluşturup bu özelliğin şeklini değerlendirirken kaydettiğimiz ilerlemeyi paylaşıyoruz. Beklediğiniz gibi çalışmayan bir şeyle karşılaşırsanız lütfen bize bildirin.
Bu özellik hâlâ geliştirme aşamasındayken bu kısa geri bildirim formunu kullanarak geri bildirimlerinizi paylaşabilirsiniz.
Bu konuda doğru kararı vermemiz ve web'de erişilebilir, özelleştirilebilir form kontrolleri oluşturmayı kolaylaştırmamız için bize destek olduğunuz için teşekkür ederiz.