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