Modifications d'empilement à venir dans position:fixed éléments

Tom Wiltzius
Tom Wiltzius

Dans Chrome 22, le comportement de mise en page des éléments position:fixed est légèrement différent de celui des versions précédentes. Tous les éléments position:fixed forment désormais de nouveaux contextes d'empilement. Cela modifiera l'ordre d'empilement de certaines pages, ce qui risque de perturber les mises en page. Le nouveau comportement correspond à celui des navigateurs WebKit sur les appareils mobiles (iOS, Safari et Chrome pour Android).

Empilez quoi ?

Tout le monde connaît et apprécie l'élément z-index, qui permet de déterminer l'ordre de profondeur des éléments d'une page. Toutefois, tous les z-index ne sont pas égaux: la propriété z-index d'un élément détermine uniquement son ordre par rapport aux autres éléments du même contexte d'empilement. La plupart des éléments d'une page se trouvent dans un contexte de pile racine unique, mais les éléments absolument ou relativement positionnés avec des valeurs z-index non automatiques forment leurs propres contextes d'empilement (c'est-à-dire que tous leurs enfants seront ordonnés dans l'ordre dans le parent et ne seront pas entrelacés avec du contenu extérieur au parent). À partir de Chrome 22, les éléments position:fixed créeront également leurs propres contextes de pile.

Pour obtenir une présentation générale des contextes d'empilement, cet article MDN est particulièrement utile.

Comparez position:fixed au nouvel attribut position:sticky: pour référence, position:sticky crée toujours un nouveau contexte d'empilement.

Motivation

Les navigateurs mobiles (Mobile Safari, navigateur Android, navigateurs basés sur Qt) insèrent les éléments position:fixe dans leurs propres contextes d'empilement et ont depuis un certain temps (depuis iOS5, Android Gingerbread, etc.), car il permet certaines optimisations de défilement, ce qui rend les pages Web beaucoup plus réactives au toucher. Ce changement est appliqué aux ordinateurs pour trois raisons:

  1. La différence entre le comportement d'affichage sur les navigateurs pour mobile et pour ordinateur est un obstacle pour les auteurs Web. Le CSS devrait fonctionner de la même manière partout dans la mesure du possible.
  2. Avec les tablettes, il n'est pas facile de déterminer lequel des algorithmes de création de contexte d'empilement de « mobile » ou « ordinateur » est le plus approprié.
  3. Intégrer les optimisations des performances de défilement des mobiles aux ordinateurs de bureau est une bonne chose pour les utilisateurs et les auteurs.

Détails de la modification

Voici un exemple illustrant les différents comportements de mise en page: https://codepen.io/paulirish/pen/CgAof

Avec cette modification, les deux versions s'afficheront comme la version de droite.

Dans cet exemple, la boîte verte a un z-index: 1, la case rose a un z-index: 3 et la case orange a un z-index: 2. Le cadre bleu est un ancêtre de la boîte orange. Il a l'attribut position:fixed.

Si le cadre bleu obtient son propre contexte d'empilement, la valeur z-index du cadre orange est calculée par rapport au contexte d'empilement du cadre bleu. Étant donné que la case bleue a une z-index de auto, ce qui lui donne un niveau d'empilement de zéro dans le contexte d'empilement racine, cela signifie que la case orange se termine derrière les cases verte et rose, dont les z-index sont respectivement de 1 et 3 dans le contexte racine.

Si le cadre bleu ne dispose pas de son propre contexte d'empilement, la valeur z-index du cadre orange est calculée par rapport au contexte d'empilement racine (avec les cases verte et rose). Par conséquent, le cadre orange finit par être entrelacé avec les cases rose et verte.

Pour en savoir plus sur les critères de création de contextes d'empilement (et sur le comportement général des contextes d'empilement), consultez à nouveau cet article MDN. Dans l'exemple, la version de droite donnait toujours au cadre bleu son propre contexte d'empilement, car son opacité est inférieure à 1. Le changement de comportement en cours ajoute effectivement un autre critère pour créer un contexte d'empilement distinct, à savoir un élément position:fixe.

Les tests et l'avenir

Pour vérifier si votre page va changer, accédez à la about:flags de Chrome et activez/désactivez l'option "Les éléments de position fixe créent des contextes d'empilement". Si votre mise en page se comporte de la même manière dans les deux cas, vous êtes prêt. Si ce n'est pas le cas, assurez-vous que cela vous semble acceptable lorsque cet indicateur est activé, car il s'agira de l'option par défaut dans Chrome 22.

Cette modification supprime une fonctionnalité : celle d'entrelacement du contenu dans une sous-arborescence position:Fixed avec du contenu extérieur sans défilement. Il est peu probable que les développeurs Web le fassent délibérément. Le même effet peut être obtenu en attribuant à plusieurs éléments position:Fixed les différentes parties du DOM. Prenons les deux exemples suivants:

https://codepen.io/wiltzius/pen/gcjCk

Cette page tente d'utiliser deux div enfants (overlayA etoverlayB) d'un élément position:Fixed, et en placer un au-dessus d'un div de contenu distinct et un autre en dessous de ce même div de contenu séparé. Cette opération est désormais impossible, car l'élément position:Fixed est dans son propre contexte d'empilement, et il sera placé entièrement au-dessus ou en dessous du div de contenu de Chrome et de la version 2 de Chrome 2.

Pour résoudre ce problème, les deux superpositions peuvent être divisées en éléments position:fixe. Chacun d'entre eux correspond à un contexte d'empilement spécifique, l'un pouvant se situer au-dessus de l'élément div de contenu et l'autre en dessous. Voici un exemple fixe, qui fonctionne dans Chrome 21 et 22:

https://codepen.io/wiltzius/pen/vhFzG

Le crédit de la genèse de cet exemple revient au hixie inimitable.

Chrome est le premier navigateur pour ordinateur à créer des contextes d'empilement spécifiques pour les éléments position:Fixed. La norme applicable est la spécification CSS z-index (voir, par exemple, https://www.w3.org/TR/CSS21/zindex.html). Pour l'instant, il n'y a pas encore de consensus sur la différence entre les navigateurs pour mobile et pour ordinateur, mais pour le moment, en raison de la confusion qu'ont les deux comportements différents sur mobile et sur ordinateur, Chrome a choisi d'adopter ce comportement unique sur les deux plates-formes.

Mise à jour du 1er octobre 2012:la version d'origine de cet article suggérait que la spécification CSS z-index avait déjà été modifiée afin de refléter le nouveau comportement de "position: Fixed items". Cette information est inexacte. Elle a été abordée dans la liste de style www, mais aucune modification n'a encore été apportée aux spécifications.