Nylige trender innen HTML

Denne artikkelen forklarer nylige trender innen HTML.

Dette forklarer tagger som nylig har blitt lagt til i HTML5.

YouTube Video

Nylige trender innen HTML

<template> Taggen

 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 brukes til å definere gjenbrukbare HTML-fragmenter som forblir skjulte til de aktiveres via JavaScript.

• Ved å bruke <template>-taggen kan du dynamisk opprette gjenbrukbare UI-komponenter, som kort eller listeelementer. Dette hjelper også med å redusere duplisering av kode og forbedre vedlikeholdbarhet i storskala applikasjoner.

• I dette eksempelet viser et klikk på 'Bruk mal'-knappen innholdet 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 fungerer som en plassholder i en webkomponent for å vise innhold som sendes fra overordnet element.
  • Hvis det ikke gis innhold for en slot, vil fallback-innholdet (standardinnholdet skrevet direkte inne i <slot>-taggen) bli vist.
• I dette eksemplet er navngitte slots (header og footer) definert inne i <template>-elementet.
• <my-element> er et brukertilpasset HTML-element. slot-attributtet på <p>-taggen inne i dette elementet angir slot-navnet og innholdet som skal settes inn i slotten.

<dialog> Taggen

 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 brukes til å definere interaktive vinduer som modaler eller pop-ups. Du kan kontrollere åpning og lukking ved hjelp av JavaScript.

• I dette eksempelet åpner et klikk på 'Åpne dialog'-knappen dialogen.

inputmode-attributtet til <input>-taggen

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

• inputmode-attributtet til <input>-taggen spesifiserer typen av virtuelt tastatur som vises på berøringsenheter, og forbedrer brukeropplevelsen. For eksempel viser inputmode="tel" et numerisk tastatur for telefonnummerinntasting.
• inputmode-attributtet er kun for å justere visningen av det virtuelle tastaturet og validerer ikke innholdet som legges inn. For å håndheve inntaksrestriksjoner må du bruke type-attributtet eller JavaScript-validering.
• Siden ikke alle nettlesere og enheter støtter dette fullt ut, er det best å forberede passende fallbacks.
• inputmode-attributtet kan ha følgende verdier. Hver verdi brukes til å vise en spesifikk inntakstype eller virtuelt tastatur.

theme-color-attributtet til <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-attributtet til <meta>-taggen brukes til å tilpasse fargen på adressefeltet og brukergrensesnittet i kompatible mobilnettlesere.
• For eksempel kan det bytte mellom mørk modus og lys modus ved å bruke media-attributtet.

Disse taggene og attributtene er videreutviklinger fra HTML5 og har blitt essensielle elementer i moderne webutvikling. Det anbefales å sjekke spesifikk nettleserstøtte og kompatibilitet når de brukes.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video