Ayrıntılar ve özet

Çok faydalı ayrıntıların ve özet öğelerin işleyiş şeklini ve bunları nereden nasıl kullanacağınızı göstereceğim.

Açıklama widget'ı, içeriği gizleyen ve gösteren bir kullanıcı arayüzü kontrolüdür. Bunu web.dev adresinde okuyorsanız ve "Bu sayfada" öğesi tıklandığında görüntü alanının genişliği 106 em'den küçüktür bu paragrafın üzerinde, bu bölümde bulabilirsiniz. Bu seçeneği görmüyorsanız, bu sayfadaki içindekiler gezinme menüsünü şu şekilde görüntülemek için tarayıcıyı küçültün: açıklama widget'ı.

Akordeon grafik kullanıcı arayüzü, dikey olarak üst üste dizilmiş bir diziden oluşur. widget'larının kullanıma sunulmasına izin verilir. 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; kullanıcı tıklandığında söz konusu sorunun yanıtı genişletilir veya "açıklanır".

jQuery, en az 2009'dan beri bir akordeon kullanıcı arayüzü kalıbı içermektedir. Orijinal, JavaScript'siz akordeon çözümü, her SSS sorusunun <label> ve ardından etiketlendiği onay işareti konulması ve sonra da <div> görüntülemesinin sağlanmasını içeriyordu. onay işareti işaretlendiğinde yanıtlayabilirsiniz. CSS aşağıdaki gibi görünür:

#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 olmadan akordeonlar gibi açıklama widget'ları nispeten yenidir ekleme; <details> ve <summary> öğeleri, Ocak 2020'den beri yalnızca tüm modern tarayıcılarda tam olarak desteklenmektedir. Artık çalışır durumda oluşturabilirsiniz (ancak daha az da olsa) daha cazip bir hale getirir. Yalnızca <details> ve <summary> öğeleri yeterlidir: Bunlar, öğeleri işlemek için dahili bir yöntemdir. içeriği genişletme ve daraltma konusunda yardımcı olabilir. Kullanıcı bir <summary> öğesini tıkladığında veya ona dokunduğunda ya da aşağıdaki işlemler sırasında Enter tuşunu serbest bıraktığında: <summary> odağı var, üst <details> öğesinin içeriği görünür duruma geliyor!

Tüm anlamsal içeriklerde olduğu gibi, varsayılan özellikleri ve görünümü kademeli olarak geliştirebilirsiniz. Bu örnekte, CSS eklendi, ancak başka öğe bulunmuyor:

Bu Codepen'lerin JavaScript içermediğini unutmayın.

Görünürlük değiştiriliyor: open özelliği

<details> öğesi, açıklama widget'ı kapsayıcısıdır. <summary>, üst <details> için özet veya açıklama. İlgili içeriği oluşturmak için kullanılan özet her zaman görüntülenir. Üst öğe içeriğinin geri kalanının görüntülenmesini açıp kapatan bir düğme gibi işlev görür. Etkileşim <summary> seçeneği kullanıldığında, kendi kendini etiketlenmiş özet kardeşler görünümü için <details>' öğesinin open özelliği.

open özelliği bir boole özelliğidir. Bu öğe varsa değeri veya eksikliği ne olursa olsun tüm <details> kullanıcıya gösterilir. open özelliği mevcut değilse yalnızca <summary> içeriği gösterilir.

Kullanıcı kontrolle etkileşimde bulunurken open özelliği otomatik olarak eklenip kaldırıldığından, bu özellik CSS'de şu işlemler için kullanılabilir: durumuna bağlı olarak öğe için farklı bir stil belirleyin.

Her biri <summary> alt öğesine sahip birden fazla <details> öğesinden oluşan bir akordeon oluşturabilirsiniz. open özelliği atlanır HTML'nizde, <details> öğesinin tamamının daraltılacağı veya kapanacağı, ancak sayfa yüklendiğinde yalnızca özet başlıklarının görülebileceği anlamına gelir; her bir başlık, <details> üst öğesindeki diğer içerikler için açıcı olarak kullanılır. HTML'nize open özelliğini eklerseniz <details> , sayfa yüklendiğinde içerikler görünecek şekilde genişletilmiş olarak oluşturulur.

Daraltılmış durumdaki gizli içerik, daraltılmış içerik değiştirilse bile bazı tarayıcılarda aranabilirken bazılarında gösterilmez DOM'nin bir parçası değildir. Edge veya Chrome'da arama yaparsanız arama terimini içeren ayrıntılar genişleyerek fark ettim. Bu davranış Firefox veya Safari'de yinelenmez.

<summary>, bir <details> öğesinin ilk alt öğesi olmalıdır ve geri kalanı için bir özet, başlık veya açıklamayı temsil eder. içine yerleştirildiği <details> üst öğesinin içeriğinin derinliklerine denk gelir. <summary> öğesinin içeriği herhangi bir başlık olabilir metin içerik, düz metin veya HTML'den oluşur.

Özet işaretçisini açma/kapatma

Önceki iki Codepen'de satır içi başlangıcı işaret eden okları tercih edebilirsiniz. Açıklama widget'ı genellikle ekranda dönen (veya bükülen) küçük bir üçgen kullanılarak sunulur. işaretini tıklayın. <summary> öğesinin içeriği, açıklama widget'ını etiketler. Her bir bölümün üst kısmındaki dönen ok,::marker <summary> öğesi. Liste öğelerinde olduğu gibi <summary> öğesi de list-style öğesini destekler steno mülkü ve list-style-type dahil olmak üzere uzun vadeli özellikleri. Açıklama üçgenini CSS ile biçimlendirebilirsiniz. Örneğin, üçgen yerine başka bir madde işareti türünü de seçebilirsiniz. list-style-image içeren bir resim.

Diğer stilleri uygulamak için details summary::marker benzeri bir seçici kullanın. İlgili içeriği oluşturmak için kullanılan ::marker sözde öğe yalnızca sınırlı sayıda stili kabul eder. Kaldırma ::marker ve bunu daha kolay kullanılan ::before ile değiştirerek CSS stillerinin, oluşturulan içeriğin stilini varlığına (veya yokluğuna) göre biraz değiştirmesiyle yaygın bir uygulama açık özelliğin değeri olarak kabul edilir. Açıklama widget'ı simgesini list-style: none ayarlayarak kaldırabilir veya içeriği ayarlayabilirsiniz. içine none işareti koyun, ancak gören kullanıcılara her zaman özet içeriğinin açma/kapatma olduğunu bildiren görsel göstergeler ekleyin düğmesini tıklayın.

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 + ve bir - oluşturmak için oluşturulan içeriği ekler ayrıntılara göz atmayı unutmayın.

Ayrıntı blokunun varsayılan olarak açılmasını istiyorsanız <details> açılış etiketine open özelliğini ekleyin. Alan da ekleyebilirsiniz her iletişim kutusu arasında geçiş yapın ve görünümü iyileştirmek için, oluşturulan içerikle oluşturulan işaretçinin dönüşünü değiştirin:

Hatalar nasıl işlenir?

<summary> eklemezseniz, tarayıcı sizin için bir işaretçi ve "ayrıntılar" kelimesiyle bir şifre oluşturur. Bu özet bir gölge kökünün parçasıdır ve bu nedenle, yazar CSS özet stilleri uygulanmaz. Ne yazık ki Safari klavye odaklama sıralamasındaki ayrıntılara dokunun.

Bir <summary> eklerseniz ancak <details> içindeki ilk öğe değilse tarayıcı özeti görüntülemeye devam eder. olmasını sağlayın. Özete bir bağlantı, etiket veya başka bir etkileşimli öğe eklemeniz durumunda da başarısız olmaz. içeriğindeki etkileşimli içeriği farklı şekilde ele almak. Örneğin, özete bir 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çinde iç içe yerleştirilmiş bir <label> simgesini tıklarsanız bazı tarayıcılar, ilişkili form denetimine odaklanır; diğer tarayıcılar form kontrolüne odaklanılmasını sağlar ve <details> düğmesini açık veya kapalı duruma getirir.

HTMLDetailsElement arayüzü

Tüm HTML öğelerinde olduğu gibi HTMLDetailsElement da tüm HTML öğelerini devralır HTMLElement'ten özellikleri, yöntemleri ve etkinlikleri içerir ve open örnek mülkü ve toggle unutmayın. HTMLDetailsElement.open özelliği bir boole değeridir open HTML özelliğini yansıtan bir değer öğenin içeriğinin (<summary> hariç) kullanıcıya gösterilip gösterilmeyeceğini belirler. Açma/kapatma etkinliği tetiklendi <details> öğesi açıldığında veya kapatıldığında. addEventListener() kullanarak bu etkinliği dinleyebilirsiniz.

Kullanıcı diğer ayrıntıları açtığında açık ayrıntıları kapatacak bir komut dosyası yazmak istiyorsanız açık özelliği kaldırın removeAttribute("open") kullanarak:

JavaScript'in kullanabileceği tek örnek budur. Muhtemelen JavaScript'e gerek duymazsınız. Ancak, JavaScript'e ihtiyacınız olmayan açıklama widget'larını açtı.

<details> ve <summary> öğelerinin yoğun stilde kullanılabildiğini ve hatta araç ipuçları oluşturmak için kullanılabileceğini unutmayın. Ancak yerel anlamların uyuşmadığı kullanım alanları için bu anlamsal öğeleri kullanacaksanız her zaman erişilebilirliği koruduğunuzdan emin olun. Çoğunlukla HTML, varsayılan olarak erişilebilir durumdadır. Geliştiriciler olarak görevimiz, içeriğimizin erişilebilir kalmasını sağlamak.

Öğrendiklerinizi sınayın

Ayrıntılar ve özet bilginizi test edin.