Woop woop assassin de la police - Codeurs en Seine 2023

... Woop woop #$%* la police !

Les polices de glyphs sont la solution la plus courante pour intégrer des icônes sur nos sites et nos applications.

Et pourtant cette méthode pose de nombreux problèmes :
- Côté écoconception et performance : souvent des polices de glyph de plusieurs centaines de kilos sont chargées pour n'utiliser qu’un nombre très limité d’icônes.
- Côté accessibilité : si elles sont mal intégrées elles peuvent provoquer des restitutions très surprenantes.
- Côté maintenance et optimisation de code : les polices de glyphs customs peuvent vite devenir un enfer à gérer et à maintenir.

Et si ensemble on #$%*ait la police ?

Durant ce quickie je vous présenterais les différentes méthodes pour gérer vos bibliothèques d’icônes sans police de Glyph en utilisant à la place des SVG de façon optimisée et accessible.

Liens des slides :
Exemples de sprites "Les sprites CSS" d'ALsacréation
https://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Picto Bière
Vincent Le Moign https://fr.m.wikipedia.org/wiki/Fichier:577-beer-mug.svg

Optimisation de SVG
https://jakearchibald.github.io/svgomg/

Transcript

1. Woop woop assassin de la police François-Xavier Lair
2. @lair_net mastodon.top/@lair_net François-Xavier Lair
3. Les polices d'icônes
7. Retour vers le futur
9. Les sprites d'images © Alsacréation
12. Les polices d'icônes • Un seul fichier à charger • Images vectorielles • Changement de taille et de couleur en CSS <span class="thumbs-up"></span> .icon-error:before { content: "\e974"; }
14. Problèmes de style Flash of Unstyled Content (FOUC)
15. Problèmes de style Flash of Unstyled Content (FOUC) @font-face { font-family: 'iconotheque'; src: url('iconotheque.woff2') format('woff2'), font-weight: normal; font-style: normal; font-display:block }
16. Problèmes de style Une police d'icône... c'est du texte • font-size • letter-spacing • line-height
17. Problèmes d'accessibilité
18.  Les glyphs peuvent être prononcées par les lecteurs d'écrans <i class="fa-solid fa-thumbs-down fa-3x"></i>
19. Utilisations de balises syntaxiques incorrectes <i class="fa-solid fa-thumbs-down fa-3x"></i> “L'élément HTML <i> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.” — mdn web docs
20. Fix (icônes de décoration)  <span class="fa-solid fa-star fa-3x" aria-hidden="true"></span>
21. Icônes de décoration  Une offre neutre en CO2  Une offre équilibrée  Un Service client efficace et réactif  Accueil  Favoris  Espace client  Panier
22. Icônes porteuses d'information    
23. Icônes porteuses d'information     <a href="#"> <span class="fa-solid fa-user fa-2x" aria-hidden="true"></span> <span class="visually-hidden">Espace client</span> </a> .visually-hidden{ width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
24. Utilisation incorrecte des ligatures   <a href=""> <span class="material-icons">star</span> </a>
25. Problèmes de poids
26. Material icons setup (Variable font) <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,
27. Material icons setup (Variable font) <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,
28. Inclusion de Font Awesome (Web font)
29. Inclusion de Font Awesome (Web font)
30. Inclusion de Font Awesome (SVG ?)
31. Inclusion de Font Awesome (SVG ?)  Ne vous fiez jamais aux dépendances
34. Material : 3061 icônes Font Awesome : 1390 icônes
35. Problèmes de maintenance Gérer manuellement ses polices de Glyph
41. I  SVG
43. SVG via une balise img <img alt="Codeurs en Seine" src="img/codeurs-en-seine-logo-blanc.svg"> <img alt="" src="fontawesome/local/svgs/solid/thumbs-up.svg">
44. SVG "inline"  Ne pas oublier le aria-hidden="true" et le focusable="false" <svg aria-hidden="true" focusable="false" viewBox="0 0 512 512" > <path fill="#ffffff" d="M313.4 32.9c26 5.2 42.9 30..."/> </svg>
45. SVG "inline" avec des classes <svg aria-hidden="true" focusable="false" x="0" y="0" version="1.1" viewBox="0 0 48 48"> <g id="XMLID_14472_"> <path class="glass--right" d="M34.1 1.2-1.8 1.2...z"/> <path class="glass--left" d="M22.4 1.1-.4 2.1-1..."/> <circle cx="16" cy="26.4" r="1.2" class="buble"/> <circle cx="30.1" cy="23.2" r=".8" class="buble"/> ... </svg> .buble { fill: #ebcb00;} .glass--right { fill: #ffe500;} .glass--left { fill: #fff48c;} © Vincent Le Moign
46. SVG "inline" avec des classes <svg aria-hidden="true" focusable="false" x="0" y="0" version="1.1" viewBox="0 0 48 48"> <g id="XMLID_14472_"> <path class="glass--right" d="M34.1 1.2-1.8 1.2...z"/> <path class="glass--left" d="M22.4 1.1-.4 2.1-1..."/> <circle cx="16" cy="26.4" r="1.2" class="buble"/> <circle cx="30.1" cy="23.2" r=".8" class="buble"/> ... </svg> .buble { fill: #ebcb00;} .glass--right { fill: #ffe500;} .glass--left { fill: #fff48c;} © Vincent Le Moign
47. SVG "inline" avec des classes <svg aria-hidden="true" focusable="false" x="0" y="0" version="1.1" viewBox="0 0 48 48"> <g id="XMLID_14472_"> <path class="glass--right" d="M34.1 1.2-1.8 1.2...z"/> <path class="glass--left" d="M22.4 1.1-.4 2.1-1..."/> <circle cx="16" cy="26.4" r="1.2" class="buble"/> <circle cx="30.1" cy="23.2" r=".8" class="buble"/> ... </svg> .buble { fill: #ebcb00;} .glass--right { fill: #ffe500;} .glass--left { fill: #fff48c;} © Vincent Le Moign
48. SVG "inline" avec currentColor Valider <button class="current-exemple"> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 ... 0z"/> </svg> Valider </button> button:hover { color: darkgreen; } .current-exemple svg { fill: currentColor; }
49. Le retour des sprites
51. SVG Sprite <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="cart-plus" viewBox="0 0 576 512"><path d="M0 24C0 10.7 ..."/></symbol> <symbol id="thumbs-up" viewBox="0 0 512 512"><path d="M313.4 32.9c26..."/></symbol> <symbol id="bong" viewBox="0 0 448 512"><path d="M160 208.5c0 29.1-15.6 ..."/></symbol> ... </svg> <svg aria-hidden="true" focusable="false"> <use fill="#d12714" href="fontawesome/sprites/solid.svg#thumbs-up"></use> </svg>
52. SVG via CSS
53. En CSS avec SVG externe Valider <button class="button-svg-external__check">Valider</button> .button-svg-external__check::before { content: url("/fontawesome/local/svgs/solid/check.svg"); }
54. En CSS avec SVG inline Valider <button class="button-svg-inline__check">Valider</button> .button-svg-inline__check::before { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><pat } .button-svg-inline__check:hover::before { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><pat }
55. En CSS avec SVG externe et mask-image Valider <button class="button-svg-mask__check">Valider</button> .button-svg-mask__check::before { content: ""; -webkit-mask-image: url("fontawesome/local/svgs/solid/check.svg"); mask-image: url("fontawesome/local/svgs/solid/check.svg"); background-color: currentColor; }
57. Avant de se quitter... • N'oubliez pas d'optimiser vos SVG
58. Feedbacks : @lair_net mastodon.top/@lair_net François-Xavier Lair