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)

Geoffrey Crofte

October 19, 2018
Tweet

More Decks by Geoffrey Crofte

Other Decks in Programming

Transcript

  1. La puissance des
    pseudo-éléments

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  14. “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 full-size slide

  15. Utiliser ::before et ::after

    View full-size slide

  16. La syntaxe de base

    View full-size slide

  17. La syntaxe de base

    View full-size slide

  18. La syntaxe de base

    View full-size slide

  19. 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 full-size slide

  20. Before & after what?

    View full-size slide

  21. Before & after what?

    View full-size slide

  22. Before & after what?

    View full-size slide

  23. Before & after what?

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. Dans l’inspecteur

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. “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 full-size slide

  30. Les valeurs de content

    div::before {
    content: 'Plop';
    }
    div::before {
    content: '';
    }
    div::before {
    content: '\f0ac';
    }
    Plop

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    display: inline-block;
    }

    View full-size slide

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

    display: inline-block;
    }

    View full-size slide

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

    display: inline-flex;
    }

    View full-size slide

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

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

    View full-size slide

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

    display: inline-block;

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Vous les utilisez déjà…

    View full-size slide


  41. […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 full-size slide


  42. […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 full-size slide

  43. 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 full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

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

    View full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. Solutions possibles

    View full-size slide

  50. Download !
    bit.ly/devfestZIP

    View full-size slide

  51. 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 full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

  60. Allons plus loin

    View full-size slide

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

    View full-size slide

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

    / 'Bruce Lee in action';
    }

    View full-size slide

  63. “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 full-size slide

  64. 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 full-size slide

  65. mix-blend-mode magic!

    View full-size slide

  66. una.im/CSSgram

    View full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. 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 full-size slide

  70. 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 full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

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

    View full-size slide

  74. 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 full-size slide

  75. 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 full-size slide

  76. 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 full-size slide

  77. 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 full-size slide

  78. 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 full-size slide

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

    View full-size slide

  80. Styled broken image
    img::before {

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

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

    View full-size slide

  81. 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 full-size slide

  82. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  91. 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 full-size slide

  92. 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 full-size slide

  93. 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 full-size slide

  94. 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 full-size slide

  95. ::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 full-size slide

  96. “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 full-size slide

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

    View full-size slide

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

    View full-size slide