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

La puissance des pseudo-éléments

La puissance des pseudo-éléments

Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.

L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.

Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !

Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)

5b6a2bd86ef643786a381a212e0ef2f1?s=128

Geoffrey Crofte

October 19, 2018
Tweet

Transcript

  1. La puissance des pseudo-éléments

  2. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Geoffrey Crofte @geoffrey_crofte

    geoffrey.crofte.fr creativejuiz.fr UX/UI WebDesigner – Maltem Consulting
  3. Tour d’horizon Que sont-ils ?
 Pourquoi parler des pseudos-éléments ?


    Comment les utiliser ?
 Un peu de pratique (oui, vous allez bosser)
 Et si on allait plus loin ?
  4. Que sont ces pseudo-éléments ?

  5. Les pseudo-éléments sont souvent confondus avec les pseudo-classes. Un pseudo-élément

    pourrait être remplacé par un élément HTML dans votre code.
 Une pseudo-classe est un élément
 qui permet de distinguer des éléments
 déjà présents dans le DOM. Pseudo-quoi ?
  6. Pseudo-classes <p>Lorem ipsum</p> <p>Lorem ipsum</p> p:first-child { font-weight: bold; }

    <p class="first">Lorem ipsum</p> <p>Lorem ipsum</p> p.first { font-weight: bold; }
  7. Pseudo-éléments <p>Lorem ipsum dolor sit amet,
 consectetur adipisicing elit.
 Nulla,

    eligendi.</p> p::first-letter { font-weight: bold; } p span { font-weight: bold; } <p><span>L</span>orem ipsum dolor sit amen, consectetur adipisicing elit. Nulla, eligendi.</p>
  8. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Lesquels ? ::before

    ::after
  9. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Je ne parlerai

    pas de : ::first-letter ::first-line ::selection
  10. “Generated Content”
 Demande au User-Agent de générer
 un contenu non

    présent dans le DOM.
 “Tree-Abiding Pseudo Elements”,
 ils respectent la structure existante
 du DOM. Définition
  11. Un contenu est généré avant ou après
 le contenu de

    l’élément ciblé.
 Vous pouvez manipuler ce contenu
 avec autant de CSS que vous le souhaitez.
 Exemple de la liste ordonnée ou
 non-ordonnée. Principe
  12. Pourquoi parler des pseudo-éléments ?

  13. Ils datent de 2003, en CR depuis 2011,
 soit CSS

    2.1.
 Ils sont finalement très peu utilisés.
 Quand ils le sont, ils le sont mécaniquement.
 Les bases de CSS sont parfois méconnues,
 et on les oublie rapidement. Oui… pourquoi ?
  14. None
  15. None
  16. “Don’t forget that old CSS
 still exists and is useful.


    You don’t need to use something fancy for every effect.” — Rachel Andrew Front-End Conference Zurich - 30, 31 Aug. 2018
  17. Utiliser ::before et ::after

  18. La syntaxe de base

  19. La syntaxe de base

  20. La syntaxe de base

  21. En CSS2.1 la première syntaxe des
 pseudo-éléments était identique
 aux

    pseudo-classes (un unique “ : ” )
 Si vous n’avez pas besoin de supporter IE8, utilisez les “ : : ”
 Les navigateurs modernes supportent
 les deux syntaxes. Bon à savoir
  22. Before & after what?

  23. Before & after what?

  24. Before & after what?

  25. Before & after what?

  26. Before & after what? ::before ::after Avant et après le

    contenu d’un élément, dans la content-box, peu importe le nombre d’enfant y figurant.
  27. In da content-box <p>Voici mon super contenu</p> p::before { content:

    'BEFORE'; } p::after { content: 'AFTER'; } BEFORELorem ipsum dolor sitAFTER
  28. Dans l’inspecteur

  29. Dans l’inspecteur La content-box est en bleu
 La margin-box est

    en jaune
 On voit clairement l’affichage (simulé) dans
 le DOM pour aider au debug du CSS avant
 et après le contenu du paragraphe.
  30. Attention aux éléments remplacés Les pseudo-éléments ne s’appliquent pas aux

    éléments remplacés listés ci-contre. Les <input>, malgré leur définition d’éléments non-remplacés (widgets)
 ne supportent pas les pseudo-éléments. <img>
 <iframe>
 <video>
 <embed>
 <audio>
 <option>
 <canvas>
 <object>
 <applet>
 (<input>) Source MDN
  31. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Quelques valeurs de

    content none normal Reset <string> url() attr(<attr-name>) counter(<name>[, <style>]) Utilitaire open-quote close-quote no-open-quote no-close-quote Citation
  32. Les valeurs de content <string> div::before { content: 'Plop'; }

    div::before { content: ''; } div::before { content: '\f0ac'; } Plop
  33. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Les valeurs de

    content url() .bruce::before { content: url(../images/lee.png); }
  34. L’élément La hauteur du pseudo élément.

  35. .bruce::before { content: url([…]); width: 30px; height: 30px;
 display: inline-block;

    }
  36. L’élément Le pseudo-élément dimensionné .bruce::before { content: url([…]); width: 30px;

    height: 30px;
 display: inline-block; }
  37. .bruce::before { content: url(../images/lee.png); width: 30px; height: 30px;
 display: inline-flex;

    }
  38. .bruce::before { content: url(../images/lee.png); width: 30px; height: 30px;
 display: inline-flex;

    } BUG ? BUG ? BUG ?
  39. .bruce::before { content: '';
 display: inline-block;
 background: url(../images/lee.png);
 background-size: contain;

    width: 30px; height: 30px; }
  40. Les valeurs de content attr() a[hreflang]::after { content: '(' attr(hreflang)

    ')'; }
  41. Les valeurs de content counter() ol > li::before { counter-increment:

    myList; content: counter(myList) " – "; }
  42. Vous les utilisez déjà…

  43. <div class="component">
 […floating stuff…]
 <div class="clear"></div> </div> Clearfix Une technique

    bien connue qui consiste
 à rétablir le flux naturel d’un document
 après un jeu de flottants. D’abord construite avec un <div> vide,
 la technique a été revue à l’aide
 d’une simple classe.
  44. <div class="component">
 […floating stuff…]
 <div class="clear"></div> </div> Clearfix Une technique

    bien connue qui consiste
 à rétablir le flux naturel d’un document
 après un jeu de flottants. D’abord construite avec un <div> vide,
 la technique a été revue à l’aide
 d’une simple classe. <div class="component clearfix">
 […floating stuff…]
 </div>
  45. Clearfix Ajout d’un pseudo-élément en fin de conteneur afin de

    rétablir le flux naturel du document. Le pseudo-element a le même rôle
 que notre <div> vide précédente. .clearfix::after { content: ''; display: block; clear: both; }
  46. Clearfix Ajout d’un pseudo-élément en fin de conteneur afin de

    rétablir le flux naturel du document. Le pseudo-element a le même rôle
 que notre <div> vide précédente. <div class="component clearfix">
 […floating…]
 ::after </div> .clearfix::after { content: ''; display: block; clear: both; }
  47. Font-icon L’élément HTML vide inséré permet de générer une icône

    grâce à un jeu de font-icon
 et de contenu généré. La technique de base est naturellement perfectible : on pourrait se contenter
 d’une simple classe au lieu d’ajouter
 un élément <i> <i class="fa fa-check"></i>
  48. À vous de jouer ! bit.ly/devfestZIP

  49. Comment jouer… Les instructions seront de ce côté.
 Vous pouvez

    réfléchir à une solution avec
 une feuille et un stylo, ou composer
 votre code directement sur votre ordinateur. Ce qu’il y a à reproduire de ce côté. bit.ly/devfestZIP
  50. Exemple d’exercice Reproduire la forme ci-contre dans le volet blanc

    sans ajouter d’élément HTML
 dans cette <div> vide. Pensez à décomposer cette forme en formes plus simples. bit.ly/devfestZIP
  51. Solutions possibles

  52. Download ! bit.ly/devfestZIP

  53. Liens visibles en print Pour l’un de vos projets vous

    prévoyez
 la possibilité d’imprimer certaines
 de vos pages. Vous avez des liens dans vos pages imprimables. Utilisez les pseudo-éléments pour afficher les URLs en cas d’impression. http://bit.ly/devfestprint Exercice
  54. Solution

  55. Extension de fichier Une des pages de votre site propose


    un répertoire de document Word, PDF et liens externes. Proposez un code CSS permettant
 de les distinguer. http://bit.ly/devfestext Exercice
  56. Solution

  57. Numérotation de titres Vous êtes dans un document contenant un

    texte long et structuré, comme un texte de thèse ou un livre. Utilisez les pseudo-éléments pour ajouter la numérotation. http://bit.ly/devfestcounter Exercice
  58. Solution

  59. Pour le fun

  60. Nested links Vous souhaitez rendre vos cartes article cliquables dans

    leur entièreté, mais celles-ci possèdent également des liens vers l’auteur et la catégorie que vous souhaitez conserver cliquables. Go ! http://bit.ly/devfestnested Exercice
  61. Solution

  62. Solution

  63. Solution

  64. Zone de touch Dans le Design System que nous construisons

    à destination des front-end developers, nous avons décidé de proposer des zones de touch plus grandes que l’aspect visible du bouton. Le support est plutôt bon sur android et iOS également. http://bit.ly/toucharea
  65. Effet pile de papier L’effet fun à l’ère du flat

    et Material.
 Il est utilisé dans certaines applications pour représenter une pile d’éléments ou lors d’un Drag & Drop d’un ensemble d’items. Reproduisez-le avec des pseudo-éléments. http://bit.ly/devfeststack Exercice
  66. Solution

  67. Solution

  68. Solution

  69. None
  70. Burger icon Pour la version mobile de votre menu, vous

    souhaitez créer une burger icon animée en CSS. Tentez de le faire avec un seul élément span et des pseudo-éléments. http://bit.ly/devfestburger Exercice
  71. Solution

  72. Solution

  73. Solution

  74. Solution

  75. Des boutons radio Créez des boutons radio personnalisés grâce aux

    pseudo-éléments et à quelques astuces de positionnement. Qui n’a jamais rêvé de pouvoir personnaliser ces éléments avec CSS ? ! http://bit.ly/devfestradio Exercice
  76. Solution

  77. Solution

  78. Solution

  79. Solution

  80. Fratured Text Effect Reproduisez l’effet texte fracturé ci-contre en utilisant

    les pseudo-éléments et quelques effets de transformation. Code inspiré du travail de Mandy Michael. http://bit.ly/devfestfracture Exercice
  81. Solution

  82. Solution

  83. Solution

  84. None
  85. Allons plus loin

  86. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Les valeurs de

    content url() .bruce::before { content: url(../images/lee.png); }
  87. Les valeurs de content url() .bruce::before { content: url(../images/lee.mov)
 /

    'Bruce Lee in action'; }
  88. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Les valeurs de

    content Fallback .bruce::before { content: url(../images/lee.mov),
 url(../images/lee.png),
 'Chuck Norris'; }
  89. Demo : Filtres photo Des filtres CSS appliqués sur une

    photo permettent de lui redonner un peu de vibrance, contraste et couleurs. Un effet de halo/lumière est donnée grâce à un pseudo-élément. http://bit.ly/filterCSS
  90. None
  91. None
  92. None
  93. None
  94. None
  95. mix-blend-mode magic!

  96. una.im/CSSgram

  97. Demo : Casser la grille Sur un projet où le

    code HTML était intouchable et où la logique de grille était en flexbox, le re-design proposait un premier élément distinct alors inclus dans la grille sur le design précédent. Un pseudo-élément et c’était fait. http://bit.ly/flexgridbreak
  98. Demo : Casser la grille http://bit.ly/flexgridbreak order -1 Sur un

    projet où le code HTML était intouchable et où la logique de grille était en flexbox, le re-design proposait un premier élément distinct alors inclus dans la grille sur le design précédent. Un pseudo-élément et c’était fait.
  99. Demo : Casser la grille http://bit.ly/flexgridbreak order -1 ::before Sur

    un projet où le code HTML était intouchable et où la logique de grille était en flexbox, le re-design proposait un premier élément distinct alors inclus dans la grille sur le design précédent. Un pseudo-élément et c’était fait.
  100. Demo : Casser la grille http://bit.ly/flexgridbreak Sur un projet où

    le code HTML était intouchable et où la logique de grille était en flexbox, le re-design proposait un premier élément distinct alors inclus dans la grille sur le design précédent. Un pseudo-élément et c’était fait.
  101. Demo : Casser la grille http://bit.ly/flexgridbreak Sur un projet où

    le code HTML était intouchable et où la logique de grille était en flexbox, le re-design proposait un premier élément distinct alors inclus dans la grille sur le design précédent. Un pseudo-élément et c’était fait.
  102. Vous pouvez utiliser les pseudo-éléments pour créer des drop-shadow avancés

    et donner du relief à vos cards de manière originale. Demo Advanced Shadows bit.ly/CSSshadows
  103. Animer le contour d’un bouton ne demande pas nécessairement d’aller

    travailler une animation SVG. Demo Snake Button bit.ly/snakebutton
  104. Demo Animated icon Une fois décomposée en éléments simples, une

    icône peut facilement être animée avec quelques pseudo-éléments. bit.ly/scrollicon
  105. Demo Image-link Caption Pour la refonte du site de Stéphanie

    Walter (yup, je la connais ! ) l’animation des images de projets est composée de pseudo-éléments. StephanieWalter.design
  106. Demo Mobile Menu Toujours pour ce même site web, le

    même menu de navigation prend une toute autre forme sur terminaux mobiles. Effet de diagonale et burger menu déstructurés sont conçus avec des pseudo-éléments. bit.ly/slowmomenu
  107. Demo Lightbox CSS Only Pour le fun j’ai reproduit une

    Lightbox il y a quelques années avec des pseudo-éléments et la fonction CSS element(). bit.ly/lightboxCSSonly
  108. Demo Fractured Text Une démo de Mandy Michael qui reprend

    l’idée de fracture dans le texte
 à l’aide de clip-path: polygon(); bit.ly/fracturedtext
  109. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Un pseudo-élément ::before

    Sur une image
  110. Styled broken image img::before {
 content: 'Arf, can’t load'; }

    img::after {
 content: "\f1c5" " " attr(alt); }
  111. Source : Styling Broken Images * alt affiché uniquement si

    les
 dimensions de l’image le permet.
 
 ** propriété de font-styling pas
 appliquées. Compatibilité : broken image
  112. Contrôle fin Ils permettent de créer des exceptions dans une

    structure. Forme et fond Ils permettent aussi de créer des éléments purement visuels. Responsive Adapter un contenu ou style dépendamment du média ciblé. Generated Content Ajouter du contenu non présent dans le DOM. Avantage à utiliser des pseudo-éléments
  113. Source : Can I use Support : Pseudo-éléments 95,93% Global

    users
  114. Source : Can I use Support : Transitions 93,39% Global

    users
  115. Source : Can I use Support : Blend-mode 86,97% Global

    users
  116. Source : Can I use Support : Filter 90,09% Global

    users
  117. Source : Can I use Support : Pointer Events 69,9%

    Global users
  118. Source : Can I use Support : Clip-path() 88,09% Global

    users
  119. Source : Can I use Support : CSS element() function

    5,08% Global users
  120. Source : Accessibility support for CSS generated content Accessibilité :

    Support
  121. target-counter() 
 Permet de générer un compteur dépendant d’un élément

    ciblé
 dans le document. D’autres valeurs de content Nous en parlerons page 23 DRAFT
  122. target-text() 
 Permet de générer un contenu textuel issu d’un

    élément ciblé
 dans le document. D’autres valeurs de content Nous en parlerons 
 au chapitre “Variables CSS” DRAFT
  123. leaders() 
 Permet de créer un pattern répétitif utilisé pour

    connecter visuellement du contenu. D’autres valeurs de content Chapitre 1 ………… page 3
 Chapitre 2 ………… page 4
 Chapitre 3 ………… page 12 DRAFT
  124. content() 
 Permet de générer un contenu équivalent au contenu

    renseigné
 en paramètre parmi les options suivantes : text, before, after, first-letter, marker. D’autres valeurs de content DRAFT
  125. ::inactive-selection – un contenu sélectionné qui n’a plus le focus.

    ::spelling-error – du texte marqué par le user-agent comme mal orthographié. ::grammar-error – du texte marquée par le user-agent comme grammaticalement incorrect. Highlight Pseudo-elements ::marker – l’élément devant un item de liste. ::placeholder – le contenu textuel temporaire servant d’aide au remplissage d’un champ. Tree-Abiding Pseudo-elements D’autres pseudo-éléments ?
  126. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 CSS3 Content —

    définition du W3C. CSS3 Content — définition et exemples du MDN. Replaced Elements – définition du MDN. A11y support for generated content. Styling Broken Images Mandy Michael – son compte twitter. Rachel Andrew – son compte site web. Quelques ressources
  127. N’hésitez pas je ne mords pas. Merci ! Des Questions

    ?
  128. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018 Geoffrey Crofte UX/UI

    WebDesigner – Maltem Consulting @geoffrey_crofte geoffrey.crofte.fr creativejuiz.fr