Évolution de la propriété CSS position : la valeur sticky
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:
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;
} |
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.
:fleche: Que pensez-vous de cette évolution ?
:fleche: S'agit-il selon vous d'un gadget ou d'une évolution intéressante ?
:fleche: Quel autre type d'amélioration aimeriez-vous voir apparaitre ?
Sources : RedTeamDesign - HTML5Rocks
1 pièce(s) jointe(s)
positionnement mal défini....apparemment.
Il est amusant de voir sur le sujet du positionnement une page (celle-ci) avec le texte qui sort du cadre défini.(voir pièce jointe).
