InMy.Live

Le :is() et :where() les pseudo-sélecteurs sont des ajouts relativement nouveaux au CSS, qui nous permettent de cibler les éléments qui répondent aux critères entre parenthèses. Par exemple, en utilisant :is() nous pouvons cibler n’importe p, h2 ou ul élément avec une classe de test:

.test:is(p, h2, ul) {
  background: yellow;
}

Cela équivaut à écrire :

p.test,
h2.test,
ul.test {
  background: yellow;
}

Inversement, nous pourrions cibler n’importe quel h2 qui a l’une des classes spécifiées :

h2:is(.heading-1, .heading-2) {
  background: yellow;
}

Cela équivaut à :

h2.heading-1,
h2.heading-2 {
  background: yellow;
}

Cela fonctionne aussi avec des sélecteurs complexes. Les cibles suivantes h2 qui est un enfant direct d’un élément avec une classe de has-red-heading:

h2:is(.has-red-heading > *) {
  color: red;
}

:where(), à première vue, est assez similaire. En effet, on peut l’utiliser exactement de la même manière et cela aura le même effet :

h2:where(.heading-1, .heading-2) {
  background: yellow;
}

La différence est les sélecteurs à l’intérieur :where() ont une spécificité de zéro, tandis que le sélecteur à l’intérieur :is() contribuent à la spécificité globale. Pour citer directement de MDN :

La différence entre :where() et :is() est que :where() a toujours une spécificité de 0, tandis que :is() prend la spécificité du sélecteur le plus spécifique dans ses arguments.

Voyons comment ceux-ci peuvent être utiles dans notre code CSS.

Meilleur style de bloc

Chez Atomic Smash, l’agence web où je travaille, nous sommes spécialisés dans la création de sites WordPress. Les développements récents de WordPress ont rendu plus facile que jamais la fourniture de sites entièrement flexibles : l’éditeur de blocs Gutenberg offre aux clients une flexibilité totale pour ajouter, supprimer ou réorganiser des blocs n’importe où sur la page. Mais cela vient aussi avec ses défis, dont le moindre est le style des nombreux types de blocs différents pour assurer un espacement approprié entre eux.

Présentation de Gutenberg

Sur une page Web construite avec l’éditeur de blocs Gutenberg, chaque “bloc” est un enfant direct d’un seul élément wrapper sur la page. Certains sont de simples blocs, comme des titres et des paragraphes, d’autres sont des composants plus complexes avec des classes ajoutées. Nous pouvons également créer des blocs personnalisés à utiliser de la même manière.

<div class="entry-content">
  <!--Heading and paragraph core blocks-->
  <h2>Did dinosaurs really exist?</h2>
  <p>
    Yes. Semper eget duis at tellus at urna condimentum mattis pellentesque.
    Donec ac odio tempor orci dapibus ultrices in. In hac habitasse platea
    dictumst quisque sagittis purus sit.
  </p>

  <!--More complex core block-->
  <blockquote
    class="wp-block wp-block-quote"
    id="block-1cfd33a9-706c-4409-8a6e-d381bff67023"
  >
    <p>
      Dinosaurs lived a really long time ago, but they can teach us a lot about
      the present day
    </p>
  </blockquote>

  <!--Custom block-->
  <div class="as-accordion" id="accordion-block_6065ca0dd7fa1">
    <!--...block HTML-->
  </div>
</div>

Espacement des blocs

WordPress fournit un tas de CSS par défaut pour styliser l’espace entre les blocs Gutenberg, mais nous voulons généralement remplacer cela en fonction de notre conception. Un moyen pratique de le faire consiste à utiliser le sélecteur de hibou lobotomisé pour les descendants directs de l’enveloppe de contenu.

.entry-content > * + * {
  margin-top: 1rem;
}

Cela définit une marge supérieure sur chaque bloc lorsqu’il en suit un autre. C’est un bon début, mais certains blocs ont généralement besoin d’un peu plus d’espace, nous définissons donc un plus grand margin-top valeur pour ces blocs. Voici à quoi cela ressemble avec Sass, ce que nous utilisons chez Atomic Smash :

.entry-content {
  > * + * {
    margin-top: 1rem;
  }

  /* Any block followed by a h2, h3, h4, figure, blockquote or gallery block needs more space above */
  > * + h2,
  > * + h3,
  > * + h4,
  > * + figure,
  > * + blockquote,
  > * + .wp-block-gallery {
    margin-top: 2rem;
  }

  /* Any block that follows a figure, blockquote or gallery block needs more space above */
  > figure + *,
  > blockquote + *,
  > .wp-block-gallery + * {
    margin-top: 2rem;
  }
}

Ceci n’est qu’un instantané, et il se peut que nous ayons besoin d’encore plus d’espacement personnalisé sur un projet donné, ainsi que de prendre en compte différents points d’arrêt.

Nous pouvons refactoriser cela pour le rendre plus concis en utilisant :is():

.entry-content {
  > * + * {
    margin-top: 1rem;
  }

  > * + :is(h2, h3, h4, figure, blockquote, .wp-block-gallery),
  > :is(figure, blockquote, .wp-block-gallery) + * {
    margin-top: 2rem;
  }
}

:is() est probablement une meilleure option que :where() dans ce cas, car nous voulons augmenter la spécificité et remplacer les styles Gutenberg par défaut.

En voici une démonstration en action, ainsi que des propriétés personnalisées pour mettre à l’échelle le rythme vertical pour différents points d’arrêt, ce qui peut aider à garder notre code encore plus concis :

Voir le stylo de Michelle Barker (@michellebarker) sur CodePen.