`<select>` artık CSS ile özelleştirilebiliyor

• Chrome 135 ile birlikte, erişilebilirlik standartlarını korurken <select> öğesi için CSS ile özelleştirmeye izin veren yeni bir özellik desteklenmeye başladı
• Yıllar süren spesifikasyon uyumu ve geliştirme çalışmalarının ardından, eski tarayıcılarda da bozulmayan güçlü bir bileşen olarak sunuluyor
• HTML içeriği de eklenebiliyor ve appearance: base-select ile animasyonlar, stiller ve çeşitli özelleştirmeler mümkün hale geliyor

appearance: base-select tanıtımı

• Yeni CSS özelliği appearance: base-select, <select> öğesini özelleştirilebilir yeni bir duruma dönüştürüyor

  .custom-select {  
    &, &::picker(select) {  
      appearance: base-select;    
    }  
  }  
  

• base-select kullanıldığında gelen yeni özellikler

  • <select> içeriği için tarayıcının HTML parser davranışı değişiyor
  • Render yöntemi ve iç yapı değişiyor
  • Yeni iç parçalar ve durumlar sunuluyor
  • En aza indirilmiş varsayılan tasarım sunuluyor (özelleştirme odaklı)
  • Görüntülenen seçenek, popover gibi en üst katmanda gösteriliyor
  • Seçenek konumu anchor() ile kontrol edilebiliyor

• base-select kullanıldığında kaybolan özellikler

  • <select> tarayıcı penceresinin dışına render edilemiyor
  • Mobil işletim sisteminin varsayılan seçim arayüzü çağrılmıyor
  • En uzun <option> öğesinin genişliği artık hesaba katılmıyor

<select> içine HTML içeriği eklenebiliyor

• Önceden <option> içine resim veya SVG eklendiğinde tarayıcı bunu yok sayıyordu
• appearance: base-select uygulandığında HTML olduğu gibi render ediliyor
• Chrome'da SVG içeren seçenekler görünüyor, ancak Safari, Firefox ve diğerleri bunu desteklemiyor
• CodePen demosu: Uygulama bağlantısı
• Bu özellik Finch deneyi olarak sunulduğu için gerekirse durdurulabilir

Tam özelleştirme mümkün

• base-selectin tüm bileşenleri değiştirilebilir, animasyon eklenebilir ve stillendirilebilir
• Farklı tasarımlarla anlamlı seçim arayüzleri oluşturulabilir
• Örnekler arasında durum göstergesi, avatar içeren seçenekler, renk seçici ve gönderi durumu seçimi yer alıyor
• CodePen demosu: Uygulama bağlantısı

JavaScript arayüzünde değişiklik yok

• Mevcut <select> için JavaScript davranışı aynı şekilde korunuyor
• Ancak <option> içine HTML konulduysa, seçilen değerin parse edilme biçimi değiştiğinden test edilmesi gerekiyor
• value özelliği kullanılıyorsa ayrıca bir değişiklik gerekmiyor

Ek kaynaklar

Web standartları

• Open UI Select spesifikasyonu
• HTML spesifikasyonu Pull Request
• Chrome Intent to Ship

Chrome ile ilgili kaynaklar

• Chrome blogundaki talep ve açıklama yazısı
• Topluluk geri bildirimi sonuçları
• <select> içinde <hr> kullanımı
• Una'nın açıklama yazısı / değişiklik özeti bağlantısı
• Una'nın CodePen koleksiyonu

Topluluk kaynakları

• Brecht De Ruyte CodePen koleksiyonu
• CSS Tricks'te native ve custom select karşılaştırması
• Open Props UI'nin <select> uygulaması
• Animasyonlu custom select örneği

Özelleştirilmiş <select> kullanan demolar

• Una'nın demosu
• Brecht'in demosu
• Adam'ın demosu

[GN⁺]

Hacker News görüşleri

• Bu özelliğe orantısız derecede heyecanlanıyor olmam muhtemelen 2000'lerin başındaki bir web geliştiricisi tarafımı ele veriyor. select öğesi, HTML ile yeniden üretilemeyen işlevler sunduğu için çok faydalı bir özellik

  • Şimdi buna otomatik tamamlama ve etiket seçiciyi de eklemeleri gerekiyor

• Bu özellik yaygın olarak desteklenene kadar aşamalı geliştirme olarak kullanılmalı. Şu anda caniuse.com'a göre dünya genelinde destek oranı %46

  • Desteklemeyen tarayıcı kullanıcılarına kötü bir deneyim sunmamaya dikkat etmek gerekiyor
  • Yeni stillendirmeye önemli bilgi veya işlev eklememek önemli

• Bu özelliğin hayata geçirildiğini görmek beni çok mutlu ediyor. Özel select kutusu ikamelerine göre çok daha büyük bir iyileştirme olacak

• Yerleşik mobil işletim sistemi bileşenlerini tetiklememesi beni endişelendiriyor. Yerleşik bileşenler güvenilir, erişilebilir ve iyi tepki veriyor

  • Android arayüzünün açıldığında güvenilir olması güzel. Bu sadece select öğesi için değil, tarih/saat girdileri için de geçerli

• Bazı kontrolleri stillendirmemek daha iyi. Kaydırma çubuklarında çok ince olmaları veya renk kontrastının zayıf olması nedeniyle kullanmaları zor oluyor

  • Varsayılan select öğesi en güzel kontrol olmayabilir ama görevini yerine getiriyor

• Web geliştiricilerinin onlarca yıldır beklediği şey bu gibi görünüyor. Birçok JS kütüphanesinin yerini alma potansiyeli var

  • Bende Chrome kurulu değil ama örnek videoda çoklu seçim alanlarını nasıl ele aldığını merak ediyorum

• select öğesi artık Chromium tarayıcılarında CSS ile özelleştirilebiliyor

  • Web standartları giderek daha karmaşık hale geliyor

• Firefox sorun bağlantısı paylaşılmış

• Böyle devam edersek yakında VB6 ile işlev eşdeğerliğine ulaşacağız

• Bozuk JS kütüphanelerinden daha iyi. Ama çok sayıda seçenek olduğunda yerleşimin nasıl olacağı temel endişe konusu

  • Yerleşik mobil işletim sistemi bileşenlerini tetiklememesi korkutucu. Yerleşimin nasıl olacağını merak ediyorum
  • Görüntülenen seçenek anchor() ile konumlandırılıyor
  • Deneysel ama muhtemelen en iyi kısım bu olabilir. CSS içinde gerçekten çalışıyorsa inanılmaz olur

[carnoxen]

O zaman <selectlist> artık gereksiz mi olacak?

[deminoth]

Ayrı bir konu ama, başlıktaki <select> Slack botunda görüntülenmiyor galiba haha

[xguru]

Ah hüzün bunu daha sonra düzelteceğim.