Évolution de la propriété CSS position : la valeur sticky
Un billet de Didier Mouronval

Le , par Bovino, Rédacteur
Tous les développeurs Web sont supposés connaître la propriété CSS position.
Pour rappel, cette propriété permet de déterminer comment un élément HTML sera intégré dans le document.

Cette propriété accepte quatre valeurs :
  • static : c'est la valeur par défaut, un élément avec cette valeur sera intégré dans le flux normal ;
  • relative : permet de positionner l'élément en fonction de l'emplacement qu'il aurait dû avoir dans le flux ;
  • absolute : permet de positionner l'élément par rapport à son ancêtre positionné (dont la valeur de position est différente de static) le plus proche ;
  • fixed : permet de positionner l'élément à un emplacement fixe de la fenêtre d'affichage (l'élément ne se déplace pas lors du scroll).


Si ces quatre valeurs sont largement suffisantes pour la plupart des pages Web, certaines pratiques apparaissent et se généralisent qui justifieraient d'étendre les valeurs possibles.

Parmi ces pratiques, celle consistant à intégrer un élément dans la page qui suit le défilement tant qu'il est visible puis se bloque à une position limite est de plus en plus répandue (sticky elements). Pour en voir un exemple, regardez comment se comporte la table des matières dans les articles de developpez.com.
Pour réaliser cela, nous sommes actuellement obligés d'utiliser JavaScript et de modifier la propriété position en fonction de la valeur du scroll.

C'est pour cela que les développeurs de Chrome ont eu l'idée d'ajouter une valeur possible pour la propriété position, la valeur sticky.

Exemple :
Code css : Sélectionner tout
1
2
3
4
5
6
7
8
#sticky_element{ 
  position: -webkit-sticky; 
  position: -moz-sticky; 
  position: -ms-sticky; 
  position: -o-sticky; 
  position: sticky; 
  top: 15px; 
}

Voir un exemple sur JS Fiddle.

Dans cet exemple, l'élément dont l'id est sticky_element va se déplacer en même temps que la page tant qu'il sera à plus de 15 pixels du haut de la page, puis se figera pour rester toujours visible.
Notez l'utilisation des préfixes vendeurs et leur ordre. Les préfixes vendeurs permettent d'utiliser des fonctionnalités (CSS ou JavaScript) qui sont encore expérimentales. Comme le comportement de ces fonctionnalités est susceptible d'évoluer en fonction de leur implémentation, on déclare toujours la propriété non préfixée (donc définitive et supposée conforme à la spécification) en dernier afin que celle-ci écrase les précédentes si elle est disponible.

Malheureusement, le support navigateur est quasiment inexistant à l'heure actuelle et elle ne fait pas partie des spécifications du W3C.
La propriété est bien reconnue en version préfixée pour Chrome et Safari sur iOS 6, mais pour le reste, elle n'est supportée que par les versions de développement de Chrome (Canary) et Firefox (Nightly).
Cependant, cela reste une belle perspective pour un futur relativement proche.

Sources : RedTeamDesign - HTML5Rocks


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Responsable bénévole de la rubrique (X)HTML : Xavier Lecomte -