Ç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.
<summary>
, hangi öğenin ilk alt öğesi olmalıdır?
<fieldset>
<p>
<details>