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

Transcript

1. GAMECHANGING CSS
   (QUAND TU FAIS DU CSS... ET QUE ÇA MARCHE)
   

   View Slide

2. HELLO !
   JE SUIS RAPHAËL... ET J'AIME BIEN CSS
   raphaël goetter
   

   View Slide

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

   View Slide

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

   View Slide

5. En fait, il y en a 559
   maintenant
   https://twitter.com/housecor/status/1577668059652931586
   (il y en avait 50 en
   CSS1)
   

   View Slide

6. FAIRE DE LA VEILLE EN CSS
   😓
   T'INQUIÈTE, JE L'AI FAITE POUR TOI !
   🎉
   

   View Slide

7. OK ALORS
   C'EST QUOI
   QU'ON VEUT
   EN CSS EN
   2022 2023 ?
   

   View Slide

8. TU VEUX "COLLER" UN
   ÉLÉMENT À LA PAGE ?
   mais uniquement quand on approche du bord ?
   

   View Slide

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

   View Slide

10. TU VEUX SAVOIR ÉCRIRE
    UNE MEDIA QUERY ?
    

    View Slide

11. @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!
    

    View Slide

12. 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) { }
    =
    =
    ✨
    ✨
    

    View Slide

13. TU VEUX UNE VIDÉO
    RESPONSIVE ?
    conserver le ratio d'une video ou d'une iframe
    est parfois galère
    

    View Slide

14. ASPECT-RATIO
    .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    }
    1
    2
    3
    4
    

    View Slide

15. TU DOIS APPLIQUER UN FILTRE
    DERRIÈRE UN ÉLÉMENT ?
    sans affecter tous ses enfants, bien sûr !
    

    View Slide

16. BACKDROP-FILTER
    .title {
    backdrop-filter: blur(10px) brightness(60%);
    color: #fff;
    }
    1
    2
    3
    4
    

    View Slide

17. TU VEUX ADOUCIR LE SCROLL
    VERS UNE ANCRE ?
    pour éviter des sauts abrupts
    

    View Slide

18. SCROLL-BEHAVIOR
    html {
    scroll-behavior: smooth;
    }
    1
    2
    3
    https://codepen.io/alsacreations/pen/GaebzJ?editors=1100
    

    View Slide

19. IL TE FAUT DES POINTS
    D'ACCROCHE AU SCROLL ?
    comme si les éléments "collaient" à une grille
    

    View Slide

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

    View Slide

21. TU VEUX CENTRER
    VERTICALEMENT EN CSS ?
    et t'as pas envie de passer 3h sur stackoverflow ?
    

    View Slide

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

    View Slide

23. TU VEUX UNE POLICE
    RESPONSIVE ?
    qui s'adapte à la taille de la fenêtre... mais pas trop
    

    View Slide

24. 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/
    

    View Slide

25. FLUID TYPOGRAPHY VISUALIZATION TOOL
    https://modern-fluid-typography.vercel.app/
    

    View Slide

26. View Slide

27. THE CSS1
    FONT-,
    TEXT,
    AUTRE
    

    View Slide

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

    View Slide

29. FONT- TEXT- AUTRE
    P {
    TAILLE DE TEXTE: 2EM;
    }
    THE CSS1
    

    View Slide

30. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    FONT-SIZE: 2EM;
    }
    

    View Slide

31. FONT- TEXT-
    P {
    GRAISSE DE TEXTE:
    GRASSE;
    }
    THE CSS1
    AUTRE
    

    View Slide

32. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    FONT-WEIGHT: BOLD;
    }
    

    View Slide

33. FONT- TEXT-
    P {
    COULEUR DE TEXTE:
    ROSE;
    }
    THE CSS1
    AUTRE
    

    View Slide

34. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    COLOR: PINK;
    }
    

    View Slide

35. FONT- TEXT-
    P {
    STYLE DE TEXTE:
    ITALIQUE;
    }
    THE CSS1
    AUTRE
    

    View Slide

36. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    FONT-STYLE: ITALIC;
    }
    

    View Slide

37. FONT- TEXT-
    P {
    SOULIGNEMENT DE TEXTE:
    EN-DESSOUS;
    }
    THE CSS1
    AUTRE
    

    View Slide

38. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    TEXT-DECORATION:
    UNDERLINE;
    }
    

    View Slide

39. FONT- TEXT-
    P {
    ALIGNEMENT HORIZONTAL:
    CENTRÉ;
    }
    THE CSS1
    AUTRE
    

    View Slide

40. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    TEXT-ALIGN: CENTER;
    }
    

    View Slide

41. FONT- TEXT-
    P {
    ALIGNEMENT VERTICAL:
    CENTRÉ;
    }
    THE CSS1
    AUTRE
    

    View Slide

42. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    VERTICAL-ALIGN: MIDDLE;
    }
    

    View Slide

43. FONT- TEXT-
    P {
    HAUTEUR DE LIGNE: 1.5;
    }
    THE CSS1
    AUTRE
    

    View Slide

44. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    LINE-HEIGHT: 1.5;
    }
    

    View Slide

45. FONT- TEXT-
    P {
    CASSE DE TEXTE:
    MAJUSCULES;
    }
    THE CSS1
    AUTRE
    

    View Slide

46. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    TEXT-TRANSFORM:
    UPPERCASE;
    }
    

    View Slide

47. FONT- TEXT-
    P {
    CASSE DE TEXTE:
    PETITES MAJUSCULES;
    }
    THE CSS1
    AUTRE
    

    View Slide

48. AUTRE
    FONT- TEXT-
    THE CSS1
    P {
    FONT-VARIANT:
    SMALL-CAPS;
    }
    

    View Slide

49. BAH C'ÉTAIT PAS OUF HEIN...
    THE CSS1
    

    View Slide

50. ALLEZ, ON CONTINUE
    

    View Slide

51. TU VEUX T'ADAPTER AU THÈME
    (DARKMODE) DE
    L'UTILISATEUR·TRICE ?
    

    View Slide

52. PREFERS-COLOR-SCHEME
    

    View Slide

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

    View Slide

54. TU DOIS SAVOIR SI LE
    NAVIGATEUR SUPPORTE TA
    PROPRIÉTÉ ?
    

    View Slide

55. @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
    

    View Slide

56. @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
    

    View Slide

57. @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
    

    View Slide

58. TU VEUX UNE MICRO-GRILLE
    RESPONSIVE ?
    histoire de ne pas installer Bootstrap juste pour ça...
    

    View Slide

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

    View Slide

60. .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    1
    2
    3
    4
    https://codepen.io/raphaelgoetter/full/pgRQwv
    

    View Slide

61. T'EN AS MARRE DE DEVOIR
    AJOUTER DES !IMPORTANT
    PARTOUT ?
    

    View Slide

62. @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 ?
    😢
    Coucou !
    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
    sera de couleur hotpink
    sera de couleur chocolate
    

    View Slide

63. 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
    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 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
    sera de couleur tomato
    

    View Slide

64. TA STRUCTURE HTML EST TROP
    IMBRIQUÉE ?
    

    View Slide

65. 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
    
    
    
    
    
    
    
    1
    2
    3
    4
    5
    6
    7
    

    View Slide

66. 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
    
    
    
    
    
    
    
    1
    2
    3
    4
    5
    6
    7
    

    View Slide

67. 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é
    

    View Slide

68. TU VEUX CIBLER LE PARENT ?
    juste parce que ça fait 15 ans qu'on essaye...
    

    View Slide

69. :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
    

    View Slide

70. :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
    

    View Slide

71. :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
    

    View Slide

72. :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
    

    View Slide

73. :HAS()
    compatibilité
    https://caniuse.com/css-has
    

    View Slide

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

    View Slide

75. (source image : )
    "Say Hello To CSS Container Queries"
    CONTAINER QUERIES
    

    View Slide

76. CONTAINER QUERIES
    
    
    
    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
    

    View Slide

77. CONTAINER QUERIES
    mon composant s'adapte à l'espace disponible dans son parent
    https://codepen.io/raphaelgoetter/pen/MWXMPLz
    

    View Slide

78. https://caniuse.com/css-container-queries
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
    CONTAINER QUERIES
    

    View Slide

79. WOW
    c'était intense !
    

    View Slide

80. FORMATION BONNES PRATIQUES CSS3
    placement de produit 1
    https://formations.alsacreations.fr/
    

    View Slide

81. FORMATION FLEXBOX ET GRID LAYOUT
    placement de produit 2
    https://formations.alsacreations.fr/
    

    View Slide

82. MERCI !
    Raphaël Goetter
    alsacréations
    @goetter
    slides sur https://speakerdeck.com/goetter
    

    View Slide