Les aventures de CSS, saison 2026

CSS a franchi un cap : ce n'est plus un langage de décoration, c'est un langage à part entière. Fonctions, conditions, interpolation de valeurs, positionnement contextuel… et les animations au scroll qui ont enfin signé leur contrat en 2026 chez tous les navigateurs.

Un épisode pour tout remettre à jour : on refait le récap complet, on repart avec des exemples concrets qu'on peut utiliser dès demain. Et on spoile la saison 2027.

Transcript

1. et là tu vois, j'ai réussi à centrer verticalement ma div series et
2. HELLO ! JE SUIS RAPHAËL ET J'AIME CSS raphaël goetter
3. CSS1 CSS CSS2 CSS2 CSS2.1 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é 2026 Google Chrome 1 Internet Explorer 6 Microsoft Edge Mozilla Firefox 1 Précédemment dans CSS… ~700 propriétés en CSS CSS3
4. Reprendre avec le profil de Ginette Tendances actuelles Accueil Séries Films Ajouts récents Mon profil box THE DOCKER 🃏 Laisse pas traîner ton script 🎵 007 : Stackoverflow DIV HA THE TRUE/FALSE SHOW variables nesting flexbox grid layout :has() @layer() container queries
5. SAISON 2026 🍿
6. Le style devient intelligent. Entre logique avec @function et tests conditionnels, ou lecture de données via attr() et sibling- index/count, CSS comprend enfin ce qu'il affiche. Le cerveau est branché, la mise à jour est totale… Un cerveau pour CSS series Cérébral • Révolutionnaire • Logique • No-JS Plus d'infos Lire
7. S2026 E01 "@property" @PROPERTY
8. S2026 E01 "@property" @property --progress { syntax: "<percentage>"; /* Type de la propriété */ inherits: false; /* Ne s'hérite pas */ initial-value: 0%; /* Valeur initiale */ } .bar { background: linear-gradient(to right, red var(--progress), gray var(--progress)); animation: play 2.5s linear infinite; } @keyframes play { to { --progress: 100%; } } support
9. ATTR() S2026 E02 "attr() étendu"
10. S2026 E02 "attr() étendu" v2 <div class="bar" data-color="hotpink"> </div> .bar { --color: attr(data-color type(<color>), red); background: linear-gradient(to right, var(--color) var(--progress), gray var(--progress)); animation: play 2.5s linear infinite; } support
11. SIBLING-INDEX() SIBLING-COUNT() S2026 E03 "sibling-index() et sibling-count()"
12. support S2026 E03 "sibling-index() et sibling-count()" sibling-index() : Donne la position (l'index) de l'élément actuel parmi ses frères. Le premier enfant renvoie 1, le deuxième renvoie 2, etc. sibling-count() : Donne le nombre total d'éléments frères dans ce même groupe (le total d'enfants). <ul> <li>Salade</li> <li>Tomate</li> <li>Oignon</li> </ul> sibling-count() = 3 sibling-index() = 1 sibling-index() = 2 sibling-index() = 3
13. .card { /* Le premier attend 0.1s, le second 0.2s, le troisième 0.3s... */ animation-delay: calc(sibling-index() * 0.1s); } S2026 E03 "sibling-index() et sibling-count()"
14. https://codepen.io/raphaelgoetter/full/RNoVvyw S2026 E03 "sibling-index() et sibling-count()"
15. @FUNCTION S2026 E04 "@function et @mixin"
16. S2026 E04 "@function et @mixin" support h1 { z-index: --nom(3); } @function --nom(--argument) { result: calc(var(--argument) * 1000); } h1 { color: --opacity(purple, 60%); } @function --opacity(--color, --opacity) { result: oklch(from var(--color) l c h / var(--opacity)); } z-index: 3000;
17. Pixels ⇢ Rems .card { padding: --rem(24); /* Génère 1.5rem */ } @function --rem(--px) { result: calc(var(--px) / 16 * 1rem); } Fluid-size h1 { font-size: --fluid-size(2rem, 5rem); } @function --fluid-size(--min, --max) { --slope: calc((var(--max) - var(--min)) / (1280px - 360px)); --intercept: calc(var(--min) - (var(--slope) * 360px)); result: clamp( var(--min), calc(var(--intercept) + (var(--slope) * 100vw)), var(--max) ); } Light-Dark .box { display: --light-dark(block, none); } @function --light-dark(--light, --dark) { result: var(--light); @media (prefers-color-scheme: dark) { result: var(--dark); } }
18. ENTRACTE PAUSE POP-CORN
19. QUE SIGNIFIE VRAIMENT "CSS" ? Cascading Style Sheets Completely Shitty Selectors C'est Super Simple ! Centering Stuffs Simply Choucroute et Saucisses de Strasbourg 1
20. 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) 2
21. 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é ! 3 <div class="relative mx-auto p-3 col-start-1 row- start-1 flex flex-col-reverse rounded-lg bg- gradient-to-t from-black/75 via-black/0 text- center md:text-left sm:bg-none sm:row-start-2 sm:mx-0 sm:p-0 lg:row-start-1"> 1
22. 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 4
23. OÙ DONC EST NÉ LE WEB ? En Alsace En France Aux États-Unis En Suisse En Grande Bretagne 5
25. Plus besoin de boussole pour se repérer dans le DOM. Entre le positionnement ancré et le retour de Masonry, CSS redessine les cartes du Web. Chacun chez soi, et les tooltips seront bien gardés… series Urbanisme • Ancrage émotionnel • Verticalité retrouvée • Maçonnerie La conquête de l'espace Plus d'infos Lire
26. S2026 E05 "align-content" ALIGN-CONTENT
27. S2026 E05 "align-content" .parent { display: ce-que-tu-veux; align-content: center; } support Synopsis : les propriétés align et justify sont désormais applicables en dehors des spécifications Grid et Flexbox 💖
28. S2026 E06 "Masonry" MASONRY
29. S2026 E06 "Masonry" https://masonry.desandro.com/ since 2009 !
30. S2026 E06 "Masonry" https://webkit.org/demos/grid3/photos/ .grille { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } support
31. S2026 E07 "anchor positioning" ANCHOR POSITIONING
32. .anchor { anchor-name: --anchor; } .target { position: absolute; position-anchor: --anchor; position-area: right; } S2026 E07 "anchor positioning" Synopsis : permet d'ancrer n'importe quel élément par rapport à n'importe quel autre élément ⚓ je sers de référence je me positionne par rapport à l'ancre de référence
33. S2026 E07 "anchor positioning" Source : Codepen support
34. Valeur ancrée au slider. Source : Codepen Source : Codepen Source : Codepen
35. Le mouvement perpétuel. Découvrez comment CSS transforme de simples pages en expériences immersives. Du défilement synchronisé aux transitions de pages, le Web n'a jamais été aussi fluide… series Cinématographique • Vertigineux • Effets spéciaux • Adrénaline 24 images par seconde Plus d'infos Lire
36. S2026 E08 "scroll-state" SCROLL-STATE
37. S2026 E08 "scroll-state" support html { container-type: scroll-state; container-name: scroller; } @container scroll-state(scrollable: top) { .scroll-to-top { translate: 0 150%; } } Synopsis : nouvelle query permettant de connaître l'état de scroll d'un conteneur je sers de référence je me déplace si le conteneur est scrollable vers le haut
38. S2026 E08 "scroll-state" Source : Codepen
39. S2026 E09 "Animations au scroll" ANIMATIONS AU SCROLL
40. support S2026 E09 "Animations au scroll" @keyframes scale-up { from { scale: 0; } to { scale: 1; } } img { animation: scale-up; animation-timeline: view(); } Synopsis : les animations ne sont plus liées à une durée mais à une distance ! scénario de l'animation je déclenche l'animation lors de mon parcours dans la page
41. S2026 E09 "Animations au scroll" Liens masqués au scroll. Source : Codepen
42. S2026 E09 "Animations au scroll" Animation de header et des éléments qu'il contient lors du scroll
43. S2026 E09 "Animations au scroll"
44. S2026 E09 "Animations au scroll" Rangées de logos défilants horizontalement lorsque la section traverse le viewport
45. S2026 E09 "Animations au scroll" Navigation du site lorsque chaque section entre dans le viewport goetter.fr
46. ENTRACTE 2 T'AVAIS BESOIN DE FAIRE PIPI ?
47. QUELLE COULEUR CSS EST LA PLUS SOMBRE ? grey darkgrey lightgrey white grey's anatomy fifty shades of grey 1
48. QUELLE PROPRIÉTÉ EXISTE VRAIMENT DANS FLEXBOX ? corn-flex tarti-flex circon-flex flex-ivore flex-wrap 2
49. !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
50. 3 https://wiki.csswg.org/ideas/mistakes
51. QUELLE EST LA VALEUR MAXIMALE THÉORIQUE DE LA PROPRIÉTÉ Z-INDEX ? 0 1023 16383 65535 plus de 2 milliards 4
52. 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 5
53. https://info.cern.ch/hypertext/WWW/TheProject.html 5
54. 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 6
55. series Speed-Dating Plus d'infos Lire Parfois, ce sont les petits détails qui font les grandes histoires. Un tour d'horizon des fonctionnalités qui sauvent des après-midis et subliment les designs en une ligne de code Punchy • Pépites • Arc-en-ciel • Zéro effort
56. S2026 E10 "pretty | balance" PRETTY | BALANCE
57. S2026 E10 "pretty | balance" support h2 { text-wrap: balance; } p { text-wrap: pretty; } Synopsis : Le texte est réparti équitablement entre les lignes. Synopsys : le texte est optimisé pour la lisibilité (sauts de ligne, espaces, etc.)
58. S2026 E10 "pretty | balance" h1 { text-wrap: balance; }
59. S2026 E10 "pretty | balance" h2 { text-wrap: pretty; } h2 { text-wrap: pretty; }
60. S2026 E11 "contrast-color()" CONTRAST-COLOR() 1 épisode restant
61. S2026 E11 "contrast-color()" support button { background-color: var(--couleur); color: contrast-color(var(--couleur)); } Synopsis : Renvoie une couleur noir ou blanc pour assurer un contraste suffisant entre le texte et le fond. WCAG AA (4.5:1)
62. S2026 E12 "scope()" SCOPE() dernier épisode
63. S2026 E12 "scope()" support @scope (.card) { h2 { color: hotpink; } } Synopsis : Isole les styles dans un périmètre du DOM Cible les h2 uniquement dans .card
64. S2026 E12 "scope()" .card__title .hero__title--alternate .media-content .component-footer .form-content-secondary .button-grid-primary .title .media .header .footer .content .desc @scope (.card) { .title {} .media {} } <article class="card"> <h2 class="title">titre</h2> <img class="media" src="" alt=""> </article> Plus besoin de nommages complexes à la "BEM" !
65. VOUS AVEZ AIMÉ LES AVENTURES DE CSS SAISON 2026 ? Vous aimerez sûrement... NCJS Miami, un thriller psychologique où JavaScript réalise, après 48h de dev, qu'une seule propriété CSS moderne vient de remplacer l'intégralité de son script de 200 lignes. + Ma liste Lecture
66. CSS, c’est comme un tournage de série : on passe 80% du temps à régler les margins, 15% à maudire les navigateurs, et 10% à se demander pourquoi display: flex ne marche pas comme on veut. — Steven Pixelberg, producteur de display:blockbusters
67. THE END MERCI ET À TRÈS BIENTÔT POUR DE NOUVELLES HISTOIRES CSS https://speakerdeck.com/goetter series et @property attr() sibling-index() sibling-count() @function() align-content display: grid-lanes anchor positioning scroll-state animation-timeline: view() text-wrap: pretty | balance contrast-color() @scope() Dans son propre rôle Le voleur de répliques Les trois jumeaux Docteur "Sans Sass" Ingrid la prof de yoga alsacienne José le maçon champion de Tetris Le cascadeur de la scène coupée au montage L'acteur qui tourne de l'œil à la fin Projectionniste qui veut être dans le générique Kévin, le poète romantique métalleux Gunther le caméléon daltonien Le Shérif du comté (pas le fromage)