SUNIPEYK

[ Okuma süresi tahmini 2 dakikadır ]

Ayrıntılar, detaylar

Html5’in az bilinen güzel özelliklerinden biri veya ikisi diyelim, çünkü birbirlerini tamamlayan, beraber kullanılan öğeleri details ve summary.
Details ile istediğiniz detayları tıklanınca açılan bir bölüm içinde gösterebilmenizi sağlayan bir özellik.
Edge ve IE haricinde tüm tarayıcılar destekliyor. Edge ise konu üzerinde çalışmalarını sürdürüyormuş. Yakında desteklemeye başlayabilir.

Details, Summary

Aslında summary kısmı olmadan da details özelliği çalışıyor.

Örnek 1

Details kullanım örneği.

Kodu;

<details>Gördüğünüz gibi summary kullanmayınca details şeklinde kısım otomatik olarak çıkıyor.</details>

Bu details kısmı yerine detaylar, ayrıntılar veya istediğimiz bir özet yazmasını istediğimizde ise summary kısmını kullanıyoruz.

Örnek 2

Details ve summary kullanım örneği.

Kodu;

<details><summary>Detaylar, ayrıntılar, özet vesaire</summary>
 Gördüğünüz gibi summary kullanınca details şeklinde çıkan kısım, summary bölümünde yazdıklarımız ile görünmektedir.</details>

Ek Not

Sola otomatik olarak eklenen minik siyah üçgeni istemezseniz CSS dosyanıza
summary{list-style: none}
eklemeniz yeterli.

Ek Not 2

Bu elementler amp sayfalarında çalışmıyor. Umarız güncellemelerde desteklerler.