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)

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 ?
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
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
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
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