Slide 1
Slide 1 text
LES PETITES
AVENTURES DE CSS,
SAISON 2025
AKA "GAMECHANGING CSS"
raphaël goetter
Slide 2
Slide 2 text
HELLO !
JE SUIS RAPHAËL ET J'AIME CSS
raphaël goetter
Slide 3
Slide 3 text
CSS 1 finalisé
(50 propriétés)
1996
1998
CSS 2 finalisé
CSS 3
🤯
(1ère propriété)
1999
CSS "living standard"
2012
2007
CSS 2.1 finalisé
2025
~650 propriétés en CSS
Google
Chrome 1
Internet
Explorer 6
Microsoft
Edge
Mozilla
Firefox 1
Slide 4
Slide 4 text
https://caniuse.com/
SUPPORT NAVIGATEURS
Slide 5
Slide 5 text
CSS != SCSS
Slide 6
Slide 6 text
INTERLUDE
QUIZ WEB ET CSS
Slide 7
Slide 7 text
QUE SIGNIFIE VRAIMENT "CSS" ?
Cascading Style Sheets
Completely Shitty Selectors
C'est Super Simple !
Centering Stuffs Simply
Choucroute et Saucisses de Strasbourg
1
Slide 8
Slide 8 text
COMMENT RÉDIGER UN
COMMENTAIRE EN CSS ?
{{ ceci est un commentaire }}
/# ceci est un commentaire #/
/* ceci est un commentaire */
// ceci est un commentaire
2
Slide 9
Slide 9 text
QUI EST TIM BERNERS-LEE ?
L'inventeur des Gifs animés
L'inventeur du Web
L'inventeur de CSS
L'inventeur des memes
Le frère de Bruce (déso)
3
Slide 10
Slide 10 text
QU'EST-CE DONC QUE CECI ?
Un extrait de la documentation du framework Tailwind
Une suite de caractères aléatoires
Un listing en langage Basic comme au bon vieux temps
Une incantation satanique ancestrale
Laissez-moi partir, par pitié !
4
1
Slide 11
Slide 11 text
COMBIEN DE LIGNES DE CSS FAUT-IL POUR
CENTRER VERTICALEMENT UN ÉLÉMENT ?
Une bonne dizaine
J'ai arrêté de compter
Deux ou trois maximum
Toi, tu veux avoir des ennuis
On ne peut pas centrer verticalement en CSS
5
Slide 12
Slide 12 text
FONDAMENTAUX
variables
nesting
@supports
display: contents
:has
Slide 13
Slide 13 text
VARIABLES CSS
Leur vrai nom : "Custom Properties"
support
:root {
--color-text: hotpink;
--spacing-md: 12px;
}
/* Button component */
.button {
color: var(--color-text);
padding: var(--spacing-md);
}
Ici nous déclarons les variables dans :root
(= tout le document) et les associons à une
valeur.
Ces variables sont appliquées sur ce bouton à
l'aide de var().
Les "variables" CSS (custom properties) sont des propriétés
personnalisables, manipulables et réutilisables.
Slide 14
Slide 14 text
VARIABLES CSS
Leur vrai nom : "Custom Properties"
support
CAS D'USAGES CLASSIQUES ? .card {
--gap: 16px;
display: grid;
gap: var(--gap);
}
@media (min-width: 576px) {
.card {
--gap: 32px;
}
}
modifier des gouttières
selon la place dispo
:root {
--color-text: black;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: white;
}
}
.component {
color: var(--color-text);
}
modifier des couleurs
selon les prefs utilisateur
Slide 15
Slide 15 text
.link {
display: flex;
flex-wrap: wrap;
}
.link:hover, .link:focus {
color: hotpink;
}
@media (min-width: 576px) {
.link {
flex-direction: column;
}
}
.link > * {
margin-left: 1rem;
}
sans nesting
La syntaxe "classique" de CSS engendre fréquemment des
répétitions de sélecteurs qui compliquent la maintenabilité du
projet dans la durée.
NESTING
Imbrication de sélecteurs CSS
support
La syntaxe imbriquée (nesting) rassemble les règles CSS dans
un seul sélecteur et évite un grand nombre de répétitions
inutiles.
Slide 16
Slide 16 text
.link {
display: flex;
flex-wrap: wrap;
}
.link:hover, .link:focus {
color: hotpink;
}
@media (min-width: 576px) {
.link {
flex-direction: column;
}
}
.link > * {
margin-left: 1rem;
}
sans nesting
NESTING
Imbrication de sélecteurs CSS
support
.link {
display: flex;
flex-wrap: wrap;
&:hover, &:focus {
color: hotpink;
}
@media (min-width: 576px) {
flex-direction: column;
}
& > * {
margin-left: 1rem;
}
}
avec nesting
Slide 17
Slide 17 text
La règle @supports() s'assure du support
navigateur pour une propriété donnée et n'applique
les styles que si la condition est respectée.
@SUPPORTS
Détection du support navigateur
support
.title {
color: #000; /* je suis noir par défaut */
}
@supports (backdrop-filter: initial) {
.title {
backdrop-filter: blur(10px) brightness(60%);
color: #fff;
}
}
Si backdrop-filter n'est pas reconnu
par le navigateur, la couleur de texte
reste noire.
Slide 18
Slide 18 text
DISPLAY: CONTENTS
Effacement d'une boîte en CSS
support
Un élément en display: contents n'est plus généré. Ses
enfants héritent directement des propriétés de son parent, un
peu comme si on faisait "sauter un étage" en CSS.
.row {
display: flex;
}
/* ou bien */
.row {
display: grid;
}
.col-6 {
display: contents;
}
hop, je ne suis plus là !
(uniquement en CSS)
.row {
display: flex;
}
/* ou bien */
.row {
display: grid;
}
marche pô
Je veux appliquer Flexbox ou Grid sur
"row" et avoir une action sur les div 1,
2 et 3...
(toute ressemblance avec Bootstrap
n'est pas fortuite)
1
2
3
Slide 19
Slide 19 text
:HAS()
Sélecteur de parent (et plus encore)
support
/* si le lien contient une image,
j'applique ces styles sur le lien */
a:has(img) {
color: hotpink;
}
![]()
La pseudo-classe :has() permet de cibler l'ancêtre d'un élément…
mais pas que.
selecteur:has(liste-de-selecteurs) {}
Slide 20
Slide 20 text
:HAS()
Sélecteur de parent (et plus encore)
support
.product:has(.discount) {
order: -1;
}
Je mets en avant les produits soldés
-50% -30%
Slide 21
Slide 21 text
:HAS()
Sélecteur de parent (et plus encore)
support
.card {
display: grid;
grid-template-columns: auto 1fr;
}
.card:has(>img) {
gap: 20px;
}
source : Codepen
Je veux une gouttière ici, mais uniquement
s'il y a une image enfant direct dans la card
.card-group:has(> :nth-child(2):last-child) {
gap: 20px;
}
Et je veux une gouttière ici, uniquement si ce
conteneur a exactement deux enfants
🤯
Slide 22
Slide 22 text
:HAS()
Sélecteur de parent (et plus encore)
support
.form-group:has(input:checked) {
background: #ddd;
}
source : Codepen
Je veux une couleur de fond sur le parent
du label et de la checkbox quand celle-ci
est cochée
Slide 23
Slide 23 text
:HAS()
Sélecteur de parent (et plus encore)
support
.subMenu {
display: grid;
&:has(> :nth-child(6)) {
grid-template-columns: 1fr 1fr;
width: 250px;
}
&:has(> :nth-child(8)) {
grid-template-columns: 1fr 1fr 1fr;
width: 350px;
}
}
source : Ahmad Shadeed
Les styles s'adaptent au nombre d'enfants !
Slide 24
Slide 24 text
:HAS()
Sélecteur de parent (et plus encore)
support
...
n'importe où dans le DOM
...
toggle light/dark
source : Codepen
body {
background-color: white;
color: black;
}
body:has(#check:checked) {
background-color: black;
color: white;
}
J'inverse les couleurs de la page quand la
checkbox est cochée
Slide 25
Slide 25 text
“ Grâce à :has() il est possible
de cibler n'importe quel élément
du DOM à partir de n'importe
quel autre élément du DOM.
Slide 26
Slide 26 text
POSITIONNEMENT
grid layout
aligner partout
scroll-snap
anchor positioning
Slide 27
Slide 27 text
GRID LAYOUT
Le positionnement moderne en CSS
support
header
nav
article
footer
.container {
display: grid;
gap: 10px;
@media (width > 576px) {
grid-template-columns: 200px 1fr;
& header,
& footer {
grid-column: span 2;
}
}
}
affichage sur écran réduit :
une seule colonne
affichage sur écran plus
large : deux colonnes
Grid Layout est le modèle de positionnement
responsive en CSS par excellence. Tout est y
réalisable : placement, fluidité, alignements, etc.
Slide 28
Slide 28 text
ALIGNEMENTS PARTOUT
align et justify sur des display block
support
Les propriétés align / justify sont
désormais applicables en dehors des
spécifications Grid et Flexbox
.container {
display: ce-que-tu-veux;
align-content: center;
}
align-content
justify-content
align-self
justify-self
Slide 29
Slide 29 text
SCROLL-SNAP
Technique de scroll avec des points d'accroche
support
Scroll-snap crée des points d'accroche lors du défilement,
permettant de garantir la position sur laquelle on arrive
après avoir fait défiler du contenu.
.card-group {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.card {
scroll-snap-align: center;
}
adhérence des enfants sur l'axe x
alignement de chaque card sur la "grille"
(ici, elle sera centrée)
Slide 30
Slide 30 text
Permet d'ancrer n'importe quel élément par rapport à
n'importe quel autre élément dans le DOM
.anchor {
anchor-name: --anchor;
}
.target {
position: absolute;
position-anchor: --anchor;
position-area: right;
}
je sers de référence
je me positionne par rapport à l'ancre de
référence
ANCHOR POSITIONING
Positionner un élément par rapport à n'importe quel autre
support
Source : Codepen
Slide 31
Slide 31 text
ANCHOR POSITIONING
Positionner un élément par rapport à n'importe quel autre
support
Valeur ancrée au slider. Source : Codepen
Source : Codepen
Source : Codepen
Slide 32
Slide 32 text
INTERLUDE 2
QUIZ WEB ET CSS
Slide 33
Slide 33 text
QUELLE COULEUR CSS EST LA PLUS SOMBRE ?
grey
darkgrey
lightgrey
white
grey's anatomy
fifty shades of grey
1
Slide 34
Slide 34 text
QUELLE PROPRIÉTÉ EXISTE VRAIMENT
DANS FLEXBOX ?
corn-flex
tarti-flex
circon-flex
flex-ivore
flex-wrap
2
Slide 35
Slide 35 text
!IMPORTANT SIGNIFIE-T-IL
"IMPORTANT" OU "PAS IMPORTANT" ?
Oui c'est important
Non on s'en fiche un peu
Ça dépend ?
Moi j'en mets partout, au cas où
C'est un piège !
3
Slide 36
Slide 36 text
3
https://wiki.csswg.org/ideas/mistakes
Slide 37
Slide 37 text
QUELLE EST LA VALEUR MAXIMALE
THÉORIQUE DE LA PROPRIÉTÉ Z-INDEX ?
0
1023
16383
65535
plus de 2 milliards
4
Slide 38
Slide 38 text
RESPONSIVE WEBDESIGN
unités de viewport
media query range
container query
style query
Slide 39
Slide 39 text
UNITÉS DE VIEWPORT
vw, vh, vmin, vmax
support
100vw
.element {
width: 100vw; /* 100% viewport width */
}
.element {
min-height: 100vh; /* 100% viewport height */
}
100vh
Les unités de viewport se réfèrent à l'ensemble de la
fenêtre et non au parent de l'élément.
Slide 40
Slide 40 text
UNITÉS DE VIEWPORT DYNAMIQUES
dvw, dvh, ...
support
.element {
min-height: 100vh; /* 100% viewport height */
}
100dvh
.element {
min-height: 100dvh; /* 100% dynamic viewport height */
}
100dvh
bug connu sur iOS
Slide 41
Slide 41 text
MEDIA QUERIES RANGE
La nouvelle syntaxe intuitive
support
La syntaxe moderne (range) des Media Queries
est bien plus intuitive que la syntaxe historique
@media (min-width: 576px) {
...
}
@media (max-width: 768px) {
...
}
@media (min-width: 320px) and (max-width: 768px) {
...
}
#old (mais toujours OK)
@media (width >= 576px) {
...
}
@media (width <= 768px) {
...
}
@media (320px <= width <= 768px) {
...
}
#new
.card {
display: flex;
flex-direction: column;
@media (width > 576px) {
flex-direction: row;
}
}
et en plus on peut
l'imbriquer (nesting) !
Slide 42
Slide 42 text
CONTAINER QUERIES
Styles conditionnés par la taille d'un conteneur
support
Les Container Queries permettent d'interroger la
taille d'un conteneur ancêtre et d'adapter des
styles CSS sur un élement descendant.
![]()
.card-container {
container-type: inline-size;
}
@container (width >= 400px) {
.card {
/* styles à appliquer */
}
}
Je fais une requête sur la
largeur (inline-size)
de .card-container
Si la condition de largeur est
remplie, alors j'applique plein
de jolis styles CSS
Slide 43
Slide 43 text
Les Style Queries permettent d'interroger les
styles d'un conteneur ancêtre et d'adapter des
styles CSS sur un élement descendant.
.card-container {
--discount: 50;
}
@container style(--discount: 50) {
.card {
/* styles à appliquer */
}
}
Je fais une requête sur la
valeur de --discount du
container
STYLE QUERIES
Styles conditionnés par les styles d'un conteneur
support
Slide 44
Slide 44 text
/* Custom Media Queries */
:root {
--viewport: mobile;
@media (width >= 768px) {
--viewport: tablet;
}
@media (width >= 1280px) {
--viewport: desktop;
}
}
La variable --viewport
s'adapte à la taille de la
fenêtre
STYLE QUERIES
Styles conditionnés par les styles d'un conteneur
support Source : Codepen
Le nombre de colonnes
s'adapte à --viewport
.card {
display: grid;
@container style(--viewport: tablet) {
grid-template-columns: 200px 1fr;
}
}
Slide 45
Slide 45 text
ANIMATIONS
animation-timeline (scroll)
animation-timeline (view)
Slide 46
Slide 46 text
Animations déclenchées au scroll dans la page
ou à la visibilité d'un élément dans la page
source : Codepen
ANIMATION-TIMELINE
support
Animations liées au scroll ou à la vue
Slide 47
Slide 47 text
@supports (animation-timeline: scroll()) {
.to-top {
opacity: 0;
animation: linear auto both;
animation-name: reveal;
animation-timeline: scroll(y);
animation-range: 300px 300px;
}
}
@keyframes reveal {
100% {
opacity: 1;
}
}
Bouton scroll-to-top. Source : Codepen
ANIMATION-TIMELINE: SCROLL()
support
Animations liées au scroll
Slide 48
Slide 48 text
Liens masqués au scroll. Source : Codepen
Indicateur de scroll vertical. Source : Codepen
Auto-hide sticky header. Source : Codepen
ANIMATION-TIMELINE: SCROLL()
support
Animations liées au scroll
Slide 49
Slide 49 text
Header dynamique. Source : http://bretzel.alsacreations.com/
ANIMATION-TIMELINE: SCROLL()
support
Animations liées au scroll
Slide 50
Slide 50 text
Animation des "toppings" SVG en arrivant dans le viewport.
Source : Codepen
Animations déclenchées selon la visibilité
d'un élément dans la fenêtre ou son parent
ANIMATION-TIMELINE: VIEW()
support
Animations liées à la visibilité dans le viewport
Slide 51
Slide 51 text
Rangées de logos défilants horizontalement lorsque la section traverse le viewport (animation "view")
ANIMATION-TIMELINE: VIEW()
support
Animations liées à la visibilité dans le viewport
Slide 52
Slide 52 text
Navigation du site lorsque chaque section entre dans le viewport (animation de type "view")
goetter.fr
ANIMATION-TIMELINE: VIEW()
support
Animations liées à la visibilité dans le viewport
Slide 53
Slide 53 text
INTERLUDE FINAL
QUIZ WEB ET CSS
Slide 54
Slide 54 text
QUELLE RÈGLE L'EMPORTE ?
.kiwi { color: hotpink; }
.kiwi { color: hotpink !important; }
.kiwi { color: hotpink !veryimportant; }
#kiwi { color: hotpink; }
1
Slide 55
Slide 55 text
OÙ DONC EST NÉ LE WEB ?
En Alsace
En France
Aux États-Unis
En Suisse
En Grande Bretagne
2
Slide 56
Slide 56 text
2
Slide 57
Slide 57 text
QUE RETROUVE-T-ON SUR LA PAGE D’ACCUEIL
DU TOUT PREMIER SITE WEB ?
Une photo de chat
Des gifs animés
Une animation Flash
Une publicité
Une liste de liens
3
Slide 58
Slide 58 text
https://info.cern.ch/hypertext/WWW/TheProject.html
3
Slide 59
Slide 59 text
QUELLE EST LA PARTICULARITÉ DE LA
COULEUR "REBECCAPURPLE" ?
C'est un palindrome
Elle n'est pas du tout violette
Elle n'existe pas
Il s'agit d'un hommage à une personne réelle
C'est la couleur de fond du logo officiel de CSS
4
Slide 60
Slide 60 text
MERCI !
raphaël goetter
slides sur : https://speakerdeck.com/goetter
unités de viewport
media query range
container query
style query
animation-timeline (scroll)
animation-timeline (view)
grid layout
aligner partout
scroll-snap
anchor positioning
variables
nesting
@supports
display: contents
:has