HTML Ayrıntılar ve Özet Öğeleri

detaylar
Detaylar

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.

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

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.

Detaylar, ayrıntılar, özet vesaire

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.

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.





PAYLAŞ

Bir cevap veya yorum yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir