Les styles hors viewport

Depuis l’apparition du tactile, de nouveaux comportements possibles sont apparus dans nos interfaces. Ainsi certains navigateurs (nous verrons lesquels) laissent la possibilité de faire glisser les pages web, comme s’il s’agissait d’objets physiques. Très présente sur mobile, cette interaction est également apparue sur nos bureaux. Elle laisse alors entrevoir une partie « en dehors » de la page, sur laquelle nous pouvons néanmoins agir.

Quels navigateurs ?

J‘ai recensé pour l’instant ces navigateurs, qui proposent l’effet.

• Safari mobile ;
• IE mobile ;
• Safari desktop ;
• Chrome desktop.

Quelles possibilités ?

Cela va dépendre des navigateurs.

Chrome et IE proposent de personnaliser cet espace qu’avec une couleur de fond. Safari desktop va plus loin et autorise les images de fond (et naturellement les dégradés).

Comment ?

Ce comportement n‘étant pas à ma connaissance spécifié, chaque constructeur y va de son idée. J’ai déduit cette logique de mes tests :

• les styles appliqués sur le html ou le body seront repris en dehors du viewport ;
• si les styles sont définis sur les deux éléments :
  • et qu’il n’y a qu’une couleur de fond, c’est le body qui a la priorité ;
  • qu’il n’y a une image de fond et qu’elle est supportée, c’est le html qui a la priorité (avec sa couleur de fond éventuelle également).

À propos

L’effet est logiquement visible en haut et en bas de page.

Pour rappel, on peut styler le html et le body de manières différentes afin d’obtenir un effet de style sur les pages très courtes puisque le body, contrairement au html, ne prend pas par défaut toute la hauteur du viewport.

Pour information, mes tests à base de positionnement absolus « en dehors » de la zone de visualisation se sont révélés nuls.

Ma page de test est visible sur CodePen mais l’iframe dans laquelle elle est encapsulée bloque les tests directs : le code n’est là qu’à titre informatif.