detaylar

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

173

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.

WP Handle

WP HANDLE: All-in-one WordPress Service

Ö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.

Bir cevap veya yorum yazın

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


E-posta ile abone ol

Bu site spamları azaltmak için Akismet kullanmaktadır. Yorum verilerinizin nasıl işlendiğini Akismet Privacy üzerinden öğrenebilirsiniz.