Des propriétés CSS supportées par Firefox…

Firefox supporte certaines fonctionnalités que j’ai hâte d’utiliser en production, mais qui ne sont, à l’heure d’écriture de ces lignes, pas supportées par Chrome, ni Opera. Prenez donc cet article comme une invitation à motiver les autres navigateurs à aller de l’avant, et également comme une possibilité de faire de l’amélioration progressive dans certains cas.

Cet article est une traduction et adaptation autorisées de l’article de Brainless Developer originellement en anglais. Vous pouvez suivre @brainlessdev sur Twitter.

Peut-être que vous n’avez jamais entendu parler de ces fonctionnalités, et pour cause, elles sont plutôt mal supportées par le panel de navigateurs à ce jour. Faisons une présentation de certaines d’entre elles.

CSS Scroll Snap Points

Scroll Snap Points est une méthode qui permet d’ajouter une dose de précision lors d’une action de défilement dans un élément donné.
Cet aspect est particulièrement intéressant pour contraindre la méthode de navigation, ou l’harmoniser entre les terminaux des utilisateurs, je pense notamment aux terminaux tactiles. Imaginez la chose dans une galerie d’image, où l’on souhaite passer image par image : peu importe le mouvement de glissé, ou le scroll effectué, un mouvement dans un sens pour passer à la suivante, un mouvement dans l’autre pour revenir à la précédent, le navigateur s’occupe d’arrêter le défilement au bon endroit suivant l’entendu du mouvement.

Il y a quelques bibliothèques qui proposent ce genre de comportement tout en supportant l’ensemble des navigateurs (ou presque), comme par exemple pagePiling.js. (qui fait également bien d’autres choses) Mais la propriété native en CSS est encore trop mal supportée.

Si vous naviguez sur Firefox, voici une démonstration fonctionnelle proposée sur CodePen.

Voir CSS Scroll Snap Points Full Height dans CodePen

Voici le support de cette propriété qui pourrait évoluer assez rapidement, en tout cas je l’espère.

Les césures avec Hyphenation

Une autre fonctionnalité, cette fois liée à la typographie, est la césure. Vous le savez certainement, c’est la possibilité de laisser un mot se couper s’il est trop long, et le marquer par un trait d’union en fin de ligne. J’avais écrit un article sur le sujet en 2013 : Un contrôle plus fin des césures en CSS4.
Bien que l’article date, le support de la règle de base n’est toujours pas fait sur Chrome et Opera alors qu’il fonctionne sur tous les navigateurs.

Voir Hyphenation dans CodePen

Les valeurs none, auto et manual de hyphens permettent dans l’ordre de ne pas tenir compte de la césure (none), de laisser faire l’algorithme du navigateur selon le dictionnaire de langue (auto) ou de proposer des césures manuelles (manual) notamment avec le caractères HTML ­ qui est un trait d’union conditionnel.

Voici le support actuel pour CSS Hyphens :

Le support de hyphens dans Blink (Chrome) est prévu, il a d’ailleurs été partiellement supporté dans Chrome 13, mais retiré, comme souvent…

La fonction CSS element()

Cette fonction a un effet un peu « magique », et entre nous la magie c’est sympa mais ça nous cache des choses :p
Je ne vais pas rentrer dans les détails de ce qui se passe sous le capot de element(), mais plutôt vous montrer comment le mettre en place. Pas facile à saisir, mais imaginez deux blocs : le bloc de gauche propose un contenu, le bloc de droite applique ce contenu en tant que fond imagé. Tous les changements effectués dans le bloc de gauche se répercuteront dans le fond imagé du bloc de droite grâce à la valeur element() de la propriété background.
Je vous ai dit que c’était tordu. Avec un exemple ça marchera mieux (essayez sur Firefox) :

Voir CSS element() function dans CodePen

Là c’est le moment où vous me dites : quel intérêt !
J’ai eu du mal sur le moment à comprendre également, mais cela permet de créer des effets de transformation applicables aux blocs sans dupliquer de contenu. Exemple avec un reflet :

Voir Reflect with CSS element() function dans CodePen

Vincent nous a proposé encore plus de démonstrations sur son article avec de très bonnes idées, je vous laisse aller lire cela.

La propriété position: sticky

Une petite dernière pour la route, et pas des moindre : la possibilité de définir si et quand un élément doit se « coller » à sa position et rester à l’écran pendant un défilement de la page. Je vous en ai parlé avec une démonstration vidéo sur l’article Créer un menu sticky avec JavaScript et CSS.

Actuellement pour avoir un support complet sur tous les navigateurs, vous devez utiliser une bibliothèque ou un script JS. Peut-être la faute au support navigateur plutôt mauvais. Pourtant cette prise en charge native par Firefox est vraiment bonne. Voyez par vous-même avec cette autre démonstration.

Voir Position Sticky dans CodePen

Ça marche sur Safari et Firefox, espérons bientôt sur Chrome !

Il y a encore bien des fonctionnalités CSS dont j’attends avec hâte le support étendu sur tous les navigateurs. Et vous, vous attendez lesquelles ?