<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 tamamlanması uzun zaman almış olsa da bu özelliği uygulamaya ç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. Böylece bu yayında 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 seçme etiketini temel alan özelleştirilebilir seçme API'sinin özelliklerini inceleyelim.
Yeni <select> ürününü 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ışa dahil edilmiş <select> öğeleri için geçerli olan yeni bir kullanıcı aracısı tarafından sağlanan 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ştirebilirsiniz; ancak sayfa içi düğmeyi etkinleştirmeden yalnızca seçici pop-up özelliğini etkinleştiremezsiniz. ::picker(select) yalnızca appearance: base-select, <select> için uygulandığında 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
Özelleştirilebilir yeni seçim moduna geçtiğinizde, erişebileceğiniz yeni öğeler aşağıdakileri içerir:
- selectedoption: O anda belirlenmiş 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) özelliğini açar/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ştirilecek.
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Özelleştirilebilir yeni <select>, popover ve sabit konumlandırma işlevlerini kullanır. Sistem, bu iki temel teknolojiyle oluşturulmuştur. Bu, bir seçim içindeki açılır seçenek listesinin, seçimi açan tetikleyici düğmesine sabitlenmiş bir pop-up görevi göreceği anlamına gelir.
Bu ::picker(select) pop-up'ının stilini belirlemek (diğer öğelere sabitlenmek de dahil) için çapa konumlandırmasını kullanabilirsiniz. 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 iyileştir
Chrome ekibi daha önce <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. Yeni bir öğeye kıyasla <select> yeniden kullanıldığında sayfanızda anlamlı içerikler oluşturulmaya 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çim öğesinin 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 ile etkinleştirdikten sonra, seçtiğiniz bölümlere istediğiniz CSS'leri uygulayın.
Ok göstergesini özelleştirmek için seçimin 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, ok stilini ayarlayın:
/* 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 içindeki karmaşık içerik
<select> içindeki <option> öğelerine dizelerin ötesinde içerik ekleyip biçimlendirerek 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 örnek olarak profil fotoğrafları, adlar ve açılır menüde hangi öğeyi seçeceğinize karar vermenize yardımcı olacak alternatif bilgiler verilebilir.
<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. Stil için <selectedoption> öğesini bağlayarak bunu yapın. <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>
Şimdi <selectedoption> içinde .text üzerinde display: none uygulayın simgesini tıklayın:
selectedoption .text {
display: none;
}
Etkileşimli seçenekler
::picker(select) ürününün stili üzerinde tam kontrol sahibi olarak, fareyle üzerine gelindiğinde ve odaklanıldığında etkileşimli hale getirmek için önceki demoyu geliştirin. Bu demoda, yeni calc-size() işlevi, simgenin gösterilmesinden fareyle üzerine gelindiğinde seçeneklerin tam genişliğini göstermeye kadar veya seçimde odağı görünür bir seçenek olduğunda seçicinin genişliğini canlandırmak için 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ırlamalar ve erişilebilirlik notları
Güç arttıkça sorumluluk da artar. 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 öğeler gibi etkileşimli (odaklanabilir) öğelere henüz izin verilmez. Ö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.
Gelecekte, bu deneyimlerin erişilebilirlik hikayesi geliştirildiğinden içerik modelinin daha esnek hale gelmesi bekleniyor.
Sonuç
Bu özelliğin çalışma grupları ve standart kuruluşları aracılığıyla ilerlemesini 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.