`<details name>` artık tüm büyük tarayıcılarda doğal olarak özel akordeonlar oluşturuyor

Özel akordeonlar artık doğal HTML

Özel bir akordeon — bir panel açıldığında diğerlerinin kapandığı bir panel grubu — oluşturmak, güncel hiçbir büyük tarayıcıda artık JavaScript gerektirmiyor. Parsa Jiravand'ın bir dev.to yazısında açıkladığı gibi, details elementindeki name niteliği artık geliştiricilerin yıllardır elle yazdığı karşılıklı dışlama mantığını üstleniyor.

Herkesin yazdığı script

details ve summary uzun zamandan beri doğal ve klavye erişilebilir bir açılır-kapanır widget sunuyordu, ancak her element kendi açık durumunu bağımsız yönetiyordu; dolayısıyla on FAQ paneli aynı anda açık kalabiliyordu. Yazıya göre standart geçici çözüm küçük bir scriptti: panelleri class ile seçmek, her birine bir toggle dinleyicisi eklemek ve biri açıldığında diğerlerini zorla kapatmak için hepsinin üzerinde döngüye girmek.

O scriptin gizli maliyetleri var. Tutarlı şekilde uygulanan bir class'a bağımlıdır, panel başına bir dinleyici ekler ve kapatılacak bir şey olup olmadığına bakılmaksızın her açılışta döngüsünü çalıştırır. Ayrıca işaretleme ilk script çalıştıktan sonra enjekte edildiğinde sessizce başarısız olur — yeniden başlatılmadan kopyalanmış bir FAQ bloğu bağımsız panellere geri döner ve nedenini açıklayacak bir hata gösterilmez. İç içe akordeonlar veya tek sayfada iki bağımsız grup ekleyin, script kapsamlandırma mantığına ihtiyaç duyar ve küçük bir state machine'e dönüşür.

Tek bir nitelik döngünün yerini alıyor

Yazıya göre Chrome 120 ve Safari 17.2 desteği 2023 sonunda sundu, Firefox ise Eylül 2024'te 130 sürümüyle uydu. Aynı name değerini paylaşan details elementleri tek bir özel grup oluşturur: biri açıldığında diğerleri otomatik olarak kapanır. Gruba yeni bir panel eklemek, aynı adı taşıyan bir elementten fazlasını gerektirmez.

Destek artık Chrome, Edge, Firefox ve Safari'de Baseline olduğundan bu örüntü bugün üretime hazır. Niteliğin desteklenmediği yerlerde geri dönüş kırılmış değil zariftir: her details bağımsız davranışa geri döner ve script bekleyen bir yer tutucu yerine çalışan, klavye erişilebilir bir açılır-kapanır widget olarak kalır.

Gruplandırma DOM'u değil adı izler

Yazının beklenmedik olarak işaretlediği bir davranış: gruplanmış elementlerin kardeş olması veya aynı üst kapsayıcıyı paylaşması gerekmiyor. Gruplandırma, bir DOM ağacında yalnızca name değerine göre belirlenir; ancak bir shadow root kendi gruplarını başlatır. Bir sayfada ilgisiz bölümlerdeki iki details name="settings" elementi yine de birbirini kapatacaktır.

HTML spesifikasyonu buna izin veriyor ama yazarlara ilgili elementleri bir kapsayıcı element içinde bir arada tutmayı öneriyor, çünkü sayfanın uzak kısımları arasındaki bir ilişkiyi keşfetmek zordur — özellikle ekran okuyucu kullanıcıları için. Pratik tehlike, adın yanlışlıkla yeniden kullanılmasıdır: bir bileşeni yapıştırın, grup tanımlayıcısını değiştirmeyi unutun ve bağımsız olması amaçlanan iki akordeon durum için kavga etmeye başlar; nedeni ortaya çıkaracak bir konsol uyarısı olmadan.

JavaScript'in hâlâ değer kazandığı yerler

Doğal gruplandırma yalnızca kardeşleri kapatan döngünün yerini alır. Yazıya göre scriptler şu durumlarda hâlâ gerekli: harici bir kontrolden panel açmak (open özelliğini true yapmak, ardından tarayıcı diğerlerini kapatıyor), açık paneli sayfa yenilemeleri arasında kalıcı kılmak ve hangi panelin açıldığını izlemek — toggle event kullanarak event.newState === "open" kontrolüyle. Tarayıcı tarafından kapatılan bir kardeş de, "closed" değerinde bir newState ile toggle event tetikler. Anchor linklerin yardıma ihtiyacı yok: güncel tarayıcılarda kapalı bir panelin içindeki içeriğe işaret eden bir fragment linkini takip etmek paneli doğal olarak açar ve grup daha önce açık olanı kapatır.

Neden önemli

Bu değişiklik daha geniş bir örüntünün parçası: web platformunun eskiden kullanıcı tarafındaki çözümler gerektiren davranışları içine absorbsiyonu; tıpkı dialog elementinin doğal modal semantiği kazanması ve input type="date"'in eksiksiz bir takın widget'ı edinmesi gibi. Ekipler için bu, yinelenen bir hata sınıfını — bir element grubunda durumu tutarlı tutma — silerken, klavye erişilebilirliğini ARIA ile sonradan eklemek yerine varsayılan olarak koruyor. Yazıdan pratik ders, kardeşleri kapatan veya "aynı anda yalnızca bir tane açık" kuralını dayandıran bir döngü yazmadan önce belgeleri kontrol etmektir; tarayıcı bu özelliği çoktan sunmuş olabilir.