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
   

   View Slide

2. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
   Geoffrey Crofte
   @geoffrey_crofte
   geoffrey.crofte.fr
   creativejuiz.fr
   UX/UI WebDesigner – Maltem Consulting
   

   View Slide

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 ?
   

   View Slide

4. Que sont ces pseudo-éléments ?
   

   View Slide

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 ?
   

   View Slide

6. Pseudo-classes
   Lorem ipsum
   Lorem ipsum
   p:first-child {
   font-weight: bold;
   }
   Lorem ipsum
   Lorem ipsum
   p.first {
   font-weight: bold;
   }
   

   View Slide

7. Pseudo-éléments
   Lorem ipsum dolor sit amet,

   consectetur adipisicing elit.

   Nulla, eligendi.
   p::first-letter {
   font-weight: bold;
   }
   p span {
   font-weight: bold;
   }
   Lorem ipsum
   dolor sit amen, consectetur
   adipisicing elit. Nulla,
   eligendi.
   

   View Slide

8. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
   Lesquels ?
   ::before
   ::after
   

   View Slide

9. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
   Je ne parlerai pas de :
   ::first-letter
   ::first-line
   ::selection
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Pourquoi parler des pseudo-éléments ?
    

    View Slide

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 ?
    

    View Slide

14. View Slide

15. View Slide

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
    

    View Slide

17. Utiliser ::before et ::after
    

    View Slide

18. La syntaxe de base
    

    View Slide

19. La syntaxe de base
    

    View Slide

20. La syntaxe de base
    

    View Slide

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
    

    View Slide

22. Before & after what?
    

    View Slide

23. Before & after what?
    

    View Slide

24. Before & after what?
    

    View Slide

25. Before & after what?
    

    View Slide

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.
    

    View Slide

27. In da content-box
    Voici mon super contenu
    p::before {
    content: 'BEFORE';
    }
    p::after {
    content: 'AFTER';
    }
    BEFORELorem ipsum dolor sitAFTER
    

    View Slide

28. Dans l’inspecteur
    

    View Slide

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.
    

    View Slide

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 , malgré leur définition
    d’éléments non-remplacés (widgets)

    ne supportent pas les pseudo-éléments.
    

    

    

    

    

    

    

    

    

    ()
    Source MDN
    

    View Slide

31. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
    Quelques valeurs de content
    none
    normal
    Reset
    
    url()
    attr()
    counter([, ])<br/>Utilitaire<br/>open-quote<br/>close-quote<br/>no-open-quote<br/>no-close-quote<br/>Citation<br/>

    View Slide

32. Les valeurs de content
    
    div::before {
    content: 'Plop';
    }
    div::before {
    content: '';
    }
    div::before {
    content: '\f0ac';
    }
    Plop
    

    View Slide

33. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
    Les valeurs de content
    url()
    .bruce::before {
    content: url(../images/lee.png);
    }
    

    View Slide

34. L’élément
    La hauteur du pseudo
    élément.
    

    View Slide

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

    display: inline-block;
    }
    

    View Slide

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

    display: inline-block;
    }
    

    View Slide

37. .bruce::before {
    content: url(../images/lee.png);
    width: 30px;
    height: 30px;

    display: inline-flex;
    }
    

    View Slide

38. .bruce::before {
    content: url(../images/lee.png);
    width: 30px;
    height: 30px;

    display: inline-flex;
    } BUG ?
    BUG ?
    BUG ?
    

    View Slide

39. .bruce::before {
    content: '';

    display: inline-block;

    background: url(../images/lee.png);

    background-size: contain;
    width: 30px;
    height: 30px;
    }
    

    View Slide

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

    View Slide

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

    View Slide

42. Vous les utilisez déjà…
    

    View Slide

43. 

    […floating stuff…]

    
    
    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 vide,

    la technique a été revue à l’aide

    d’une simple classe.
    

    View Slide

44. 

    […floating stuff…]

    
    
    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 vide,

    la technique a été revue à l’aide

    d’une simple classe.
    

    […floating stuff…]

    
    

    View Slide

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 vide précédente.
    .clearfix::after {
    content: '';
    display: block;
    clear: both;
    }
    

    View Slide

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 vide précédente.
    

    […floating…]

    ::after
    
    .clearfix::after {
    content: '';
    display: block;
    clear: both;
    }
    

    View Slide

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
    
    

    View Slide

48. À vous de jouer !
    bit.ly/devfestZIP
    

    View Slide

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
    

    View Slide

50. Exemple d’exercice
    Reproduire la forme ci-contre dans le volet
    blanc sans ajouter d’élément HTML

    dans cette vide.
    Pensez à décomposer cette forme en formes
    plus simples.
    bit.ly/devfestZIP
    

    View Slide

51. Solutions possibles
    

    View Slide

52. Download !
    bit.ly/devfestZIP
    

    View Slide

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
    

    View Slide

54. Solution
    

    View Slide

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
    

    View Slide

56. Solution
    

    View Slide

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
    

    View Slide

58. Solution
    

    View Slide

59. Pour le fun
    

    View Slide

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
    

    View Slide

61. Solution
    

    View Slide

62. Solution
    

    View Slide

63. Solution
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. Solution
    

    View Slide

67. Solution
    

    View Slide

68. Solution
    

    View Slide

69. View Slide

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
    

    View Slide

71. Solution
    

    View Slide

72. Solution
    

    View Slide

73. Solution
    

    View Slide

74. Solution
    

    View Slide

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
    

    View Slide

76. Solution
    

    View Slide

77. Solution
    

    View Slide

78. Solution
    

    View Slide

79. Solution
    

    View Slide

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
    

    View Slide

81. Solution
    

    View Slide

82. Solution
    

    View Slide

83. Solution
    

    View Slide

84. View Slide

85. Allons plus loin
    

    View Slide

86. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
    Les valeurs de content
    url()
    .bruce::before {
    content: url(../images/lee.png);
    }
    

    View Slide

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

    / 'Bruce Lee in action';
    }
    

    View Slide

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';
    }
    

    View Slide

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
    

    View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. mix-blend-mode magic!
    

    View Slide

96. una.im/CSSgram
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
     

     View Slide

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.
     

     View Slide

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
     

     View Slide

103. Animer le contour d’un bouton ne demande
     pas nécessairement d’aller travailler
     une animation SVG.
     Demo
     Snake Button
     bit.ly/snakebutton
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

109. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
     Un pseudo-élément ::before
     Sur une image
     

     View Slide

110. Styled broken image
     img::before {

     content: 'Arf, can’t load';
     }
     img::after {

     content: "\f1c5" " " attr(alt);
     }
     

     View Slide

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
     

     View Slide

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
     

     View Slide

113. Source : Can I use
     Support : Pseudo-éléments 95,93%
     Global users
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

119. Source : Can I use
     Support : CSS element() function 5,08%
     Global users
     

     View Slide

120. Source : Accessibility support for CSS generated content
     Accessibilité : Support
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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 ?
     

     View Slide

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
     

     View Slide

127. N’hésitez pas je ne mords pas.
     Merci ! Des Questions ?
     

     View Slide

128. “Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
     Geoffrey Crofte
     UX/UI WebDesigner – Maltem Consulting
     @geoffrey_crofte
     geoffrey.crofte.fr
     creativejuiz.fr
     

     View Slide