Aller au contenu

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

Par Gaël Poupard

Conférence (50 mn) :
Salle :
Salle Capella
Langue :
Français

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 et de diarrhée de 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