Nylige tendenser inden for HTML

Denne artikel forklarer nylige tendenser inden for HTML.

Dette forklarer tags, som er blevet tilføjet relativt for nylig i HTML5.

YouTube Video

Nylige tendenser inden for HTML

<template> 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>

• <template>-tagget bruges til at definere genanvendelige HTML-fragmenter, der forbliver skjulte, indtil de aktiveres via JavaScript.

• Ved at bruge <template>-tagget kan du dynamisk oprette genanvendelige UI-komponenter, såsom kort eller listeelementer. Det hjælper også med at reducere kodeduplikation og forbedre vedligeholdelse i storskalaapplikationer.

• I dette eksempel viser klik på knappen 'Brug Skabelon' indholdet af <template>-mærket.

<slot>-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>

• <slot>-tagget fungerer som en pladsholder inden i en webkomponent til at vise indhold, der er sendt fra det overordnede element.
  • Hvis der ikke leveres indhold til en slot, vil fallback-indhold (standardindholdet skrevet direkte inde i <slot>-tagget) blive vist.
• I dette eksempel er navngivne slots (header og footer) defineret inden i <template>-elementet.
• <my-element> er et brugerdefineret tilpasset HTML-element. slot-attributten på <p>-tagget inde i dette element angiver slotnavnet og det indhold, der skal indsættes i slotten.

<dialog> 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>

• <dialog>-tagget bruges til at definere interaktive vinduer som modals eller pop-ups. Du kan styre åbning og lukning ved hjælp af JavaScript.

• I dette eksempel åbner klik på knappen 'Åbn Dialog' dialogen.

inputmode-attribut for <input>-tagget

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

• inputmode-attributten for <input>-tagget angiver typen af virtuel tastatur, der vises på touch-enheder, hvilket forbedrer brugeroplevelsen. For eksempel viser inputmode="tel" et numerisk tastatur til indtastning af telefonnumre.
• inputmode-attributten bruges kun til at justere visningen af det virtuelle tastatur og validerer ikke inputindholdet. For at håndhæve inputrestriktioner skal du bruge type-attributten eller JavaScript-validering.
• Da ikke alle browsere og enheder fuldt ud understøtter dette, er det bedst at forberede passende fallbacks.
• inputmode-attributten kan have følgende værdier. Hver værdi bruges til at vise en bestemt inputtype eller et specifikt virtuelt tastatur.

theme-color attributten for <meta>-tagget

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 attributten for <meta>-tagget bruges til at tilpasse farven på adresselinjen og brugergrænsefladen i kompatible mobile browsere.
• For eksempel kan den skifte mellem mørk tilstand og lys tilstand ved hjælp af media-attributten.

Disse tags og attributter er fremskridt fra HTML5 og er blevet væsentlige elementer i moderne webudvikling. Det anbefales at tjekke specifik browserstøtte og kompatibilitet, når de bruges.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video