Tendenze recenti in HTML

Questo articolo spiega le tendenze recenti in HTML.

Questo spiega i tag aggiunti relativamente di recente in HTML5.

YouTube Video

Tendenze recenti in HTML

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

• Il tag <template> viene utilizzato per definire frammenti HTML riutilizzabili che rimangono nascosti fino a quando non vengono attivati tramite JavaScript.

• Utilizzando il tag <template>, è possibile creare dinamicamente componenti UI riutilizzabili, come card o elementi di lista. Ciò aiuta anche a ridurre la duplicazione del codice e a migliorare la manutenibilità nelle applicazioni di grandi dimensioni.

• In questo esempio, facendo clic sul pulsante 'Usa Modello' viene visualizzato il contenuto del tag <template>.

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

• Il tag <slot> funge da segnaposto all'interno di un componente web per mostrare il contenuto passato dall'elemento genitore.
  • Se al posto riservato non viene fornito contenuto, verrà visualizzato il contenuto di default (ovvero il contenuto predefinito scritto direttamente all'interno del tag <slot>).
• In questo esempio, gli slot nominati (header e footer) sono definiti all'interno dell'elemento <template>.
• <my-element> è un elemento HTML personalizzato definito dall'utente. L'attributo slot nel tag <p> all'interno di questo elemento specifica il nome dello slot e il contenuto da inserire nello slot.

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

• Il tag <dialog> viene utilizzato per definire finestre interattive come modali o pop-up. Puoi controllare l'apertura e la chiusura utilizzando JavaScript.

• In questo esempio, facendo clic sul pulsante 'Apri Finestra di Dialogo' viene visualizzata la finestra di dialogo.

Attributo inputmode del tag <input>

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

• L'attributo inputmode del tag <input> specifica il tipo di tastiera virtuale visualizzata sui dispositivi touch, migliorando l'esperienza utente. Ad esempio, inputmode="tel" visualizza una tastiera numerica per l'inserimento di numeri di telefono.
• L'attributo inputmode serve solo per regolare la visualizzazione della tastiera virtuale e non valida il contenuto dell'input. Per applicare restrizioni sui dati di input, è necessario utilizzare l'attributo type o una validazione tramite JavaScript.
• Dato che non tutti i browser e i dispositivi supportano pienamente questa funzionalità, è meglio preparare soluzioni alternative appropriate.
• L'attributo inputmode può assumere i seguenti valori. Ogni valore è utilizzato per visualizzare un tipo specifico di input o di tastiera virtuale.

Attributo theme-color del tag <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)">

• L'attributo theme-color del tag <meta> viene utilizzato per personalizzare il colore della barra degli indirizzi e dell'interfaccia utente nei browser mobili compatibili.
• Ad esempio, può passare tra la modalità scura e la modalità chiara utilizzando l'attributo media.

Questi tag e attributi rappresentano progressi di HTML5 e sono diventati elementi essenziali nello sviluppo web moderno. Si consiglia di verificare il supporto specifico dei browser e la compatibilità quando li si utilizza.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video