Çok faydalı ayrıntıların ve özet öğelerinin nasıl çalıştığını ve bunları nerede kullanacağınızı keşfedin.
Açıklama widget'ı, içeriği gizleyen ve gösteren bir kullanıcı arayüzü kontrolüdür. Bu yazıyı web.dev'de okuyorsanız ve görüntü alanınız 106 em'den küçükse, bu paragrafın yukarısındaki "Bu sayfada"yı tıkladığınızda, bu bölümün içindekiler tablosu gösterilir. Bu simgeyi görmüyorsanız, içindekiler bölümünde gezinmeyi açıklama widget'ı olarak görüntülemek için tarayıcıyı daraltın.
Akordeon grafik kullanıcı arayüzü, dikey olarak yığılmış bir dizi açıklama widget'ından oluşur. Akordeon kullanıcı arayüzünün yaygın kullanım alanlarından biri, birçok sitedeki Sık Sorulan Sorular (SSS) sayfasıdır. Akordeon SSS, görünür soruların bir listesini içerir. Bir soruyu tıklamak, ilgili sorunun yanıtını genişletir veya "açıklar".
jQuery, en az 2009'dan beri bir akordeon kullanıcı arayüzü kalıbı içermektedir. Orijinal JavaScript'siz akordeon çözümü, her SSS sorusunu bir <label> ve ardından etiketlediği onay işareti yapma, ardından onay işareti işaretlendiğinde <div> yanıt görüntüleme içeriyordu. CSS şuna benziyordu:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
Neden tarih? JavaScript veya form kontrolü hack'leri içermeyen akordeon gibi açıklama widget'ları, nispeten yeni eklenen bir özelliktir. <details> ve <summary> öğeleri Ocak 2020'den bu yana tüm modern tarayıcılarda yalnızca tam olarak desteklenmektedir. Artık yalnızca semantik HTML kullanarak çekici açıklama widget'ları
olmasa da çalışan işler oluşturabilirsiniz. Tüm ihtiyacınız olan <details> ve <summary> öğeleridir: Bunlar, genişleyen ve daraltılan içeriği işlemenin yerleşik bir yoludur. Kullanıcı bir <summary>'i tıkladığında, dokunduğunda veya <summary> odakdayken Enter tuşunu serbest bıraktığında, <details> üst öğesinin içeriği görünür hale gelir!
Tüm anlamsal içeriklerde olduğu gibi, varsayılan özellikleri ve görünümü kademeli olarak iyileştirebilirsiniz. Bu örnekte, CSS'nin küçük bir kısmı eklenmiştir, ancak başka bir şey eklenmemiştir:
Bu Codepens'lerin JavaScript içermediğini unutmayın.
Görünürlüğü açma: open özelliği
<details> öğesi, açıklama widget'ı kapsayıcısıdır. <summary>, üst öğesi <details> için özet veya göstergedir. Özet, her zaman üst öğenin geri kalan içeriğinin görüntülenmesini sağlayan bir düğme görevi görür. <summary> ile etkileşim kurduğunuzda <details>" öğesinin open özelliği açılıp kapatılarak kendiliğinden etiketlenmiş özet kardeşlerin görüntülenmesini etkinleştirir.
open özelliği bir boole özelliğidir. Mevcut olması durumunda değeri veya eksikliği ne olursa olsun, tüm <details> içeriklerinin kullanıcıya gösterildiğini belirtir. open özelliği yoksa yalnızca <summary> içeriği gösterilir.
open özelliği, kullanıcı kontrolle etkileşimde bulunurken otomatik olarak eklenip kaldırıldığından, öğeyi durumuna göre farklı bir şekilde biçimlendirmek için CSS'de kullanılabilir.
Her biri bir <summary> alt öğesine sahip birden fazla <details> öğesinden oluşan bir listeyle akordeon oluşturabilirsiniz. HTML'nizde open özelliğinin atlanması, <details> öğelerinin tamamının daraltılacağı veya kapatılacağı ve yalnızca sayfa yüklendiğinde özet başlıkların görüneceği anlamına gelir; her başlık, <details> üst öğedeki diğer içerikleri açacaktır. HTML'nize open özelliğini eklerseniz sayfa yüklendiğinde <details> genişletilerek içerikler görünür hale gelir.
Daraltılmış durumdaki gizli içerik, bazı tarayıcılarda aranabilir, ancak daraltılmış içerik DOM'nin bir parçası olmasa bile diğer tarayıcılarda aranamaz. Edge'de veya Chrome'da arama yaparsanız arama terimini içeren ayrıntılar, geçtiği yeri görüntüleyecek şekilde genişler. Bu davranış Firefox veya Safari'de tekrarlanmaz.
<summary>, bir <details> öğesinin ilk alt öğesi olmalıdır. İç içe yerleştirildiği üst <details> öğesinin diğer içeriklerinin özetini, başlığını veya açıklamasını temsil eder. <summary> öğesinin içeriği, bir paragraf içinde kullanılabilecek herhangi bir başlık içeriği, düz metin veya HTML olabilir.
Özet işaretçisini açma/kapatma
Önceki iki Codeken'de, özetin satır içi başlangıç tarafındaki oku göreceksiniz. Açıklama widget'ı genellikle açık/kapalı durumunu göstermek için dönen (veya bükülen) küçük bir üçgen kullanılarak ve üçgenin yanında bir etiketle sunulur. <summary> öğesinin içeriği, açıklama widget'ını etiketler.
Her bölümün üst kısmındaki dönen ok, <summary> öğesi üzerinde ayarlanmış bir ::marker simgesidir. Liste öğelerinde olduğu gibi <summary> öğesi de list-style kısayol özelliğini ve list-style-type dahil uzun özelliklerini destekler.
Açıklama üçgeninin stilini CSS ile belirleyebilirsiniz. Buna, üçgende kullanılan işaretçiyi list-style-image içeren resim de dahil olmak üzere başka bir madde işareti türüyle değiştirmek de dahildir.
Diğer stilleri uygulamak için details summary::marker benzeri bir seçici kullanın. ::marker sözde öğe, yalnızca sınırlı sayıda stili kabul eder. ::marker öğesinin kaldırılması ve stili daha kolay ::before ile değiştirilmesi yaygın bir uygulamadır. CSS stilleri, oluşturulan içeriğin stilini açık özelliğin varlığına (veya olmamasına) göre biraz değiştirir. Açıklama widget'ı simgesini list-style: none ayarlayarak kaldırabilir veya işaretçinin içeriğini none olarak ayarlayabilirsiniz. Ancak, görme yapan kullanıcılara, etkinleştirme sonrasında içeriğin gösterilmesini ve gizlenmesini sağlayan açma/kapatma düğmesi olduğunu belirten görsel göstergeler her zaman dahil edin.
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
Bu örnek, varsayılan işaretçiyi kaldırır ve ayrıntılar kapatıldığında bir +, ayrıntılar açıkken bir - öğesi oluşturmak için oluşturulan içeriği ekler.
Ayrıntılar bloğunun varsayılan olarak açılmasını istiyorsanız <details> açılış etiketine open özelliğini ekleyin. Ayrıca, her iletişim kutusu arasına boşluk ekleyebilir ve görünümü iyileştirmek için, oluşturulan içerikle oluşturulan işaretçinin dönüşünü değiştirebilirsiniz:
Hataların ele alınma şekli
Bir <summary> eklemezseniz, tarayıcı sizin için bir işaretçi ve "ayrıntılar" kelimesiyle bir tane oluşturur. Bu özet, bir gölge kökünün parçasıdır ve bu nedenle yazar CSS özet stilleri uygulanmayacaktır. Maalesef Safari, klavye odaklama sırasına ayrıntıları dahil etmemektedir.
Bir <summary> eklerseniz ancak bu, <details> içindeki ilk öğe değilse tarayıcı, özeti olması gerektiği gibi görüntülemeye devam eder. Özete bağlantı, etiket veya başka bir etkileşimli öğe dahil ederseniz de hata olmaz, ancak tarayıcılar etkileşimli içerikteki etkileşimli içeriği farklı şekilde işler. Örneğin, bir özete bağlantı eklerseniz bazı tarayıcılar hem özeti hem de bağlantıyı varsayılan sekme sıralamasına ekler, ancak diğer tarayıcılar varsayılan olarak bağlantıya odaklanmaz.
<summary> içine yerleştirilmiş bir <label> öğesini tıklarsanız bazı tarayıcılar, odağı ilişkilendirilmiş form denetimine verir. Diğer tarayıcılar da form denetimine odaklanır ve <details> öğesini açar veya kapatır.
HTMLDetailsElement arayüzü
Tüm HTML öğeleri gibi HTMLDetailsElement da HTMLElement ürünündeki tüm özellikleri, yöntemleri ve etkinlikleri devralır ve open örnek özelliği ile bir toggle etkinliği ekler. HTMLDetailsElement.open özelliği, open HTML özelliğini yansıtan bir boole değeridir. Bu Boole değeri, öğenin içeriğinin (<summary> sayılmadan) kullanıcıya gösterilip gösterilmeyeceğini belirtir. Açma/kapatma etkinliği, <details> öğesi açıldığında veya kapatıldığında tetiklenir. Bu etkinliği addEventListener() kullanarak dinleyebilirsiniz.
Kullanıcı başka herhangi bir ayrıntıyı açtığında açık ayrıntıları kapatmak için bir komut dosyası yazmak istiyorsanız removeAttribute("open") kullanarak açık özelliği kaldırın:
Bu, JavaScript'in kullanılacağı tek örnektir. Açılan diğer açıklama widget'larını kapatma işlevi dışında muhtemelen JavaScript'e ihtiyacınız yoktur.
<details> ve <summary> öğelerinin yoğun bir şekilde biçimlendirilebileceğini ve hatta araç ipuçları oluşturmak için kullanılabileceğini unutmayın.
Ancak bu anlamsal öğeleri, yerel anlamların uyumsuz olduğu kullanım alanları için kullanacaksanız her zaman erişilebilirliği koruduğunuzdan emin olun.
Çoğu HTML varsayılan olarak erişilebilir durumdadır. Geliştiriciler olarak görevimiz, içeriklerimizin erişilebilir kalmasını sağlamaktır.
Öğrendiklerinizi sınayın
Ayrıntı ve özet hakkındaki bilginizi test edin.
<summary>, hangi öğenin ilk alt öğesi olmalıdır?
<p><details><fieldset>