26672 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous,

Aujourd'hui, je vous propose une étude sur la position sticky car je viens d'en faire l'expérience et même si j'imaginais très bien le concept, la mise en application m'a été fort chaotique.


1- La théorie

1-1 Définitions
La position sticky est le fait de pouvoir maintenir la position d'un objet à un endroit précis dès que celui-ci devient hors de portée. Entendez par là une réaction au scroll.
Ce qui sous-entends que cet objet a une position initiale et une position 'en mode sticky'.

Ma démonstration s'appuie sur les éléments suivants :
* définissons notre objet comme étant dénommé ci-après 'objet'
* définissons la position initiale de notre objet comme étant la position définie par nous-même tel que nous voulons que l'objet soit placé à l'affichage de la page.
* De fait, la position finale sera celle que l'objet maintiendra à partir du moment où il est censé passer hors du champs de vision.

1-2 Exemple de base
<html>
  <head>
    <style>
      body {
        height: 300vh;/* soit 3 fois la hauteur de la zone d'affichage */
      }
      .objet {
        height: 100px;
        background: silver;
      }
    </style>
  </head>
  <body>
    <div class="objet">Mon Objet</div>
  </body>
</html>

A ce stade nous observons :
- l'apparition d'une barre de scroll verticale causée par la taille de body
- notre objet est placé aux coordonnées (0, 0)
- notre objet occupe toute la largeur de la zone d'affichage mais sa hauteur est limitée à 100 pixels.

Conséquence :
Au fur et à mesure que l'utilisateur descendra, notre objet remontera jusqu'à disparaître complètement.

Jusqu'ici, rien de magique, R.A.S mon capitaine !

2- La pratique
En gardant l'exemple précédent comme support, ajoutons maintenant la valeur sticky à la propriété position de notre objet.

Nous l'avons vu dans les définitions, nous devrons donc positionner notre objet dans l'espace en fonction de valeur, la 'position après'. Pour ce faire, il convient d'utiliser les propriétés liées à la position dans l'espace soit top, bottom, right ou left.

Par rapport à notre exemple nous allons ajouter ceci :
      .objet {
        position: sticky;
        top: 0;
      }
Que va-t-il se passer maintenant ?
Lorsque l'utilisateur usera du scroll vertical, notre objet restera à la position 0 de l'axe vertical ; ce qui donnera l'impression que notre objet est collé en haut de la zone d'affichage.

"Magnifique" me direz-vous, "je le mets en développement de suite".
Attendez, il y a des choses à prendre en considération.


3- Pré-requis, astuces et compagnie
J'en étais à la fin du paragraphe précédent quand je m'aperçus que le théorique appliqué à ma maquette ne fonctionnait pas.
J'ai alors fouillé le net à la recherche de la moindre information qui me permettrait d'avancer mais personne n'en parle. Soit car c'est trop secret pour être divulgué soit car le support de cette propriété est très limité (Firefox depuis quelques versions, Chrome s'y met seulement avec préfixe, Safari expérimente et Microsoft étudie la question de savoir s'il va l'étudier).

Avant de tenter l'expérience, il vous faudra en sus prendre en considération ces éléments dans votre workflow :

a) la position de l'objet n'est pas référente à la zone d'affichage mais à son premier parent :
Ce qui signifie qu'un élément li placé ainsi se réfèrera à son parent ul/ol et non pas ni à html ni à body. Donc si votre ul n'a pas une taille suffisante, votre li va disparaître au scroll.

b) l'overflow du premier parent de l'[i]objet ne doit en aucun cas être stipulé ![/b]
Sinon la valeur sticky est littéralement ignorée.

c) avec un tel concept il faut bien garder en tête et les dimensions du média par lequel l'utilisateur accède ainsi que celle de l'objet. Hé oui, si votre objet est plus grand que la hauteur de la zone d'affichage vous perdrez 1000 points en accessibilité (valeur totalement subjective).

(d) votre objet et ses conteneurs devront faire partie du flux.)
PS: je dois vérifier ce point car je ne l'ai pas testé mais il me semble l'avoir lu.


3- Documentation
MDN - La propriété position en Css
Can I Use position:sticky in Css ? (en anglais)
Démonstration d'un usage de la position sticky en Css
Article de Css-Tricks sur le position sticky (en anglais)
Stickyfill le polyfill (en JS)
Fixed-sticky le polyfill (en JS)


Smiley sweatdrop Vous avez essuyé quelques plâtres et avez trouvé une solution malgré tout ? Partagez ci-dessous vos astuces et conseils à ce sujet. Smiley biggrin
Modifié par Greg_Lumiere (02 Dec 2016 - 15:13)
a écrit :

a) la position de l'objet n'est pas référente à la zone d'affichage mais à son premier parent :
Ce qui signifie qu'un élément li placé ainsi se réfèrera à son parent ul/ol et non pas ni à html ni à body. Donc si votre ul n'a pas une taille suffisante, votre li va disparaître au scroll.


Je ne comprend pas trop où est le problème? c'est comme ça que ça fonctionne et que c'est documenté.
Certes Kustolovic, d'ailleurs il s'agit plus d'un point sur lequel il faille faire attention qu'un problème.

Mais vois-tu, probablement de part l'utilisation des propriétés top, left, bottom et right, pour ma part ce point fut source de confusion et je n'avais de cesse de ne pas le prendre en considération rendant ainsi tous mes essais infructueux. Smiley confused

Je pense que si j'ai commis l'erreur d'y croire, je ne suis peut-être pas le seul (allez dites-moi que je ne suis pas le seul Smiley rolleyes ) et qu'il faille peut-être mieux "taper une fois de plus sur le clou". Smiley biggrin

La documentation, aussi fournie soit-elle, ne suffit pas toujours et nul n'est à l’abri d'une erreur d'interprétation. Peut-être que cet article, par sa reformulation permettra de dissiper quelque brume, du moins je l'espère.

Smiley smile
Bonjour.

Quand on essaye le positionnement sticky, on prend souvent un seul élément (pensant à un menu)...
J'avoue que mettre deux éléments en position sticky m'a un peu déroutée... Le premier a le comportement attendu, l'autre ne semble pas affecté...

Smiley ohwell
Zelena a écrit :

J'avoue que mettre deux éléments en position sticky m'a un peu déroutée... Le premier a le comportement attendu, l'autre ne semble pas affecté...

Smiley ohwell
Bien au contraire. L'exemple présent sur la page du MDN (une liste) le démontre bien. L'élément suivant vient remplacer l'élément précédent.

Dans le cas où il s'agirait d'éléments bien distincts comme un menu et un widget par exemple, dans l'hypothèse où ils ont le même conteneur, l'astuce consistera à jouer avec le z-index afin de déterminer quel élément restera en premier plan par rapport au second (en cas de chevauchement).

Le tout, je pense, est d'avoir une idée précise de l'encombrement des conteneurs directs qui sont seuls référents au positionnement des éléments.

Zelena a écrit :
Quand on essaye le positionnement sticky, on prend souvent un seul élément (pensant à un menu)...
Effectivement, par contre il faut bien penser à le sortir de tout conteneur intermédiaire.

Par exemple, dans mes premiers tests, je souhaitais un menu qui vienne se coller en haut de la zone d'affichage. Mais le menu affecté était englobé dans un header. De fait il n'avait de cesse de disparaitre de l'écran au scroll (le contenu de la page étant conséquent).
Par contre en le mettant enfant direct de body, ça a fonctionné du tonnerre.

Du reste cela implique (encore une fois) que dans certaines situations, il faudra faire un choix entre ce mode de positionnement et la sémantique.
Modifié par Greg_Lumiere (02 Dec 2016 - 15:05)
Bonjour.

J'ai effectué quelques tests avec sticky; Il semble que la position sticky n'accepte que le positionnement top: 0; avec left et right rien en se passe, il en est de même avec des valeurs différentes de 0
Pour ajouter un peu de confusion à la position:sticky; quand vous commencer à savoir vous en servir (c'est à dire éviter les cas ou cela n'est pas applicable) . voici un exemple improbable avec 2 éléments frères, enfant direct de body . Ils sont supposés se positionner en bas d’écran et au scroll . L'un toujours visible et l'autre le repoussant vers le haut .

bottom:0; , display et float sont impliqués: https://codepen.io/gc-nomade/pen/OxgYwY => à voir comme une curiosité et surtout ne pas utilisé bien sur Smiley smile
Salut,

Je viens de recevoir le livre CSS 3 de Raphael, et je vois que ça parle de position: sticky.
J'ose pas trop ouvrir le livre car c'est pour offrir, donc j'entre-ouvre à peine pour pas plier la couverture Smiley biggol

Je n'avais jamais entendu parler de cette nouvelle propriété. Je trouve ça génial lorsqu'on a un tableau super long et que les entêtes de colonnes sont masquées au scroll.
Avec position sticky je vais enfin pouvoir afficher mes entêtes tout du long ! Smiley banane
Si c'est pour les tableaux, Firefox est toujours incapable de gérer ce positionnement sur les éléments de tableaux Smiley decu

Bonne lecture/apprentissage,

Cdt,
GC