Mga Kamakailang Uso sa HTML

Ang artikulong ito ay nagpapaliwanag ng mga kamakailang uso sa HTML.

Ito ay nagpapaliwanag ng mga tag na kamakailan lamang naidagdag sa HTML5.

YouTube Video

Mga Kamakailang Uso sa HTML

<template> na Tag

 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>

• Ginagamit ang <template> na tag upang tukuyin ang mga reusable na HTML fragment na nananatiling nakatago hanggang sa ma-activate gamit ang JavaScript.

• Sa paggamit ng <template> na tag, maaari kang lumikha ng mga reusable na UI components nang dynamic, tulad ng mga card o listahan ng mga item. Nakakatulong din ito na mabawasan ang pag-uulit ng code at mapabuti ang kakayahang mapanatili sa malakihang mga aplikasyon.

• Sa halimbawang ito, ang pag-click sa pindutang 'Gamitin ang Template' ay magpapakita ng nilalaman ng <template> na tag.

<slot> na tag

 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>

• Ang <slot> na tag ay nagsisilbing placeholder sa loob ng isang web component upang ipakita ang nilalaman na ipinapasa mula sa parent na elemento.
  • Kung walang nilalaman na ibinibigay para sa isang slot, ang fallback content (ang default na nilalaman na direktang isinulat sa loob ng <slot> na tag) ang ipapakita.
• Sa halimbawa na ito, ang mga pinangalanang slots (header at footer) ay itinakda sa loob ng <template> na elemento.
• Ang <my-element> ay isang custom na HTML element na likha ng user. Ang slot na attribute sa <p> na tag sa loob ng elementong ito ay itinakda ang pangalan ng slot at ang nilalaman na ipapasok sa slot.

<dialog> na Tag

 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>

• Ginagamit ang <dialog> na tag upang tukuyin ang mga interactive na window tulad ng mga modal o pop-up. Maaari mong kontrolin ang pagbubukas at pagsasara gamit ang JavaScript.

• Sa halimbawang ito, ang pag-click sa pindutang 'Buksan ang Dialog' ay magpapakita ng dialog.

inputmode na attribute ng <input> na tag

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

• Ang inputmode na attribute ng <input> na tag ay tinutukoy ang uri ng virtual keyboard na ipinapakita sa mga touch devices, na nagpapahusay sa karanasan ng user. Halimbawa, ang inputmode="tel" ay nagpapakita ng numeric keyboard para sa pag-input ng numero ng telepono.
• Ang inputmode na attribute ay para lamang sa pag-aayos ng display ng virtual keyboard at hindi nito sina-sanitize o itine-validate ang nilalaman ng input. Upang magpataw ng mga input restriction, kailangan mong gumamit ng type na attribute o JavaScript validation.
• Dahil hindi lahat ng browser at device ay ganap na sumusuporta dito, pinakamainam na maghanda ng angkop na fallback options.
• Maaaring tanggapin ng inputmode na attribute ang mga sumusunod na halaga. Ang bawat halaga ay ginagamit upang ipakita ang partikular na uri ng input o virtual keyboard.

Ang theme-color na katangian ng <meta> na tag

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)">

• Ang theme-color na katangian ng <meta> na tag ay ginagamit para i-customize ang kulay ng address bar at UI sa mga compatible na mobile browser.
• Halimbawa, maaari itong magpalipat-lipat sa pagitan ng dark mode at light mode gamit ang media na katangian.

Ang mga tag at katangiang ito ay mga pag-unlad mula sa HTML5 at naging mahalagang elemento na sa makabagong web development. Inirerekomenda na suriin ang suporta at compatibility ng partikular na browser kapag ginagamit ang mga ito.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video