Les petites aventures de CSS, saison 2025

CSS a bien évolué.
De simple langage de description à ses débuts, il devient un véritable outil de programmation, embarquant variables, imbrications, conditions et un peu plus chaque jour.
Les évolutions sont parfois si nombreuses qu'il est difficile de tout suivre. Ça tombe bien car c'est justement ce qu'on va faire : un rapide panorama de fonctionnalités modernes mais déjà utilisables en production (variables, sélecteurs, cascade, positionnements, etc.)

Transcript

1. LES PETITES AVENTURES DE CSS, SAISON 2025 AKA "GAMECHANGING CSS" raphaël goetter
2. HELLO ! JE SUIS RAPHAËL ET J'AIME CSS raphaël goetter
3. 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
4. https://caniuse.com/ SUPPORT NAVIGATEURS
5. CSS != SCSS
6. FONDAMENTAUX variables nesting @supports display: contents :has
7. 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.
8. VARIABLES CSS Leur vrai nom : "Custom Properties" support DES CAS D'USAGES CLASSIQUES ? :root { --gap: 16px; } .card { display: grid; gap: var(--gap); } @media (min-width: 576px) { .card { --gap: 32px; } } modifier des gouttières dynamiquement :root { --rgb: 215, 185, 125; --alpha: 0.65; } .button { background-color: rgba(var(--rgb), var(--alpha)); } .button:hover { --alpha: 1; } changer une couleur à la volée
9. VARIABLES CSS Leur vrai nom : "Custom Properties" support .icon { --bounce: bounce 0.2s forwards ease-in; --rotate: tournicotti 0.2s 0.2s forwards; --slide: slide 0.2s 0.2s forwards; } /* Animations */ .icon:hover { animation: var(--bounce), var(--rotate); } .icon.is-triggered { animation: var(--rotate), var(--slide); } Ici nous déclarons 3 effets d'animations liées à à l'élément .icon. ... Et réutilisons l'une ou l'autre de ces animations au gré de nos besoins.
10. .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.
11. .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
12. 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.
13. DISPLAY: CONTENTS Effacement d'une boîte en CSS support Un élément en display: contents ne génère plus de boîte. 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ô <div class="row"> <div class="col-6"> <div>1</div> <div>2</div> <div>3</div> </div> </div> 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)
14. :HAS() Sélecteur de parent (et plus encore) support <a href=""> <img src="" alt=""> </a> /* si le lien contient une image, j'applique ces styles sur le lien */ a:has(img) { color: hotpink; } Le sélecteur :has() permet de remonter dans le DOM et de cibler l'ancêtre d'un élément… mais pas que selecteur:has(liste-de-selecteurs) {}
15. :HAS() Sélecteur de parent (et plus encore) support .product:has(.discount) { order: -1; } Je mets en avant les produits soldés -50% -30%
16. :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 🤯
17. :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
18. :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 !
19. :HAS() Sélecteur de parent (et plus encore) support <body> ... n'importe où dans le DOM ... <div> <input type="checkbox" id="check" class="toggle"> <label for="check">toggle light/dark</label> </div> </body> 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
20. “ 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. … Et en plus c'est performant !
21. INTERLUDE QUIZ WEB ET CSS
22. QUE SIGNIFIE VRAIMENT "CSS" ? Cascading Style Sheets Completely Shitty Selectors C'est Super Simple ! Centering Stuffs Simply Choucroute et Saucisses de Strasbourg 1
23. COMMENT RÉDIGER UN COMMENTAIRE EN CSS ? {{ ceci est un commentaire }} /# ceci est un commentaire #/ /* ceci est un commentaire */ <!-- ceci est un commentaire --> // ceci est un commentaire 2
24. QUI EST TIM BERNERS-LEE ? L'inventeur des Gifs animés L'inventeur du Web L'inventeur de CSS L'inventeur des Skyblogs Le frère de Bruce (déso) 3
25. 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 <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
26. 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
27. POSITIONNEMENT grid layout aligner partout scroll-snap anchor positioning
28. GRID LAYOUT Le positionnement moderne en CSS support <div class="container"> <header>header</header> <nav>nav</nav> <article>article</article> <footer>footer</footer> </div> .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.
29. 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
30. SCROLL-SNAP Technique de scroll avec des points d'accroche support Scroll-snap crée des positions 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)
31. 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
32. ANCHOR POSITIONING Positionner un élément par rapport à n'importe quel autre support Source : Codepen Source : Codepen Source : Codepen
33. RESPONSIVE WEBDESIGN unités de viewport media query range grid layout container query
34. 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.
35. 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
36. 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 @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) !
37. 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. <div class="card-container"> <article class="card"> <img> <h2></h2> <p></p> <button></button> </article> </div> .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
38. INTERLUDE QUIZ WEB ET CSS
39. QUELLE RÈGLE-@ N’EXISTE PAS EN CSS ? @medias @layer @keyframes @charset @supports 1
40. QUELLE PROPRIÉTÉ EXISTE VRAIMENT DANS FLEXBOX ? corn-flex tarti-flex circon-flex flex-ivore flex-wrap 2
41. QUELLE EST LA VALEUR PAR DÉFAUT DE LA PROPRIÉTÉ POSITION ? relative none inherit static normal 3
42. QUELLE EST LA VALEUR MAXIMALE THÉORIQUE DE LA PROPRIÉTÉ Z-INDEX ? 0 1023 16383 65535 plus de 2 milliards 4
43. ANIMATIONS scroll-driven animation (scroll) scroll-driven animation (view)
44. Animations déclenchées au scroll dans la page ou sur un élément source : Codepen SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll
45. @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; } } SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll Bouton scroll-to-top. Source : Codepen
46. SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll Liens masqués au scroll. Source : Codepen Indicateur de scroll vertical. Source : Codepen Auto-hide sticky header. Source : Codepen
47. SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll Header dynamique. Source : http://bretzel.alsacreations.com/
48. 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 SCROLL-DRIVEN ANIMATION (VIEW) support Animations liées à la visibilité dans le viewport
49. SCROLL-DRIVEN ANIMATION (VIEW) support Animations liées à la visibilité dans le viewport Navigation du site lorsque chaque section entre dans le viewport (animation de type "view()") goetter.fr
50. INTERLUDE FINAL QUIZ WEB ET CSS
51. QUELLE RÈGLE L'EMPORTE ? .kiwi { color: hotpink; } .kiwi { color: hotpink !important; } .kiwi { color: hotpink !veryimportant; } #kiwi { color: hotpink; } <div style="color: hotpink"> 1
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 2
54. OÙ EST NÉ INTERNET ? En France Aux États Unis En Suisse Au Royaume Uni En Norvège 4
55. OÙ EST NÉ LE WEB ? En France Aux États Unis En Suisse Au Royaume Uni En Norvège 5
56. MERCI ! raphaël goetter slides sur : https://speakerdeck.com/goetter