Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ah, tu peux faire ça en CSS maintenant ?

Raphael Goetter
November 07, 2022

Ah, tu peux faire ça en CSS maintenant ?

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.)

Raphael Goetter

November 07, 2022
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. Depuis 2003 Un forum, des tutos, un service d'emploi Opensource

    et gratuit 30000 visiteurs / jour 50000 membres sur le forum .com Communauté d'apprentissage
  2. .fr Depuis 2006 On fait des sites web performants et

    accessibles On dispense des formations On est une petite équipe de 10 personnes On a un peu l’accent alsacien Agence web, organisme de formation
  3. TU VEUX "COLLER" UN ÉLÉMENT À LA PAGE ? mais

    uniquement quand on approche du bord ?
  4. POSITION STICKY position relative ou fixed quand nécessaire .header {

    position: sticky; top: 0; } 1 2 3 4 https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
  5. @media screen and (max-width: 768px) { } @media screen and

    (min-width: 320px) and (max- width: 768px) { } euh oui mais "min-width" c'est pas déjà une propriété en CSS ? pareil pour "max-width" non ? et 320px est inclus ou bien c'est 321 en vrai idem pour 768px ? WTF!
  6. MEDIA QUERIES RANGE SYNTAX @media (max-width: 768px) { } https://caniuse.com/css-media-range-syntax

    @media (min-width: 320px) and (max-width: 768px) { } @media (width >= 768px) { } @media (320px <= width <= 768px) { } = = ✨ ✨
  7. TU VEUX UNE VIDÉO RESPONSIVE ? conserver le ratio d'une

    video ou d'une iframe est parfois galère
  8. TU DOIS APPLIQUER UN FILTRE DERRIÈRE UN ÉLÉMENT ? sans

    affecter tous ses enfants, bien sûr !
  9. IL TE FAUT DES POINTS D'ACCROCHE AU SCROLL ? comme

    si les éléments "collaient" à une grille
  10. SCROLL-SNAP .slides { overflow-x: auto; scroll-snap-type: x mandatory; /* point

    d'accroche sur l'axe x */ } .slide { scroll-snap-align: center; } 1 2 3 4 5 6 7 https://codepen.io/raphaelgoetter/pen/MWJqmRX
  11. TU VEUX CENTRER VERTICALEMENT EN CSS ? et t'as pas

    envie de passer 3h sur stackoverflow ?
  12. PLACE-CONTENT body { display: grid; place-content: center; min-height: 100vh; }

    1 2 3 4 5 (dans Grid Layout) raccourci de : justify-content: center align-content: center
  13. TU VEUX UNE POLICE RESPONSIVE ? qui s'adapte à la

    taille de la fenêtre... mais pas trop
  14. CLAMP() h1 { font-size: clamp(2rem, 2vw, 4rem); } 1 2

    3 valeur minimum : 2rem valeur souhaitée : 2vw (= 2% de largeur de fenêtre) valeur maximum : 4rem https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
  15. CSS ALSACREATIONS.COM 10 PROPRIÉTÉS À RETROUVER: CERTAINES COMMENCENT PAR "FONT-",

    D'AUTRES PAR "TEXT-" ET D'AUTRES PAR AUCUN DES DEUX. 1 33 7
  16. https://web.dev/prefers-color-scheme/ PREFERS-COLOR-SCHEME :root { --color-one: chocolate; --color-two: honeydew; } @media

    (prefers-color-scheme: dark) { /* redefine dark mode colors here */ :root { --color-one: honeydew; --color-two: chocolate; } } .card { background-color: var(--color-one); color: var(--color-two); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
  17. @SUPPORTS .header { position: relative; } @supports (position: sticky) {

    .header { position: sticky; top: 2rem; } } 1 2 3 4 5 6 7 8 9 Propriétés par défaut “@supports permet de tester le support d'une propriété par le navigateur avant de l'appliquer Propriétés appliquées si "sticky" est reconnu par le navigateur
  18. @SUPPORTS .title { color: #000; /* noir (alternative) */ }

    @supports (backdrop-filter: initial) { .title { backdrop-filter: blur(10px) brightness(60%); color: #fff; /* blanc */ } } 1 2 3 4 5 6 7 8 9
  19. @SUPPORTS détection du "non support" aussi @supports not (display: grid)

    { .ingrid > * { float: left; margin-right: 20px; } } @supports (display: grid) { .ingrid { display: grid; gap: 20px; } } 1 2 3 4 5 6 7 8 9 10 11 12 si le navigateur ne supporte pas Grid Layout si le navigateur supporte Grid Layout
  20. TU VEUX UNE MICRO-GRILLE RESPONSIVE ? histoire de ne pas

    installer Bootstrap juste pour ça...
  21. GRID LAYOUT .auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

    } 1 2 3 4 https://codepen.io/raphaelgoetter/pen/BaVoXva?editors=1100
  22. @LAYER p {color: tomato;} .kiwi {color: pink;} div p:first-child {color:

    chocolate;} p.kiwi {color: hotpink;} 1 2 3 4 de quelle couleur est <p> ? 😢 <p class="kiwi">Coucou !</p> 1 “@layer permet de redéfinir l'ordre et la priorité dans la cascade CSS @layer reset { p {color: olive;} .kiwi {color: pink;} div p:first-child {color: chocolate;} } @layer base { p {color: hotpink;} } 1 2 3 4 5 6 7 8 <p> sera de couleur hotpink <p> sera de couleur chocolate
  23. il est possible de définir l'ordre de plusieurs layers en

    une règle @layer reset, base; @layer base { p {color: tomato;} } @layer reset { p {color: olive;} .kiwi {color: pink;} } 1 2 3 4 5 6 7 8 9 10 <p> sera de couleur tomato les styles sans layers sont appliqués en priorité p {color: tomato;} @layer reset { p {color: olive;} .kiwi {color: pink;} } 1 2 3 4 5 6 <p> sera de couleur tomato on peut importer des styles dans des layers @layer framework, base; @import url("bootstrap.css") layer("framework"); @layer base { p {color: tomato;} } 1 2 3 4 5 6 7 <p> sera de couleur tomato
  24. DISPLAY: CONTENTS header { display: flex; } input { flex-grow:

    1; } 1 2 3 4 5 6 Aucune chance que ça fonctionne puisque input n'est pas enfant direct de header logo label input <header> <img class="logo"> <form> <label></label> <input> </form> </header> 1 2 3 4 5 6 7
  25. DISPLAY: CONTENTS header { display: flex; } form { display:

    contents; } input { flex-grow: 1; } 1 2 3 4 5 6 7 8 9 form ne crée plus de boîte, ses enfants deviennent les enfants directs de header logo label input <header> <img class="logo"> <form> <label></label> <input> </form> </header> 1 2 3 4 5 6 7
  26. DISPLAY: CONTENTS compatibilité Tu veux tester ? Tu veux en

    savoir plus ? Le ? Les ? https://codepen.io/raphaelgoetter/pen/BaJyQmN display-box (dont la valeur contents) support navigateurs bugs restants en accessibilité
  27. :HAS() a:has(img) { color: hotpink; } 1 2 3 cible

    les liens qui contiennent une image a:has(> img) { color: hotpink; } 1 2 3 cible le lien parent direct d'une image label:has(+ input) { color: hotpink; } 1 2 3 cible le label précédent un input
  28. :HAS() je veux cibler body quand il y a une

    modale body:has(.modal) { backdrop-filter: blur(8px); } 1 2 3 https://codepen.io/raphaelgoetter/pen/VwdZmGx?editors=1100
  29. :HAS() je veux cibler .card uniquement quand il y a

    une image https://codepen.io/raphaelgoetter/pen/vYdVQPX Je veux une gouttière ici, mais uniquement quand il y a une image .card { display: grid; } .card:has(>img) { column-gap: 20px; } 1 2 3 4 5 6
  30. :HAS() je veux une couleur de fond quand un enfant

    est coché .form-check:has(:checked) { background: #ddd; } .form-check:has(:checked) > label { font-weight: 700; } 1 2 3 4 5 6 https://codepen.io/raphaelgoetter/pen/MWXwpaJ?editors=1100
  31. TU VEUX DES MEDIA QUERIES EN FONCTION DE LA TAILLE

    DU PARENT ? parce qu'au final tu t'en fiches un peu de la taille de fenêtre
  32. CONTAINER QUERIES <aside class="sidebar"> <article class="article"></article> </aside> 1 2 3

    Contexte de Confinement créé sur .sidebar. "kiwi" est son nom "inline-size" est le critère à tester (ici c'est la largeur de .sidebar) .sidebar { container-name: kiwi; container-type: inline-size; } 1 2 3 4 Container Query si le conteneur "kiwi" a une largeur mini de 25rem alors on applique des styles conditionnels sur .article @container kiwi (inline-size > 25rem) { .article { /* styles à appliquer */ } } 1 2 3 4 5
  33. CONTAINER QUERIES mon composant s'adapte à l'espace disponible dans son

    parent https://codepen.io/raphaelgoetter/pen/MWXMPLz