<select> öğesi gibi form kontrollerini stillendirmek, yıllardır geliştiricilerin en çok zorlandığı konulardan biri olarak bildiriliyor. Biz de bu sorunu çözmek için çalışıyoruz. Bu çalışma karmaşık ve doğru şekilde yapılması uzun zaman alıyor 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şamadadır. Tarayıcılar arası güçlü bir ilgi ve Chrome Canary 130'dan itibaren test edebileceğiniz bir prototip mevcuttur.
Özelliği deneyin ve geri bildiriminizi bizimle paylaşın
Chrome Canary yüklemenizin 130 sürümüne güncellendiğinden ve deneysel web platformu özellikleri bayrağının açık olduğundan emin olun. Adres çubuğunuzda chrome://flags adresine gidip #experimental-web-platform-features'ı etkinleştirerek bu flag'i 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. Anketi tamamlamak yalnızca üç dakikanızı alır.
Mevcut HTML select etiketini temel alan özelleştirilebilir select API'nin özelliklerini inceleyelim.
Yeni <select> deneyimini 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> öğenizde ve ::picker(select) üzerinde appearance: base-select değerini ayarlayın.
::picker(select), yalnızca appearance: base-select kullanılarak yeni davranışın etkinleştirildiği <select> öğelerine uygulanan, 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 popover'dı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 popover'ı etkinleştiremezsiniz. ::picker(select), yalnızca appearance: base-select <select> için uygulandığında oluşturulur.
Artık seçim öğenizi özelleştirmeye hazırsınız. Yeni özelleştirilebilir seçim, tarayıcılar ve işletim sistemlerinde aynı görünen bazı varsayılan stillerle birlikte gelir. Varsayılan özelleştirilmiş seçim, macOS'te Chrome'daki mevcut seçimle karşılaştırıldığında şu şekilde görünür:
Parçaları ayırma
Yeni özelleştirilebilir seçim moduna girdiğ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 imkanı 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çim öğesinin içinde, button dışındaki tüm içeriği barındıran popover.
Seçimin herhangi bir bölümünü stillendirebilirsiniz. Örneğin, <option> öğelerine rastgele etkileşimli olmayan içerik ekleyebilir, seçim açılır listesini açan sayfa içi düğmeyi ve seçeneklerin açılır listesini (::picker(select)) biçimlendirebilirsiniz.
Ayrıca button ve kendi ok göstergenizi de stillendirebilir ve öğelerin içine ve çevresine dilediğiniz içeriği ekleyebilirsiniz. İçerik eklemenin yanı sıra bu yeni öğeleri ve varsayılan stilleri gizleyebilirsiniz. Örneğin, seçeneğin ::before sözde öğesinde 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 öğesinde gruplandırır. Bu öğe, düğmeye sabitlenmiş bir popover gibi davranır. Bu <button>, ::picker(select) ayarını açar veya kapatır. Seçimin doğrudan içindeki seçenekler ve diğer öğeler ::picker(select) içine yerleştirilir veya stil oluşturma amacıyla kendi sarmalayıcınızı kullanabilirsiniz. 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>
Yeni özelleştirilebilir <select>, popover ve anchor positioning işlevlerini kullanır. 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üğmeye sabitlenmiş bir popover görevi gördüğü anlamına gelir.
Bu ::picker(select) popover'ı stillendirmek (diğer öğelere sabitlenmesini sağlamak dahil) için sabitleme 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 geliştirme
Chrome ekibi daha önce <selectlist> öğesi fikri üzerinde çalışıyordu. Bu yayında, mevcut <select> öğesini yeniden kullanmak için yeniden tasarlanan özellik açıklanmaktadır.
Mevcut <select> öğesini yeniden kullanmanın temel avantajlarından biri, temel HTML öğesini progresif geliştirme olanağıdır. Yepyeni bir öğeyle karşılaştırıldığında, <select> öğesini yeniden kullanmak sayfanızda anlamlı içerik oluşturmaya devam eder. Aşağıdaki örnekte, özelleştirilmiş seçim ile desteklenmeyen bir tarayıcı kullanan kullanıcının göreceği ekran karşılaştırılmaktadır:
option içindeki tüm metin içeriği, select öğesinin yedek sürümünde oluşturulur.Temel stil
Değişiklikler, seçim öğesinin görsel stilini değiştirmek kadar basit olabilir. Örneğin, düğme stillerini, fareyle üzerine gelme ve odaklanma stillerini veya seçim seçeneklerinin arka planını güncellemek için. appearance: base-select ile etkinleştirdikten sonra, seçiminizin bölümlerine istediğiniz CSS'yi 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 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çeneklerde karmaşık içerik
<select> içindeki <option> öğelerine dize dışında içerik ekleyip stil uygulayarak daha fazlasını yapabilirsiniz. Açılır menüde ülke adlarının yanına bayrak resimleri eklemek buna örnek olarak verilebilir. 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 yer alabilir.
<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çili seçeneği biçimlendirme
Seçilen seçeneğin, açılır menüdekinden farklı bir şekilde gösterilmesini isteyebilirsiniz. Buna örnek olarak Gmail kullanıcı arayüzü verilebilir. Burada, yer kazanmak için seçenek belirlendikten sonra etiket kaldırılır. Bunu yapmak için stil oluşturma amacıyla <selectedoption> öğesine bağlanı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 metin içeriğini gizlemek ve yalnızca simgeyi göstermek için <selectedoption> içindeki .text öğesine display: none uygulayın:
selectedoption .text {
display: none;
}
Etkileşimli seçenekler
::picker(select) öğesinin stilini tam olarak kontrol edebildiğiniz için önceki demoyu geliştirerek fareyle üzerine gelindiğinde ve odaklanıldığında etkileşimli hale getirin. Bu demoda, seçicinin genişliğini simgeleri gösterecek şekilde animasyonlu hale getirmek için yeni calc-size() işlevi kullanılmıştır. Bu işlev, fareyle üzerine gelindiğinde veya seçimde focus-visible içeren bir seçenek varsa seçeneklerin tam genişliğini gösterir.
/* 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ı
Büyük güç, büyük sorumluluk getirir. Ö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 modeli şu anda yalnızca<div>,<span>,<option>,<optgroup>,<img>,<svg>ve<hr>öğelerine izin veriyor.- Bölünmüş düğmeler, erişilebilir bir çözüm üzerinde çalıştığımız için şu anda deneme aşamasındadır.
Gelecekte, bu deneyimlerin erişilebilirlik hikayesi daha ayrıntılı hale geldikçe içerik modelinin daha esnek olacak şekilde genişletilmesi bekleniyor.
Sonuç
Bu özelliğin çalışma grupları ve standart kuruluşları aracılığıyla ilerlemesini görmekten ve prototipi aktif olarak oluşturup bu özelliğin şeklini değerlendirirken ilerlememizi paylaşmaktan heyecan duyuyoruz. Beklediğiniz gibi çalışmayan bir durumla karşılaşırsanız lütfen bize bildirin.
Bu özellik henüz geliştirme aşamasında olduğundan, bu kısa geri bildirim formunu kullanarak geri bildiriminizi bizimle paylaşabilirsiniz.
Bu konuda doğru adımları atmamıza ve web'de erişilebilir, özelleştirilebilir form kontrolleri oluşturmayı kolaylaştırmamıza yardımcı olduğunuz için teşekkür ederiz.