Les petites aventures de CSS, saison 2024

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 2024 AKA "GAMECHANGING CSS" raphaël goetter
2. HELLO ! JE SUIS RAPHAËL ET J'AIME CSS raphaël goetter
3. CSS 1 (50 propriétés) 1996 1998 CSS 2 CSS 3 🤯 (1ère propriété) 1999 CSS "living standard" 2012 2007 CSS 2.1 2024 ~600 propriétés en CSS Google Chrome 1 Internet Explorer 6 Microsoft Edge Mozilla Firefox 1
4. CSS != SCSS
5. CSS3 CSS2.1 CSS1 CSS Syntax Generated content Tables Paged media Paged Media Visual Effects Cascade Pseudo Classes Box Properties Text Properties Color + Background Font Properties Selectors L3 Grid Layout Media Queries Background + Borders Multi Column Basic UI Style Attributes Color L3 Ruby Flexible Layout Name spaces MathML Speech Syntax L3 Transforms Transitions Selectors Media Types Box Model Selectors L4 Generated Content Masking Web Animations 2017) source : Wikipedia
6. FONDAMENTAUX variables nesting @supports :has() display: contents @scope
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); } 1 2 3 4 5 6 7 8 9 10 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; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 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; } 1 2 3 4 5 6 7 8 9 10 11 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); } 1 2 3 4 5 6 7 8 9 10 11 12 13 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; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 NESTING Imbrication de sélecteurs CSS support sans nesting .link { display: flex; flex-wrap: wrap; &:hover, &:focus { color: hotpink; } @media (min-width: 576px) { flex-direction: column; } & > * { margin-left: 1rem; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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; } } 1 2 3 4 5 6 7 8 9 Si backdrop-filter n'est pas reconnu par le navigateur, la couleur de texte reste noire.
13. :HAS() Sélecteur de parent (et plus encore) support <a href=""> <img src="" alt=""> </a> 1 2 3 /* si le lien contient une image, j'applique ces styles sur le lien */ a:has(img) { color: hotpink; } 1 2 3 4 Le sélecteur :has() permet de remonter dans le DOM et de cibler l'ancêtre d'un élément, mais aussi le précédent, le suivant, etc.
14. :HAS() Sélecteur de parent (et plus encore) support .product:has(.discount) { order: -1; } 1 2 3 Je mets en avant les produits soldés -50% -30%
15. :HAS() Sélecteur de parent (et plus encore) support .card { display: grid; grid-template-columns: auto 1fr; } .card:has(>img) { gap: 20px; } 1 2 3 4 5 6 7 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; } 1 2 3 Et je veux une gouttière ici, uniquement si ce conteneur a exactement deux enfants 🤯
16. :HAS() Sélecteur de parent (et plus encore) support .form-group:has(input:checked) { background: #ddd; } 1 2 3 source : Codepen Je veux une couleur de fond sur le parent du label et de la checkbox quand celle-ci est cochée
17. :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; } } 1 2 3 4 5 6 7 8 9 10 11 12 source : Ahmad Shadeed Les styles s'adaptent au nombre d'enfants !
18. :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> 1 2 3 4 5 6 7 8 9 source : Codepen body { --bg-color: #eee; --text-color: #222; background-color: var(--bg-color); color: var(--text-color); } body:has(.toggle:checked) { --bg-color: #222; --text-color: #eee; } 1 2 3 4 5 6 7 8 9 10 J'inverse les couleurs de la page quand la checkbox est cochée
19. “ 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 !
20. 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; } 1 2 3 4 5 6 7 .col-6 { display: contents; } 1 2 3 hop, je ne suis plus là ! (uniquement en CSS) .row { display: flex; } /* ou bien */ .row { display: grid; } 1 2 3 4 5 6 7 marche pô <div class="row"> <div class="col-6"> <div>1</div> <div>2</div> <div>3</div> </div> </div> 1 2 3 4 5 6 7 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)
21. @scope() permet de restreindre les styles au sein d'un périmètre et éviter qu'ils se propagent ailleurs dans la page @scope (.card) { .title { font-family: "comic sans ms"; color: hotpink; } } 1 2 3 4 5 6 <div class="card"> <h1 class="title">Titre</h1> ... </div> 1 2 3 4 @SCOPE support Styles confinés dans un périmètre Ici, les styles de .title sont confinés au sein de la card, ils n'iront pas se diffuser ailleurs, ni être écrasés par d'autres styles. Fini les .c-card__title !
22. INTERLUDE QUIZ WEB ET CSS
23. QUE SIGNIFIE VRAIMENT "CSS" ? Cascading Style Sheets Completely Shitty Selectors C'est Super Simple ! Centering Stuffs Simply Choucroute et Saucisses de Strasbourg 1
24. 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
25. 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
26. 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
27. 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
28. RESPONSIVE WEBDESIGN unités de viewport media query range grid layout container query
29. UNITÉS DE VIEWPORT vw, vh, vmin, vmax support 100vw .element { width: 100vw; /* 100% viewport width */ } 1 2 3 .element { min-height: 100vh; /* 100% viewport height */ } 1 2 3 100vh Les unités de viewport se réfèrent à l'ensemble de la fenêtre et non au parent de l'élément.
30. UNITÉS DE VIEWPORT DYNAMIQUES dvw, dvh, ... support .element { min-height: 100vh; /* 100% viewport height */ } 1 2 3 100dvh .element { min-height: 100dvh; /* 100% dynamic viewport height */ } 1 2 3 100dvh bug connu sur iOS
31. 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) { ... } 1 2 3 4 5 6 7 8 9 #old @media (width >= 576px) { ... } @media (width <= 768px) { ... } @media (320px <= width <= 768px) { ... } 1 2 3 4 5 6 7 8 9 #new .card { display: flex; flex-direction: column; @media (width >= 576px) { flex-direction: row; } } 1 2 3 4 5 6 7 8 et en plus on peut l'imbriquer (nesting) !
32. GRID LAYOUT Le positionnement moderne en CSS support <div class="container"> <header>header</header> <nav>nav</nav> <article>article</article> <footer>footer</footer> </div> 1 2 3 4 5 6 .container { display: grid; gap: 10px; @media (width > 576px) { grid-template-columns: 200px 1fr; & header, & footer { grid-column: span 2; } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 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.
33. GRID LAYOUT Le positionnement moderne en CSS support <div class="container"> <h1 class="title"></h1> </div> 1 2 3 Centrer verticalement et horizontalement avec Grid Layout ? Trop facile ! .container { display: grid; place-content: center; } 1 2 3 4 propriété raccourcie de justify-content et align- content
34. 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 conditionnellement des styles CSS sur un élement descendant. <div class="card-container"> <article class="card"> <img> <h2></h2> <p></p> <button></button> </article> </div> 1 2 3 4 5 6 7 8 .card-container { container-type: inline-size; } @container (inline-size >= 400px) { .card { /* styles à appliquer */ } } 1 2 3 4 5 6 7 8 9 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
35. INTERLUDE QUIZ WEB ET CSS
36. QUELLE RÈGLE-@ N’EXISTE PAS EN CSS ? @medias @layer @keyframes @charset @supports 1
37. QUELLE PROPRIÉTÉ EXISTE VRAIMENT DANS FLEXBOX ? corn-flex tarti-flex circon-flex flex-ivore flex-wrap 2
38. QUELLE EST LA VALEUR PAR DÉFAUT DE LA PROPRIÉTÉ POSITION ? relative none inherit static normal 3
39. QUELLE EST LA VALEUR MAXIMALE THÉORIQUE DE LA PROPRIÉTÉ Z-INDEX ? 0 1023 16383 65535 plus de 2 milliards 4
40. INTERACTIVITÉ scroll-snap scroll-driven animation (scroll) scroll-driven animation (view)
41. 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; } 1 2 3 4 5 6 7 adhérence des enfants sur l'axe x alignement de l'enfant sur la "grille" (ici, il sera centré)
42. 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
43. @supports (animation-timeline: scroll()) { .to-top { opacity: 0; animation-name: reveal; animation-duration: auto; animation-timing-function: linear; animation-timeline: scroll(root y); animation-range: 200px 500px; } } @keyframes reveal { 100% { opacity: 1; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll
44. SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll
45. SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll
46. Allez, une dernière démo pour la route ! source : http://bretzel.alsacreations.com/ SCROLL-DRIVEN ANIMATION (SCROLL) support Animations liées au scroll
47. 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
48. source : Codepen SCROLL-DRIVEN ANIMATION (VIEW) support Animations liées à la visibilité dans le viewport
49. MERCI ! raphaël goetter slides sur : https://speakerdeck.com/goetter