Senaste trenderna inom HTML

Den här artikeln förklarar de senaste trenderna inom HTML.

Detta förklarar taggar som har lagts till relativt nyligen i HTML5.

YouTube Video

Senaste trenderna inom HTML

<template>-tagg

 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>-taggen används för att definiera återanvändbara HTML-fragment som förblir dolda tills de aktiveras via JavaScript.

• Genom att använda <template>-taggen kan du dynamiskt skapa återanvändbara UI-komponenter, såsom kort eller listobjekt. Det hjälper också till att minska kodduplication och förbättra underhållbarheten i storskaliga applikationer.

• I det här exemplet visar ett klick på knappen 'Använd mall' innehållet i <template>-taggen.

<slot>-tagg

 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>-taggen fungerar som en platshållare inom en webbkomponent för att visa innehåll som skickats från parent-elementet.
  • Om inget innehåll anges för en slot visas fallback-innehåll (det förvalda innehållet som är skrivet direkt inuti <slot>-taggen).
• I detta exempel är namngivna slots (header och footer) definierade inom <template>-elementet.
• <my-element> är ett användardefinierat anpassat HTML-element. slot-attributet på <p>-taggen inuti detta element anger slotens namn och innehållet som ska infogas i sloten.

<dialog>-tagg

 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>-taggen används för att definiera interaktiva fönster som modaler eller popups. Du kan kontrollera öppning och stängning med hjälp av JavaScript.

• I det här exemplet visar ett klick på knappen 'Öppna dialog' dialogrutan.

inputmode-attributet för <input>-taggen

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

• inputmode-attributet för <input>-taggen anger typen av virtuellt tangentbord som visas på pekskärmsenheter, vilket förbättrar användarupplevelsen. Till exempel, inputmode="tel" visar ett numeriskt tangentbord för telefonnummerinmatning.
• inputmode-attributet används endast för att justera det virtuella tangentbordets visning och validerar inte inmatningsinnehållet. För att upprätthålla inmatningsrestriktioner måste du använda type-attributet eller JavaScript-validering.
• Eftersom inte alla webbläsare och enheter stödjer detta fullt ut är det bäst att förbereda lämpliga fallbacks.
• inputmode-attributet kan ta följande värden. Varje värde används för att visa en specifik inmatningstyp eller ett virtuellt tangentbord.

theme-color-attributet i <meta>-taggen

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-attributet i <meta>-taggen används för att anpassa färgen på adressfältet och gränssnittet i kompatibla mobila webbläsare.
• Till exempel kan den växla mellan mörkt läge och ljust läge genom att använda media-attributet.

Dessa taggar och attribut är framsteg från HTML5 och har blivit viktiga element i modern webbutveckling. Det rekommenderas att kontrollera specifikt webbläsarstöd och kompatibilitet när man använder dem.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video