10 คุณสมบัติใหม่ของ HTML 5.1 และวิธีการใช้งาน IRL

ข้อกำหนด HTML ได้รับ ยกเครื่องใหญ่ สองสามสัปดาห์ที่ผ่านมาเมื่อ W3C เผยแพร่ ใหม่คำแนะนำ HTML 5.1 ในเดือนพฤศจิกายน 2559 ในบล็อกโพสต์เมื่อเร็ว ๆ นี้ W3C เรียกว่ารุ่นใหญ่รุ่นใหม่ มาตรฐานทองคำ, HTML 5.1 ให้วิธีการใหม่ในการใช้ HTML เพื่อสร้างประสบการณ์การใช้งานเว็บที่ยืดหยุ่นยิ่งขึ้น.

ในบทความนี้เราจะมาดูคุณสมบัติใหม่ที่คุณสามารถใช้ประโยชน์ได้ โดยไม่ต้องสัมผัส JavaScript, อย่างไรก็ตามการปรับปรุงพื้นหลัง JavaScript ก็มีความโดดเด่นเช่นกันเนื่องจากคุณสามารถเห็นได้ใน บันทึกการเปลี่ยนแปลงอย่างเป็นทางการ.

โปรดทราบว่าในปัจจุบันเบราว์เซอร์บางรุ่นอาจไม่รองรับคุณสมบัติเหล่านี้ทั้งหมดดังนั้นอย่าลืม ตรวจสอบการสนับสนุนเบราว์เซอร์ ก่อนที่คุณจะใช้พวกเขาในการผลิต หากคุณมีความสนใจใน การพัฒนามาตรฐาน HTML เพิ่มเติม, คุณสามารถตรวจสอบร่างการทำงานของ HTML 5.2 ได้เช่นกัน.

1. กำหนดทรัพยากรรูปภาพหลายรายการสำหรับการออกแบบที่ตอบสนอง

ใน HTML 5.1 คุณสามารถใช้ ติดแท็กพร้อมกับ srcset คุณลักษณะที่จะทำให้ การเลือกรูปภาพที่ตอบสนอง เป็นไปได้ แท็กแสดงถึง คอนเทนเนอร์รูปภาพ ที่ช่วยให้นักพัฒนา ประกาศแหล่งข้อมูลรูปภาพอื่น เพื่อปรับให้เข้ากับ UAขนาดวิวพอร์ตความหนาแน่นของพิกเซลหน้าจอประเภทหน้าจอและพารามิเตอร์อื่น ๆ ที่ใช้ใน การออกแบบที่ตอบสนอง.

แท็กตัวเองไม่แสดงอะไรเลยมันทำหน้าที่เป็นเพียง บริบทสำหรับทรัพยากรรูปภาพหลายรายการ. คุณต้องประกาศ ทรัพยากรรูปภาพเริ่มต้น เป็นค่าของ src คุณลักษณะของ แท็กและ ทรัพยากรรูปภาพทางเลือก ไปภายใน srcset คุณสมบัติของ และ องค์ประกอบ.

ตัวอย่างรหัส:

2. แสดงหรือซ่อนข้อมูลเพิ่มเติม

กับ

และ

แท็กคุณสามารถ เพิ่มข้อมูลเพิ่มเติม ไปยังชิ้นส่วนเนื้อหา ข้อมูลเพิ่มเติม ไม่แสดงโดยค่าเริ่มต้น, แต่ถ้าผู้ใช้มีความสนใจพวกเขา มีตัวเลือกให้ดู. ในรหัสของคุณคุณควรจะ วาง

ติดแท็กภายใน

. หลังจาก

แท็กที่คุณสามารถ เพิ่มข้อมูลพิเศษ คุณต้องการซ่อน.

ตัวอย่างรหัส:

 
 
ข้อความผิดพลาด
 
 
เราดาวน์โหลดวิดีโอนี้ไม่เสร็จ.
 
 
ชื่อไฟล์:
yourfile.mp4
 
ขนาดไฟล์:
100 MB
 
ระยะเวลา:
00:05:27
 
 
 
 

นี่คือลักษณะตัวอย่างโค้ดนี้ใน Firefox 50.0.2:

3. เพิ่มฟังก์ชันการทำงานให้กับเมนูบริบทของเบราว์เซอร์

กับ องค์ประกอบและ ประเภท = "บริบท" คุณลักษณะคุณสามารถ เพิ่มฟังก์ชั่นที่กำหนดเอง ไปที่ เมนูบริบทของเบราว์เซอร์. คุณต้องกำหนด เป็นองค์ประกอบย่อยของ

แท็ก รหัส ของ องค์ประกอบจำเป็นต้อง ดำเนินการค่าเดียวกันเป็น ContextMenu คุณลักษณะ ขององค์ประกอบที่เราต้องการเพิ่มเมนูบริบท (ซึ่งก็คือ องค์ประกอบในตัวอย่างด้านล่าง).

ตัวอย่างรหัส:

คลิกขวาฉัน

แท็กสามารถ มีสามประเภท, "ช่องทำเครื่องหมาย", "คำสั่ง" (ซึ่งคุณต้องเพิ่มการกระทำด้วย JavaScript) และ วิทยุ. เป็นไปได้ที่จะเพิ่มมากกว่าหนึ่งรายการเมนูในเมนูบริบทอย่างไรก็ตาม การสนับสนุนเบราว์เซอร์ สำหรับคุณสมบัตินี้คือ ยังไม่ดีมาก. Chrome 54 ไม่รองรับและ Firefox 50 อนุญาตให้มีเมนูบริบทเพิ่มเติมเพียงเมนูเดียวเท่านั้น ด้านล่างคุณสามารถดูวิธีการทำงานของตัวอย่างโค้ดใน Firefox 50.

4. ทำรังส่วนหัวและท้ายกระดาษ

HTML 5.1 ช่วยให้คุณ ทำรังหัวกระดาษและท้ายกระดาษ ถ้าแต่ละระดับคือ มีอยู่ภายในเนื้อหาการแบ่งส่วน. หมายเหตุด้านล่างนี้เป็นภาพหน้าจอจากเอกสาร W3C และให้คำแนะนำแก่นักพัฒนาเกี่ยวกับวิธีการวางซ้อนของส่วนหัวและส่วนท้ายที่เหมาะสม.

คุณสมบัตินี้มีประโยชน์หากคุณต้องการเพิ่ม ส่วนหัวที่มีเนื้อหาละเอียดไปยังองค์ประกอบการแบ่งความหมาย, เช่น

และ

. ตัวอย่างโค้ดด้านล่างสร้างแถบด้านข้างภายในส่วนหัว