Publié le 23 janvier 2019

5 propriétés CSS expérimentales à découvrir

Intéressant cet article ?

[Total : 6    Moyenne : 5/5]

Vous pensez être un intégrateur de génie ? Que le CSS n’a plus aucun secret pour vous ? Nous aussi. Voici 5 propriétés CSS expérimentales (ou méconnues) que nous allons découvrir ensemble qui montrent à quel point CSS évolue sans cesse et nous réserve encore de nombreuses surprises.

Pré-requis : il est nécessaire d’avoir des notions de base en CSS pour saisir l’aspect technique de cet article ; en revanche, les démos CodePen sont accessibles à tous et permettent de visualiser le résultat des développements en un coup d’oeil.

1 – Du positionnement sticky

Lorsque nous souhaitons avoir un élément sticky (élément qui devient fixe en fonction de l’état du scroll), nous utilisons systématiquement du JavaScript, par exemple une bibliothèque comme Sticky.js (https://rgalus.github.io/sticky-js/), qui déclenche tout un tas de calculs pour connaître l’état d’avancement du scroll afin d’appliquer / retirer un position: fixed sur l’élément au bon moment.

Nous pouvons désormais obtenir le même résultat de manière native, sans la moindre ligne de JavaScript, avec la propriété position: sticky. L’élément se positionne de façon relative jusqu’à ce que son bloc parent dépasse un seuil donné (fourni par la valeur des propriétés top, left, right et bottom) au sein du conteneur puis se comporte ensuite comme un élément fixed jusqu’à atteindre le bord opposé du bloc parent.

See the Pen Pure CSS sticky element by Pierre Vion (@pierrinho) on CodePen.

Côté compatibilité, la propriété est expérimentale : elle n’est supportée que par les navigateurs récents (Firefox, Chrome, Safari, Edge). Il est donc déconseillé de l’utiliser sur un environnement de production et de privilégier plutôt une bibliothèque JS.

2 – Des ancres animées natives

Comment faire des ancres animées smooth en se passant de JavaScript ? Tout simplement en utilisant la propriété CSS scroll-behavior. Elle permet de gérer le comportement du défilement d’une zone concernée ; pour cela, elle prend en compte deux valeurs : auto qui définit un comportement normal (valeur par défaut), et smooth qui définit, comme son nom l’indique, un défilement “doux”.

Son implémentation est donc extrêmement facile puisqu’il suffit d’appliquer scroll-behavior: smooth sur le body pour obtenir nativement des ancres animées sur votre page web. Malheureusement, cette méthode ne nous permet pas de contrôler précisément l’animation : nous ne pouvons pas configurer de fonction de easing, ni même définir une durée d’animation.

See the Pen Pure CSS smooth scroll by Pierre Vion (@pierrinho) on CodePen.

Cette propriété est expérimentale. Cependant il est possible de l’utiliser sur les navigateurs récents sans se soucier des versions non compatibles, car si la propriété n’est pas appliquée, elle n’aura aucun impact sur le fonctionnement ou l’affichage.

3 – Un compteur d’éléments HTML

Le compteur CSS est une variable qui s’incrémente en fonction du nombre d’éléments HTML ciblés. Sa valeur peut être manipulée grâce aux propriétés counter-reset, qui permet de créer ou réinitialiser le compteur, et counter-increment, qui permet de l’incrémenter. La valeur du compteur s’affiche sur la page grâce à la fonction counter() via la propriété content.

Cette propriété permet donc de réaliser facilement une numérotation cohérente et automatisée sur des chapitres, des paragraphes ou toute autre balise sans avoir à toucher au code HTML. Plutôt pratique.

Dans l’exemple ci-dessous, nous utilisons un compteur CSS pour afficher le nombre total de slides, ainsi que le numéro de la slide courante, en me basant sur la pagination générée par le slider, le tout sans la moindre ligne de code JavaScript.

See the Pen Pure CSS counter element by Pierre Vion (@pierrinho) on CodePen.

Implémenté depuis CSS 2.1, cette propriété est compatible sur quasiment tous les navigateurs du marché, jusqu’à IE8 compris.

4 – Du texte en dégradé de couleurs

Il est possible d’appliquer facilement un dégradé de couleurs sur un texte en utilisant la propriété background-clip: text qui va automatiquement “rogner” l’arrière-plan par rapport au texte en premier plan. Ainsi, nous pouvons facilement placer un dégradé de couleurs à l’intérieur d’un texte, mais aussi une image de fond ou encore une vidéo.

À noter qu’il est nécessaire d’appliquer un color: transparent sur le texte, car c’est le background situé derrière le texte qui doit être visible, et non pas la couleur du texte en lui-même.

See the Pen Pure CSS text mask by Pierre Vion (@pierrinho) on CodePen.

Cette propriété est expérimentale mais vous pouvez l’utiliser sans problème sur un environnement de production en utilisant la règle @supports permettant de définir des déclarations qui dépendent de la prise en charge du navigateur, sans dégrader l’affichage pour les anciens navigateurs (cf. demo ci-dessus).

5 – Du texte selon la forme d’une image

La structure de nos pages web se limite le plus souvent à des formes rectangulaires. C’est le cas de l’affichage des textes. C’est pourquoi la spécification CSS Shapes a été implémentée : elle permet de créer des design plus élaborés en modifiant le flux du contenu. Le texte n’est donc plus aligné selon un axe vertical, mais plutôt selon une forme complexe.

C’est la propriété shape-outside qui entre en jeu ; elle permet de définir une forme géométrique (un cercle, une ellipse, un polygone, etc) ou, encore plus intéressant, une forme plus complexe, extraite et calculée à partir d’une image. Nous pouvons également ajuster l’espace entre le contour de la forme et le texte avec la propriété shape-margin. C’est le cas dans cet exemple avec un fichier SVG.

See the Pen Pure CSS shape wrapping text by Pierre Vion (@pierrinho) on CodePen.

La spécification indique que l’élément doit nécessairement flotter afin d’avoir une amélioration progressive car si le navigateur ne prend pas en charge les formes CSS, l’utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant).

Fin du game

C’est ainsi que se termine cette petite présentation. N’oubliez pas que ces nouveautés sont encore à l’état d’expérimentation (mise à part le compteur) mais elles ne tarderont pas à aboutir à une standardisation sur tous les navigateurs. Vivement la suite. Restez curieux !

Pierre

Développeur front-end du turfu
La-qualité-une-responsabilité-collective
0 Commentaires
Répondre
Se joindre à la discussion ?
Vous êtes libre de contribuer !
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *