liksi logo

.blog

front

Les propriétés méconnues du State of CSS 2022

Yoann Breton - Publié le 13/10/2022
Les propriétés méconnues du State of CSS 2022

Introduction

Ça y est le State of CSS 2022 est tombé ! C’est le sondage annuel questionnant nos connaissances et utilisations du CSS. En le complétant, je me suis rendu compte que pas mal de fonctionnalités m’étaient inconnues.

Cet article va donc passer en revue quelques propriétés CSS utiles qui vous sont peut-être méconnues.

Cet article contient des démos qui peuvent ne pas être compatible avec votre navigateur.

@container

Le CSS Container Queries permettent d’effectuer des Media Queries non pas en fonction du ViewPort, mais d’un élément HTML de notre DOM.

Comme exemple, disons que nous voulons avoir un élément “Card” contenant une image qui s’affiche à gauche du texte si elle a la place, sinon elle se placera en haut du texte.

<div class="container">
  <div class="card">
    <img src="<https://picsum.photos/200/300>" />
    <div class="content">
      <h1>Lorem ipsum !</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, quod.
        Eum tempore fuga quae nam deserunt, fugiat possimus ipsa sunt in commodi
        ratione dolorum iusto incidunt non nihil necessitatibus aspernatur!
      </p>
    </div>
  </div>
</div>

Nous pouvons définir notre container comme ceci :

.container {
  /**
  * container est un raccourci pour :
  * container: <container-name> / <container-type>;
  * container-type: inline-size;
  * container-name: card-container;
  */
  container: card-container / inline-size;
}

Et effectuer une Container Query sur ce container :

@container card-container (width > 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
  }
}

Démo

See the Pen Container query example by Yoann (@BSYoann) on CodePen.

Si vous voulez en savoir plus sur les Container Queries, je vous invite à consulter la spécification de W3C : https://w3c.github.io/csswg-drafts/css-contain-3/#container-queries

Cette fonctionnalité n’est pas encore supportée par tous les navigateurs (caniuse), toutefois, un polyfill existe.

Filter et backdrop-filter

Les fonctions de filtres en CSS permettent d’appliquer des effets de flou et des changements de couleur sur un élément. La propriété filter met à disposition un certain nombre de fonctions que nous pouvons utiliser.

filter()

Globalement les fonctions parlent d’elle-même :

  • blur(<length>?) : applique un flou Gaussien à l’élément
  • brightness(<number-percentage>?) : éclairci ou assombrit l’image en fonction du multiplicateur (ou pourcentage)
  • contrast(<number-percentage>?) : change le contraste
  • drop-shadow(<color>? && <length>{2, 3}) : à la différence du box-shadow qui crée une ombre rectangulaire de l’élément, drop-shadow créé une ombre conforme à la forme de l’élément. Idéal pour les SVG ou PNG qui ne sont pas de forme rectangulaire.
  • grayscale(<number-percentage>?) : converti l’élément en échelle de gris
  • hue-rotate([<angle>|<zero>]?) : applique une rotation des couleurs
  • invert(<number-percentage>?) : inverse les couleurs
  • saturate(<number-percentage>?) : change la saturation
  • sepia(<number-percentage>?) : applique un effet sépia

backdrop-filter()

Cette propriété offre les mêmes fonctions de filtre que filter, mais au lieu de s’appliquer directement à l’élément, le filtre s’applique sur l’arrière plan de l’élément.

Démo

Un exemple vaut mieux que des définitions, voici une démonstration des différents filter et backdrop-filter :

See the Pen CSS filters by Yoann (@BSYoann) on CodePen.

Attention : filter est bien supporté par les navigateurs, cependant c’est un peu moins le cas de backdrop-filter lorsqu’on n’ajoute pas les préfixes.

@layer

@layer permet de déclarer des couches de cascade et de définir l’ordre dans lequel ces couches s’appliquent.

Imaginons que nous chargions une feuille de style d’un Framework que l’on utilise. Cela applique du CSS à notre projet, cependant, on veut s’assurer que le CSS que l’on applique dans le layer de notre projet soit pris en compte même si nos règles ont une priorité inférieure aux règles du Framework (de par la spécificité de nos sélecteurs).

Le layer nous permet de faire ça, voici comment le layer s’intercale dans l’ordre des priorités :

on aurait donc :

Démo

Voici un exemple simple mais parlant :

See the Pen CSS layers by Yoann (@BSYoann) on CodePen.

Dans cet exemple, on voit que la règle du layer Framework .box{…} a une importance plus haute que la règle du layer base p{…}. Elles modifient toutes deux le même élément, pourtant, la box apparaît bleu comme le définit la règle du layer base. C’est grâce à l’ordre d’application des layers définis par @layer framework, base (dans cet ordre, toutes les règles de @layer framework ont une importance inférieure au @layer base).

@layer est assez bien supporté par les navigateurs modernes. Cependant, si vous voulez être sûr d’être compatible avec le plus grand nombre de navigateurs, je vous invite à jeter un œil au plugin PostCSS Cascade Layers.

Scroll-snap-type

_**scroll-snap-type**_ permet de forcer le scroll sur des points d’accroches que sont les éléments d’un conteneur.

  • scroll-snap-type: <axis> mandatory : le scroll sera forcé sur l’un des points d’accroche suivant ou précédent, dépendamment du sens du scroll
  • scroll-snap-type: <axis> proximity : le comportement est quasi similaire à mandatory sauf qu’ici, le point d’accroche est forcé que si le scroll est très proche du point d’accroche

Démo

Voici une démo de scroll-snap-type sur les différents axes.

See the Pen Scroll snap type CSS by Yoann (@BSYoann) on CodePen.

Je vous laisse vous référer à https://caniuse.com/mdn-css_properties_scroll-snap-type pour voir la compatibilité de cette propriété dans les différents navigateurs.

Le mot de la fin

Le CSS évolue à grande vitesse ces dernières années et il est facile de passer à côté de nouvelles fonctionnalités. Cet article effleure quelques propriétés présentes dans le State of CSS, je vous invite à y répondre si ce n’est pas déjà fait. Vous pourrez ainsi découvrir (ou redécouvrir) les fonctionnalités à notre disposition.

Attention toutefois, certaines propriétés du State Of CSS sont très expérimentales et ne sont pas supportées par les navigateurs.

Sources

Derniers articles