CSS :open Baseline 2026'ya ulaştı: Açık arayüz durumları için tek selector

CSS :open pseudo-class'ı Baseline 2026'ya ulaştı. MDN'e atıf yapan bir dev.to yazısına göre selector, Mayıs 2026'da çekirdek tarayıcıların en güncel sürümlerinde yeni kullanılabilir hale geldi ve geliştiricilere o an açık olan öğeleri — disclosure widget'ları, dialog'ları, select picker'ları ile tarih ve renk alanları gibi picker tabanlı input'ları — biçimlendirmek için tek bir semantik yol sunuyor.

Çözüm gerektiren bir durum için tek selector

Şimdiye kadar açık durumu biçimlendirme, söz konusu öğeye bağlıydı. Disclosure'lar details[open] ile ele alınıyordu, dialog'lar da durumlarını aynı şekilde bir open attribute'u üzerinden açığa çıkarıyordu ve native picker'ların — örneğin dropdown'ı açık olan bir select'in — ise genel amaçlı bir karşılığı hiç yoktu. Yeni pseudo-class bu durumu doğrudan ifade ediyor: details:open > summary, attribute'a başvurmadan açık bir disclosure'ın özetini hedefliyor ve aynı anahtar sözcük, açık/kapalı kavramına sahip her kontrol için çalışıyor.

Asıl kazanç native picker'lar

dev.to yazarı en ilginç örnek olarak native select'i gösteriyor. Bir select'in picker'ı ekrandayken select:open, kontrole vurgu kenarlığı veya odak halkası gibi yeni bir görünüm verebiliyor; eski CSS bunu tutarlı şekilde hedefleyemiyordu. :has() ile birlikte etki container'lara da uzanıyor: .field:has(select:open), alt öğesi olan select açıldığı anda bir wrapper'ın arka planını değiştirebiliyor ve bu desenin genellikle gerektirdiği JavaScript class değiştirme ihtiyacını ortadan kaldırıyor.

Aynı selector, desteklendiği yerlerde tarih ve renk kontrolleri dahil, tarayıcının sağladığı bir picker açıkken input'ları da eşleştirebiliyor. Picker görünümü platformdan platforma değiştiği için yazar, yalnızca masaüstü ekran görüntülerine güvenmek yerine gerçek işletim sistemlerinde test yapmayı öneriyor. Yazıdan bir tasarım notu: picker açıldığında yakın içeride zıplama yaşanmaması için görsel değişikliği hafif tutun.

Fallback'ler ve feature detection

Eski tarayıcılar hâlâ var, bu yüzden üretim stylesheet'lerinde açık durumu görünümünün önemli olduğu her yerde fallback'ler korunmalı. Details ve dialog için [open] attribute selector'ı güvenilir olmaya devam ediyor, çünkü bu öğeler durumlarını o attribute üzerinden yansıtıyor; migration sırasında iki selector tek bir kuralda bir arada yaşayabilir.

Basit bir fallback'i olmayan geliştirmeler için — select picker durumu — önerilen yaklaşım @supports selector(:open); yalnızca yeni biçimlendirmeye uygulanırken kapalı görünüm kendi başına eksiksiz ve erişilebilir kalıyor.

:open olmayan şeyler

Bu pseudo-class, o an görünür durumda olan popover öğelerini kapsayan :popover-open'dan farklıdır. dev.to yazısı sınırı net çiziyor: semantik bir açık/kapalı durumu olan kontroller için :open, gösterim durumundaki bir popover için :popover-open kullanın.

Açık olmak görünür olmayı da garanti etmez. Bir details öğesi, bir üst öğe onu tamamen gizlerken açık durumunu taşıyabilir; yani selector kullanıcının gerçekte görebildiğini değil durumu bildiriyor — yazar bunu bir görünürlük veya layout kontrolü olarak ele almamak konusunda uyarıyor.

Animasyonlar da dikkat gerektiriyor. Açık durumu selector'ı bir transition'ı tetikleyebilir, ancak her öğenin gizliden görünür olma davranışı animasyonlanamaz ve bazı öğeler kapandıkları anda içeriği render etmeyi bırakır; bu da ters yöndeki transition'ın beklenildiği gibi görünmesini engelleyebilir. Testler, azaltılmış hareket tercihlerine saygı gösterilerek açılmanın yanı sıra kapanmayı da kapsamalı.

Neden önemli

:open geniş etkili küçük bir ekleme: birkaç native kontrole aktif durumları için ortak bir sözlük kazandırıyor. Bu, basit görsel değişikliklerden JavaScript class'larını kaldırabiliyor, native picker durumlarının tutarlı biçimlendirilmesini nihayet mümkün kılıyor ve selector'ların tanımladıkları arayüz davranışı gibi okunmasını sağlıyor.

Baseline 2026 kullanılabilirliği sayesinde şimdi bir geliştirme olarak kullanıma sunmak pratik; [open] fallback'leri ve @supports eski tarayıcıları karşılıyor. Yazarın önerdiği migration yolu net: mevcut details ve dialog'lar için [open] fallback'lerini koruyun, select ve picker geliştirmeleri için :open ekleyin, yeni biçimlendirmeyi feature detection arkasında izole edin ve klavye etkileşimini, zoom'u ve birden fazla işletim sistemini test edin.

Yazının da vurguladığı gibi, durumu tarayıcı sağlıyor — semantik, erişilebilir adlar, görünür odak ve bu durumun net biçimde iletilmesi geliştiricinin işi olmaya devam ediyor.