HTML5

ve

Etiketlerini Kullanma

Bu makale bizim bölümümüzün bir parçası. "HTML5 / CSS3 Dersleri serisi" - sizi daha iyi bir tasarımcı ve / veya geliştirici yapmanıza yardımcı olmak için. Buraya TIKLAYIN Aynı serideki daha fazla makale görmek için.

HTML5'te bulunan bazı yeni etiketler arasında Teknik Özellikler (örneğin: şekil, figcaption, ve bir kenara), detay ve özet etiketleri, benim görüşüme göre, en faydalı olanıdır. Bu yeni etiketlerle uzun içeriğin bir kısmını gizleyebilir ve yalnızca özetini görüntüleyebilirsiniz..

Aslında bu etkiyi sık sık görüyoruz, ancak çoğu hala JavaScript veya abisi üzerine kuruludur: çoğu insanın anlamadığı jQuery. Şimdi, bu yeni unsurlarla - ayrıntılar ve özet - işler daha kolay olacak.

Öyleyse, etiketlerin gerçek bir senaryoda nasıl çalıştığını görelim..

Bu demoda, bir ürün açıklamasını özetleyeceğiz. İlk önce bir 'details' etiketi oluşturalım ve daha sonra aşağıdaki örnekte olduğu gibi içindeki tüm içeriği 'özet' etiketi ile birlikte koyalım:

 
 
MacBook Pro Özellikleri
 
 
13,3 inç LED-arkadan aydınlatmalı parlak geniş ekran kenardan kenara, kesintisiz cam (1280 x 800 piksel çözünürlük).
 
2,4 GHz Intel Core i5 çift çekirdekli işlemci Mükemmel çoklu görevler için 3 MB paylaşımlı L3 önbellek.
 
Intel HD Graphics 3000 ana bellekle paylaşılan 384 MB DDR3 SDRAM ile.
 
500 GB Seri ATA sabit sürücü (5400 RPM)
 
4 GB kurulu RAM (1333 MHz DDR3; 8 GB'a kadar destekler)
 
 
 

Bu örnekte, MacBook Pro teknik özellikleri detayını ekledim ve şimdi tarayıcının bu etiketleri nasıl işlediğini görelim..

Ayrıca yukarıdaki demosu sizin için daha mantıklı hale getirmek için ayrıntıların üzerinde bir başlık ve daha fazla açıklama ekledim. Yani ne düşünüyorsun? Oldukça kolay, doğru?

Tarayıcı Destekleri

Ancak, bu etiketi tüm web sitenize uygulamak için acele etmeden önce, ayrıntıların ve özet etiketinin şu anda yalnızca Chrome 12 ve daha üst sürümlerinde desteklendiği belirtilmelidir..

En son Firefox bile onları desteklemiyor.

Bu nedenle, bu etiketi uygulamak istiyorsanız, desteklenmeyen tarayıcılar için bir geri dönüş işlevi eklemeniz gerekir. İyi haber, basit; Eski tarayıcılar için etiket işlevini otomatik olarak çoğaltacak olan bu ayrıntıları polyfillini kullanabilirsiniz.

Bu dosyayı indirin ve jQuery (minimumda 1.7+) ile birlikte html belgesine bağlayın ve polyfill'i body etiketinin önüne yerleştirdiğinizden emin olun.

Ve head etiketinin içine, IE8 ve önceki sürümler için HTML5shiv kodunu eklemek üzere aşağıdaki koşullu etiketi ekleyin, aksi takdirde Internet Explorer bu yeni etiketleri tanımaz.

Şimdi Internet Explorer’da nasıl göründüğünü görelim:

Ve şimdi Internet Explorer’da da çalışıyor.

• gösteri
• Kaynak İndir

Sonuç

JavaScript veya jQuery ile böyle bir saklambaç efekti oluşturmak aslında oldukça kolaydır, ancak bunu tarayıcıdan yerel olarak desteklemek birçok kişi için kesinlikle çok daha kolay bir çözümdür. İster JavaScript’te, ister HTML5’te yapmak istersiniz, bu sizin kararınız. Okuduğunuz için teşekkürler ve umarım beğenmişsinizdir.