Tarayıcı tarafından oluşturulan kullanıcı arayüzünü temalandırma

Web özellikleri: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid ve :user-invalid :placeholder-shown ::placeholder field-sizing resize (CSS özelliği) Özelleştirilebilir <select> appearance :has() ::file-selector-button

Tarayıcı tarafından oluşturulan kullanıcı arayüzlerinin çoğu, CSS kullanılarak bir dereceye kadar özelleştirilebilir. Modern özellikler gerektirse bile eski tarayıcılarda kontrollü azalma uygulandığından genellikle polyfill veya yedek gerekmez.

Tarayıcı kullanıcı arayüzünü (form kontrolleri, kaydırma çubukları, seçimler, hata mesajları vb.) yeniden oluşturmadan önce şunları doğrulayın:

  1. Tarayıcı kullanıcı arayüzü, modern CSS ile bile ihtiyaçlarınız için yeterince özelleştirilemiyorsa
  2. İstenen özelleştirme, yerleşik kullanıcı arayüzünü yeniden oluşturmanın dezavantajlarını (en önemlisi, yerel kullanıcı arayüzünün ücretsiz olarak sağladığı erişilebilir semantik, klavye kullanımı, IME ve AT entegrasyonunu kaybetme) haklı çıkaracak kadar önemlidir.

Yapılabilecek özelleştirmelere örnekler:

  • Vurgulanan metin renklerini özelleştirmek için ::selection simgesini kullanın.
  • YAPMAYIN: İçerik metnine user-select: none uygulamayın. Bu, kopyala-yapıştır, çeviri araçları ve yardımcı teknolojilerin "buradan oku" hareketlerini bozar. Chrome ile sınırlayın (sürükleme tutamaçları, araç çubukları, gereksiz düğme etiketleri).
  • Sayfanın vurgu rengini tarayıcı tarafından oluşturulan tüm kullanıcı arayüzlerine uygulamak için accent-color kullanın.
  • Tarayıcı kullanıcı arayüzünün açık/koyu moda uyum sağlaması için color-scheme kullanın.
  • Kaydırma çubuğu renklerini özelleştirmek için scrollbar-color, kaydırma çubuğu kalınlığını kontrol etmek için scrollbar-width kullanın. Kaydırma çubuğunun, kaydırma çubuğu yolundan belirgin şekilde farklı olmasını sağlayın (≥3:1) ve kaydırılabilir bölgelerde scrollbar-width: none değerini ayarlamayın (yalnızca kaydırma işlemi tamamen başka bir olanakla değiştirildiğinde kullanın).
  • Geçerlilik stilini belirlemek için :invalid / :valid yerine :user-invalid / :user-valid kullanın. Bunlar yalnızca kullanıcı alanla etkileşime geçtikten sonra eşleşir. Böylece, sayfa yüklenirken zorunlu boş alanların hata olarak işaretlenmesi gibi istenmeyen bir varsayılan durum önlenir. input geniş kapsamlı olarak hedeflenirken (ör. input:not(input[type="range"]):user-valid) aralık kaydırma çubuklarını hariç tutun. Böylece, bir kaydırma çubuğu ayarlanırken alan geçerlilik sınırları veya arka planları bu çubuğa uygulanmaz.
  • Düğmeler ve metin alanları (<textarea> dahil) genellikle normal öğeler olarak biçimlendirilebilir.
  • Ölçeklendirme için font-size, tipografiyi kontrol etmek için diğer metin özelliklerini kullanın.

Metin alanlarını (<input> ve <textarea>) biçimlendirme

Çoğu stil oluşturma işleminde (ör.renkler, kenarlıklar, arka planlar, tipografi vb.) bu öğeleri normal metin kapsayıcıları olarak değerlendirin.

  • Giriş yer tutucularını biçimlendirmek için :placeholder-shown ve ::placeholder kullanın.
  • Metin alanlarını içeriğe göre boyutlandırmak için field-sizing: content tuşunu kullanın.
  • <textarea> öğeleri için, yatay yeniden boyutlandırmayı devre dışı bırakmak üzere resize: vertical, tüm yeniden boyutlandırmayı devre dışı bırakmak için resize: none kullanın.

Çoktan seçmeli kontroller (seçim, radyo düğmeleri, onay kutuları)

  • Açılır listede sunulan birçok seçenekten birini belirlemek için: <select> + appearance: base-select + ::picker(select) tuşlarını kullanın. Daha fazla bilgi için Markalı Seçim Stili başlıklı makaleyi inceleyin.
  • Sayfada satır içi olarak yerleştirilmiş birden fazla seçenek arasından bir veya daha fazlasını seçme: Her seçenek için <label> içinde bir <input type=checkbox> veya <input type=radio> kullanın. label:has(:checked) üzerinden stil oluşturun.
  • İşaretli durumu çizmek için appearance: none + oluşturulan içerik (::before/::after) veya arka plan resimleri aracılığıyla onay kutularını, radyo düğmelerini ve anahtarları stillendirin.

Metin içermeyen <input> (düğmeler, kaydırma çubukları, dosya girişleri vb.)

  • Dosya girişleri: Düğmeyi biçimlendirmek için ::file-selector-button kullanın.
  • <input>, button, submit veya reset type ile kullanılmamalıdır. Bunun yerine <button> kullanın ve normal bir öğe olarak biçimlendirin.
  • Kaydırma çubukları: Daha ayrıntılı kontrol için appearance: none + thumb sözde öğelerini (::-webkit-slider-thumb, ::-moz-range-thumb vb.) ve track sözde öğelerini (::-webkit-slider-runnable-track, ::-moz-range-track vb.) kullanın.