แนวโน้มล่าสุดใน HTML

บทความนี้อธิบายแนวโน้มล่าสุดใน HTML

นี่อธิบายแท็กที่เพิ่งถูกเพิ่มเข้ามาใน HTML5 เมื่อไม่นานมานี้

YouTube Video

แนวโน้มล่าสุดใน HTML

แท็ก <template>

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

• แท็ก <template> ใช้สำหรับกำหนดชิ้นส่วน HTML ที่สามารถนำมาใช้ซ้ำได้และซ่อนอยู่จนกว่าจะถูกเปิดใช้งานด้วย JavaScript

• โดยการใช้แท็ก <template> คุณสามารถสร้างส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้อย่างไดนามิก เช่น การ์ดหรือลิสต์ไอเท็ม มันยังช่วยลดการทำซ้ำของโค้ดและเพิ่มความสามารถในการดูแลรักษาในแอปพลิเคชันขนาดใหญ่

• ในตัวอย่างนี้ การคลิกปุ่ม 'ใช้เทมเพลต' จะแสดงเนื้อหาของแท็ก <template>

แท็ก <slot>

 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>

• แท็ก <slot> ทำหน้าที่เป็นตัวแทนภายในคอมโพเนนต์เว็บเพื่อแสดงเนื้อหาที่ส่งมาจากองค์ประกอบพาเรนท์
  • หากไม่มีการกำหนดเนื้อหาสำหรับสล็อต จะมีการแสดงเนื้อหา fallback (เนื้อหาเริ่มต้นที่เขียนไว้ภายในแท็ก <slot> โดยตรง)
• ในตัวอย่างนี้ มีการกำหนดสล็อตที่มีชื่อ (header และ footer) ภายในอิลิเมนต์ <template>
• <my-element> เป็นอิลิเมนต์ HTML ที่ผู้ใช้กำหนดเอง แอตทริบิวต์ slot บนแท็ก <p> ภายในอิลิเมนต์นี้กำหนดชื่อสล็อตและเนื้อหาที่จะถูกใส่ลงในสล็อต

แท็ก <dialog>

 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

• แท็ก <dialog> ใช้สำหรับกำหนดหน้าต่างแบบโต้ตอบ เช่น โมดอลหรือป๊อปอัป คุณสามารถควบคุมการเปิดและปิดได้ด้วย JavaScript

• ในตัวอย่างนี้ การคลิกปุ่ม 'เปิดกล่องโต้ตอบ' จะแสดงกล่องโต้ตอบ

แอตทริบิวต์ inputmode ของแท็ก <input>

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">

• แอตทริบิวต์ inputmode ของแท็ก <input> กำหนดชนิดของคีย์บอร์ดเสมือนที่แสดงบนอุปกรณ์สัมผัส เพื่อสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น ตัวอย่างเช่น inputmode="tel" จะแสดงคีย์บอร์ดตัวเลขสำหรับการป้อนหมายเลขโทรศัพท์
• แอตทริบิวต์ inputmode นั้นใช้เพียงเพื่อปรับการแสดงผลของคีย์บอร์ดเสมือน และไม่ได้ตรวจสอบความถูกต้องของข้อมูลที่ป้อน เพื่อบังคับข้อจำกัดในการป้อนข้อมูล คุณจำเป็นต้องใช้แอตทริบิวต์ type หรือการตรวจสอบด้วย JavaScript
• เนื่องจากไม่ใช่ทุกเบราว์เซอร์และอุปกรณ์จะรองรับฟีเจอร์นี้อย่างสมบูรณ์ จึงควรเตรียม fallback ที่เหมาะสม
• แอตทริบิวต์ inputmode สามารถใช้ค่าต่อไปนี้ได้ แต่ละค่าถูกใช้เพื่อแสดงประเภทการป้อนข้อมูลหรือคีย์บอร์ดเสมือนเฉพาะเจาะจง

แอตทริบิวต์ theme-color ของแท็ก <meta>

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

• แอตทริบิวต์ theme-color ของแท็ก <meta> ใช้สำหรับปรับแต่งสีของแถบที่อยู่และส่วนติดต่อผู้ใช้ในเบราว์เซอร์มือถือที่รองรับ
• ตัวอย่างเช่น สามารถสลับระหว่างโหมดมืดและโหมดสว่างด้วยการใช้แอตทริบิวต์ media

แท็กและแอตทริบิวต์เหล่านี้เป็นความก้าวหน้าจาก HTML5 และกลายเป็นองค์ประกอบที่สำคัญในการพัฒนาเว็บสมัยใหม่ แนะนำให้ตรวจสอบการรองรับของเบราว์เซอร์และความเข้ากันได้เมื่อใช้งาน

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video