HTML5 วิธีใช้แท็ก

และ

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

ในบรรดาแท็กใหม่หลายแท็กที่มีอยู่ใน HTML5 ข้อมูลจำเพาะ (เช่น: รูป, figcaption, และ กัน), รายละเอียด และ สรุป แท็กในความคิดของฉันมีประโยชน์มากที่สุด ด้วยแท็กใหม่เหล่านี้คุณสามารถซ่อนเนื้อหายาว ๆ และแสดงเฉพาะข้อมูลสรุป.

เรามักจะเห็นผลกระทบนี้บ่อยครั้ง แต่ส่วนใหญ่ยังคงสร้างจาก JavaScript หรือน้องชายของมัน: jQuery ซึ่งคนส่วนใหญ่ไม่เข้าใจ ตอนนี้ด้วยองค์ประกอบใหม่เหล่านี้ - รายละเอียด และ สรุป - สิ่งต่างๆจะง่ายขึ้น.

ดังนั้นเรามาดูวิธีการทำงานของแท็กในสถานการณ์กรณีจริง.

ในการสาธิตนี้เราจะสรุปรายละเอียดผลิตภัณฑ์ ขั้นแรกให้สร้างแท็ก 'รายละเอียด' จากนั้นใส่เนื้อหาทั้งหมดพร้อมกับแท็ก 'สรุป' ข้างในเช่นในตัวอย่างด้านล่าง:

 
 
ข้อกำหนดของ MacBook Pro
 
 
หน้าจอไวด์สกรีนแบบ LED-backlit แบบเคลือบเงาขนาด 13.3 นิ้ว ด้วยกระจกที่ไร้ขอบ (ความละเอียด 1280 x 800 พิกเซล).
 
โปรเซสเซอร์ Dual-Core 2.4 GHz Intel Core i5 ด้วย L3 cache 3 MB ที่ใช้ร่วมกันเพื่อการมัลติทาสก์ที่ยอดเยี่ยม.
 
กราฟิก Intel HD 3000 ด้วย 383 MB DDR3 SDRAM แบ่งปันกับหน่วยความจำหลัก.
 
ฮาร์ดไดรฟ์ Serial ATA 500 GB (5400 รอบต่อนาที)
 
RAM ที่ติดตั้ง 4 GB (1333 MHz DDR3 รองรับสูงสุด 8 GB)
 
 
 

ในตัวอย่างนั้นฉันได้เพิ่มรายละเอียดสเปคของ MacBook Pro และตอนนี้เรามาดูกันว่าเบราว์เซอร์แสดงแท็กเหล่านั้นอย่างไร.

ฉันยังได้เพิ่มชื่อและคำอธิบายเพิ่มเติมของผลิตภัณฑ์ด้านบนรายละเอียดเพื่อให้การสาธิตด้านบนมีความสมเหตุสมผลสำหรับคุณมากขึ้น ดังนั้นสิ่งที่คุณคิดว่า? มันค่อนข้างง่ายใช่มั้ย?

รองรับเบราว์เซอร์

อย่างไรก็ตามก่อนที่คุณจะรีบนำแท็กนี้ไปใช้กับเว็บไซต์ของคุณทั้งหมดโปรดทราบว่าปัจจุบันรายละเอียดและแท็กสรุปได้รับการสนับสนุนเฉพาะใน Chrome 12 และสูงกว่า.

แม้แต่ Firefox เวอร์ชันล่าสุดยังไม่สนับสนุน.

ดังนั้นหากคุณต้องการใช้แท็กนี้คุณต้องรวมฟังก์ชันสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ ข่าวดีก็คือมันง่าย คุณสามารถใช้รายละเอียด polyfill ซึ่งจะทำซ้ำฟังก์ชั่นแท็กสำหรับเบราว์เซอร์เก่าโดยอัตโนมัติ.

ดาวน์โหลดไฟล์นี้และเชื่อมโยงไปยังเอกสาร html พร้อมกับ jQuery (อย่างน้อย 1.7+) และตรวจสอบให้แน่ใจว่าคุณวาง polyfill ก่อนแท็กปิดตัว.

และภายในแท็กส่วนหัวให้ใส่แท็กแบบมีเงื่อนไขดังต่อไปนี้เพื่อรวม HTML5shiv สำหรับ IE8 และรุ่นก่อนหน้ามิฉะนั้น Internet Explorer จะไม่รู้จักแท็กใหม่เหล่านี้.

ตอนนี้เรามาดูกันว่ามันจะปรากฏใน Internet Explorer:

และตอนนี้ก็ใช้งานได้บน Internet Explorer เช่นกัน.

• การสาธิต
• แหล่งดาวน์โหลด

ข้อสรุป

การสร้างเอฟเฟกต์การซ่อนและแสดงด้วย JavaScript หรือ jQuery นั้นค่อนข้างง่าย แต่การได้รับการสนับสนุนจากเบราว์เซอร์เป็นวิธีแก้ปัญหาที่ง่ายกว่าสำหรับคนจำนวนมาก ไม่ว่าคุณต้องการที่จะทำมันใน JavaScript หรือ HTML5 มันเป็นการตัดสินใจของคุณ ขอบคุณสำหรับการอ่านและฉันหวังว่าคุณจะสนุกกับมัน.