Slide 1
Slide 1 text
La puissance des
pseudo-éléments
Slide 2
Slide 2 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Geoffrey Crofte
@geoffrey_crofte
geoffrey.crofte.fr
creativejuiz.fr
UX/UI WebDesigner – Maltem Consulting
Slide 3
Slide 3 text
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 ?
Slide 4
Slide 4 text
Que sont ces pseudo-éléments ?
Slide 5
Slide 5 text
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 ?
Slide 6
Slide 6 text
Pseudo-classes
Lorem ipsum
Lorem ipsum
p:first-child { font-weight: bold; }Lorem ipsum
Lorem ipsum
p.first { font-weight: bold; }Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Lesquels ?
::before
::after
Slide 9
Slide 9 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Je ne parlerai pas de :
::first-letter
::first-line
::selection
Slide 10
Slide 10 text
“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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Pourquoi parler des pseudo-éléments ?
Slide 13
Slide 13 text
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 ?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
“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
Slide 17
Slide 17 text
Utiliser ::before et ::after
Slide 18
Slide 18 text
La syntaxe de base
Slide 19
Slide 19 text
La syntaxe de base
Slide 20
Slide 20 text
La syntaxe de base
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Before & after what?
Slide 23
Slide 23 text
Before & after what?
Slide 24
Slide 24 text
Before & after what?
Slide 25
Slide 25 text
Before & after what?
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
In da content-box
Voici mon super contenu
p::before { content: 'BEFORE'; } p::after { content: 'AFTER'; } BEFORELorem ipsum dolor sitAFTERSlide 28
Slide 28 text
Dans l’inspecteur
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Quelques valeurs de content
none
normal
Reset
url()
attr()
counter([, ])
Utilitaire
open-quote
close-quote
no-open-quote
no-close-quote
Citation
Slide 32
Slide 32 text
Les valeurs de content
div::before {
content: 'Plop';
}
div::before {
content: '';
}
div::before {
content: '\f0ac';
}
Plop
Slide 33
Slide 33 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Les valeurs de content
url()
.bruce::before {
content: url(../images/lee.png);
}
Slide 34
Slide 34 text
L’élément
La hauteur du pseudo
élément.
Slide 35
Slide 35 text
.bruce::before {
content: url([…]);
width: 30px;
height: 30px;
display: inline-block;
}
Slide 36
Slide 36 text
L’élément
Le pseudo-élément
dimensionné
.bruce::before {
content: url([…]);
width: 30px;
height: 30px;
display: inline-block;
}
Slide 37
Slide 37 text
.bruce::before {
content: url(../images/lee.png);
width: 30px;
height: 30px;
display: inline-flex;
}
Slide 38
Slide 38 text
.bruce::before {
content: url(../images/lee.png);
width: 30px;
height: 30px;
display: inline-flex;
} BUG ?
BUG ?
BUG ?
Slide 39
Slide 39 text
.bruce::before {
content: '';
display: inline-block;
background: url(../images/lee.png);
background-size: contain;
width: 30px;
height: 30px;
}
Slide 40
Slide 40 text
Les valeurs de content
attr()
a[hreflang]::after {
content: '(' attr(hreflang) ')';
}
Slide 41
Slide 41 text
Les valeurs de content
counter()
ol > li::before {
counter-increment: myList;
content: counter(myList) " – ";
}
Slide 42
Slide 42 text
Vous les utilisez déjà…
Slide 43
Slide 43 text
[…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.
Slide 44
Slide 44 text
[…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…]
Slide 45
Slide 45 text
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;
}
Slide 46
Slide 46 text
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;
}
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
À vous de jouer !
bit.ly/devfestZIP
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
Solutions possibles
Slide 52
Slide 52 text
Download !
bit.ly/devfestZIP
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
Solution
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
Solution
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
Solution
Slide 59
Slide 59 text
Pour le fun
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
Solution
Slide 62
Slide 62 text
Solution
Slide 63
Slide 63 text
Solution
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
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
Slide 66
Slide 66 text
Solution
Slide 67
Slide 67 text
Solution
Slide 68
Slide 68 text
Solution
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
Solution
Slide 72
Slide 72 text
Solution
Slide 73
Slide 73 text
Solution
Slide 74
Slide 74 text
Solution
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
Solution
Slide 77
Slide 77 text
Solution
Slide 78
Slide 78 text
Solution
Slide 79
Slide 79 text
Solution
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
Solution
Slide 82
Slide 82 text
Solution
Slide 83
Slide 83 text
Solution
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Allons plus loin
Slide 86
Slide 86 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Les valeurs de content
url()
.bruce::before {
content: url(../images/lee.png);
}
Slide 87
Slide 87 text
Les valeurs de content
url()
.bruce::before {
content: url(../images/lee.mov)
/ 'Bruce Lee in action';
}
Slide 88
Slide 88 text
“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';
}
Slide 89
Slide 89 text
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
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
mix-blend-mode magic!
Slide 96
Slide 96 text
una.im/CSSgram
Slide 97
Slide 97 text
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
Slide 98
Slide 98 text
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.
Slide 99
Slide 99 text
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.
Slide 100
Slide 100 text
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.
Slide 101
Slide 101 text
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.
Slide 102
Slide 102 text
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
Slide 103
Slide 103 text
Animer le contour d’un bouton ne demande
pas nécessairement d’aller travailler
une animation SVG.
Demo
Snake Button
bit.ly/snakebutton
Slide 104
Slide 104 text
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
Slide 105
Slide 105 text
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
Slide 106
Slide 106 text
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
Slide 107
Slide 107 text
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
Slide 108
Slide 108 text
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
Slide 109
Slide 109 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Un pseudo-élément ::before
Sur une image
Slide 110
Slide 110 text
Styled broken image
img::before {
content: 'Arf, can’t load';
}
img::after {
content: "\f1c5" " " attr(alt);
}
Slide 111
Slide 111 text
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
Slide 112
Slide 112 text
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
Slide 113
Slide 113 text
Source : Can I use
Support : Pseudo-éléments 95,93%
Global users
Slide 114
Slide 114 text
Source : Can I use
Support : Transitions 93,39%
Global users
Slide 115
Slide 115 text
Source : Can I use
Support : Blend-mode 86,97%
Global users
Slide 116
Slide 116 text
Source : Can I use
Support : Filter 90,09%
Global users
Slide 117
Slide 117 text
Source : Can I use
Support : Pointer Events 69,9%
Global users
Slide 118
Slide 118 text
Source : Can I use
Support : Clip-path() 88,09%
Global users
Slide 119
Slide 119 text
Source : Can I use
Support : CSS element() function 5,08%
Global users
Slide 120
Slide 120 text
Source : Accessibility support for CSS generated content
Accessibilité : Support
Slide 121
Slide 121 text
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
Slide 122
Slide 122 text
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
Slide 123
Slide 123 text
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
Slide 124
Slide 124 text
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
Slide 125
Slide 125 text
::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 ?
Slide 126
Slide 126 text
“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
Slide 127
Slide 127 text
N’hésitez pas je ne mords pas.
Merci ! Des Questions ?
Slide 128
Slide 128 text
“Les pseudo-éléments” — @geoffrey_crofte DEVFEST Nantes 2018
Geoffrey Crofte
UX/UI WebDesigner – Maltem Consulting
@geoffrey_crofte
geoffrey.crofte.fr
creativejuiz.fr