Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Woop woop assassin de la police - Touraine Tech 2024

lair_net
February 05, 2024
39

Woop woop assassin de la police - Touraine Tech 2024

… 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.

lair_net

February 05, 2024
Tweet

Transcript

  1. 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"; }
  2. 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 }
  3. Problèmes de style Une police d'icône... c'est du texte •

    font-size • letter-spacing • line-height
  4.  Les glyphs peuvent être prononcées par les lecteurs d'écrans

    <i class="fa-solid fa-thumbs-down fa-3x"></i>
  5. 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
  6. 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
  7. 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; }
  8. SVG via une balise img <img alt="Touraine Tech" src="img/logo-tnt.svg"> <img

    alt="" src="fontawesome/local/svgs/solid/thumbs-up.svg">
  9. 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="#2d7a69" d="M313.4 32.9c26 5.2 42.9 30..."/> </svg>
  10. 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
  11. 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
  12. 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
  13. 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; }
  14. 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>
  15. 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"><path }
  16. 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; }
  17. En CSS avec SVG externe, mask-image et des custom properties

    Valider <button class="button-svg-mask__check">Valider</button> :root{ --glyph-check:url('fontawesome/local/svgs/solid/check.svg'); --glyph-cart:url('fontawesome/local/svgs/solid/cart.svg'); --glyph-cancel:url('fontawesome/local/svgs/solid/cancel.svg'); --glyph-circle:url('fontawesome/local/svgs/solid/circle.svg'); (...) } (...) .button-svg-mask__check::before { content: ""; -webkit-mask-image: var(--glyph-check); mask-image: var(--glyph-check); background-color: currentColor; }