Aller au contenu

Découvrez « le bon HTML » et économisez du JS et du CSS

Par Gaël Poupard

Conférence (50 mn) :
Langue :
Français
CC
  • Diaporama
  • Le sujet

    Le bon HTML vous fait économiser du JavaScript, du CSS, et est accessible. Alors pourquoi se limiter a du mauvais HTML à base de soupe de <div> et de diarrhée de <section> et tartiner du .preventDefault() sur vos écouteurs d’événements ? Voici quelques pistes pour éclairer le sujet.

    Les formulaires

    • La puissance des type de <button> ;
    • Les attributs de <form> qui vous épargnent des migraines ;
    • Les interactions dans les formulaires : autocomplétion, suggestions, personnalisation du clavier virtuel sur smartphone… en HTML !
    • Navigation au clavier gratuite, à base d’attributs standards depuis 1994 (name, for / id) ;
    • pattern et expressions régulières pour les contraintes sur les champs.

    Simplement évoqués :

    • Les APIs HTML de gestion des données : formData et dataSet, notamment — vive les attributs data-* ;
    • L’API Constraint pour la validation native des formulaires.

    Les interactions riches

    • Mettre une colonne de tableau en avant ;
    • Les éléments HTML modernes : <details> et <summary>, <dialog>, <output>
    • Les attributs HTML modernes : download (import / export json en 5 lignes de JS), contenteditable (pour du live coding, par exemple !), etc.

    Simplement évoqués :

    • Les Web Components : <template> et <slot>, Shadow DOM , registre des éléments personnalisés (CustomElementsRegistry) — oh, et l’attribut is).
    • quelques autres éléments plus ou moins récents et exotiques.

    Les quick-wins performances, simplement évoqué

    • Préchargement avec preload, prefetch, preconnect, etc.
    • Gestion des thread avec defer, async… mais aussi decoding, loading ou priority !
    • Ah, et les nonces pour la sécurité — on parle toujours de HTML ;)

    Présenté par