Tendances récentes en HTML

Cet article explique les tendances récentes en HTML.

Cela explique les balises qui ont été ajoutées relativement récemment dans HTML5.

YouTube Video

Tendances récentes en HTML

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

• La balise <template> est utilisée pour définir des fragments HTML réutilisables qui restent cachés jusqu'à ce qu'ils soient activés via JavaScript.

• En utilisant la balise <template>, vous pouvez créer dynamiquement des composants d'interface utilisateur réutilisables, tels que des cartes ou des éléments de liste. Cela permet également de réduire la duplication du code et d'améliorer la maintenabilité dans les applications à grande échelle.

• Dans cet exemple, cliquer sur le bouton 'Utiliser le modèle' affiche le contenu de la balise <template>.

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

• La balise <slot> agit comme un espace réservé dans un composant web pour afficher le contenu passé par l'élément parent.
  • Si aucun contenu n'est fourni pour un slot, un contenu de secours (le contenu par défaut écrit directement dans la balise <slot>) sera affiché.
• Dans cet exemple, des slots nommés (header et footer) sont définis dans l'élément <template>.
• <my-element> est un élément HTML personnalisé défini par l'utilisateur. L'attribut slot de la balise <p> à l'intérieur de cet élément spécifie le nom du slot et le contenu à insérer dans le slot.

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

• La balise <dialog> est utilisée pour définir des fenêtres interactives telles que des modales ou des pop-ups. Vous pouvez contrôler l'ouverture et la fermeture en utilisant JavaScript.

• Dans cet exemple, cliquer sur le bouton 'Ouvrir la boîte de dialogue' affiche la boîte de dialogue.

Attribut inputmode de la balise <input>

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

• L'attribut inputmode de la balise <input> spécifie le type de clavier virtuel affiché sur les appareils tactiles, améliorant ainsi l'expérience utilisateur. Par exemple, inputmode="tel" affiche un clavier numérique pour la saisie de numéros de téléphone.
• L'attribut inputmode sert uniquement à ajuster l'affichage du clavier virtuel et ne valide pas le contenu saisi. Pour appliquer des restrictions sur les entrées, vous devez utiliser l'attribut type ou une validation JavaScript.
• Étant donné que tous les navigateurs et appareils ne prennent pas entièrement en charge cette fonctionnalité, il est préférable de préparer des solutions de secours appropriées.
• L'attribut inputmode peut prendre les valeurs suivantes. Chaque valeur est utilisée pour afficher un type d'entrée spécifique ou un clavier virtuel.

Attribut theme-color de la balise <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'attribut theme-color de la balise <meta> est utilisé pour personnaliser la couleur de la barre d'adresse et de l'interface utilisateur dans les navigateurs mobiles compatibles.
• Par exemple, il peut alterner entre le mode sombre et le mode clair en utilisant l'attribut media.

Ces balises et attributs sont des avancées d'HTML5 et sont devenus des éléments essentiels dans le développement web moderne. Il est recommandé de vérifier la prise en charge spécifique des navigateurs et leur compatibilité lors de leur utilisation.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video