Les nouvelles pseudo-classes :is() et :where() en CSS

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 22

  • @medaillonet
    @medaillonet 6 месяцев назад

    J'avoue que le ":is(ol, ul) :is(ol, ul) ol" est très explicite 🧠🙇‍♂😅
    Merci encore pour ce point CSS, simple et efficace, comme dab' ! 👍
    J'utilise assez souvent le :is "collé" perso, très utile.
    Par contre la "meilleure" (ou plutôt moins contraignante) spécificité grâce au :where, je n'y avais jamais prêté attention, merci !

  • @CompagnonDeCode
    @CompagnonDeCode 6 месяцев назад +1

    Toujours au top tes vidéos Enzo ! Merci pour le partage !

  • @FrancoisLecroart
    @FrancoisLecroart 6 месяцев назад

    Sympa comme vidéo. Merci pour la découverte.
    Pour ton exemple sur la spécificity. J'aurais plutôt jouer sur le sélecteur que sur le !important qui lui va écraser quoi qu'il arrive le sélecteur et donc n'a rien a voir avec la spécificité.
    Un exemple plus concret aurait été du mettre comme sélecteur div.container pour l'un et .container pour l'autre, et on aurait vue que le plus spécifique est pris en priorité, qu'il soit avant ou après l'autre règle.
    Pour ce qui est de la simplicité, je suis pas fan non plus de cette exemple. Si c'est pour faire un :is(h5).hero le plus simple c'est directement h5.hero ^^. Sinon, mettre les pseudo class à la fin est très classique et je trouve ça moins perturbant. J'ai jamais vue dans du code un :focus.btn par exemple.

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад +1

      Salut et merci pour ton commentaire !
      J'aurais pu être un peu plus précis sur ces points là en effet. 👌

  • @mapledotsyrup
    @mapledotsyrup 6 месяцев назад

    Super Vidéo 😄

  • @djxanimationetfilmamateur1900
    @djxanimationetfilmamateur1900 6 месяцев назад

    Merci pour le tuto j'aimerais savoir si une mise à jour du navigateur pourrait permettre d'avoir les nouveautés

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад

      Ces fonctionnalités sont déjà supportées 👍

  • @didier..n..1567
    @didier..n..1567 6 месяцев назад

    Bonjour, Enzo je voulais te demander j'ai remarquer sur t'on école de formation
    que tu as retiré la formation svelte il me semble c'est dommage
    ou alors tu là inclus dans l'abonnement.
    Merci pour les infos sur :is :where

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад

      Bonjour, en effet, elle est au garage pour l’instant, en train de subir une révision 🙏

  • @alphastar5626
    @alphastar5626 6 месяцев назад

    Euh sinon yavait aussi le signe "+" quon pouvait utiliser en mode "header h1 + p + span + a + button". Donc je vois pas trop a quoi sert le "is"

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад

      Je crois que tu te méprends, "+" sert à sélectionner un élément qui en suit un autre.
      :is() sert à sélectionner une liste d'éléments plus facilement.

  • @marcelehuyambianguessan5510
    @marcelehuyambianguessan5510 6 месяцев назад

    Je voudrais savoir si ces nouveaux pseudo element sont pris en charge automatiquement par sass ?

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад

      Oui, SASS convertit du SASS en CSS, quelle que soit la pseudo classe.

  • @SaveCount-bh8tp
    @SaveCount-bh8tp 6 месяцев назад

    Ne te compares pas avec lui , chacun a sa vision

    • @skr182
      @skr182 6 месяцев назад

      C'est qui lui??

    • @SaveCount-bh8tp
      @SaveCount-bh8tp 6 месяцев назад

      @@skr182 c'est Gnabro

  • @EricFressange
    @EricFressange 6 месяцев назад

    Salut, je n'ai pas encore eu à utiliser :where.
    Par contre :is je l'utilise pour savoir si mes card sont des liens ce qui me permet d'appliquer l'effet hover sur mes card que si se sont des liens
    .card:is(a):hover {...}

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад

      Merci pour ton message.
      Mais vu qu'il n'y a qu'un élément dans ton :is(), pourquoi ne pas simplement utiliser :
      a.card:hover {} ?

    • @EricFressange
      @EricFressange 6 месяцев назад

      @@EcoleduWeb oui pardon j'ai oublié de préciser je bosse en scss, du coup la vraie syntaxe c'est
      .card {
      ...
      &:is(a):hover {...}
      }

    • @EricFressange
      @EricFressange 6 месяцев назад

      Mais normalement oui je devrais faire a.card:hover{...}
      Et je viens de me rendre compte en te répondant qu'il y a une autre manière qui m'évite le :is
      .card {
      &[href]:hover {...}
      }

    • @EcoleduWeb
      @EcoleduWeb  6 месяцев назад

      @@EricFressange Ça revient au même, regarde dans ton CSS compilé. 👍
      .card:is(a):hover {
      color: red;
      }

  • @lmz-dev
    @lmz-dev 6 месяцев назад +1

    MDN c'était mieux avant. Mais avant il n'y avait pas Internet, alors bon🙄