Ce qui suit est un court extrait du prochain livre de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.
Au fur et à mesure de la croissance de la plate-forme Web, elle possède des fonctionnalités imitant des applications natives . Une de ces fonctionnalités est le module de défilement CSS . La capture instantanée permet aux développeurs de définir la distance à laquelle une interface doit se déplacer pendant une action de défilement. Vous pouvez l'utiliser pour créer des diaporamas ou des interfaces paginées, des fonctionnalités qui requièrent actuellement JavaScript et des opérations DOM coûteuses. Une version antérieure de 2013, appelée Scroll Snap Points définissait une approche basée sur les coordonnées et les pixels pour spécifier la distance de défilement. Cette version de la spécification a été implémentée dans Microsoft Edge, Internet Explorer 11 et Firefox.
Chrome 69+ et Safari 11+ implémentent la dernière version de la spécification, qui utilise un modèle d'alignement de boîte. C'est ce sur quoi nous allons nous concentrer dans cette section.
Avertissement:
La plupart des didacticiels de capture instantanée qui flottent actuellement sur le Web sont basés sur la spécification antérieure de points CSS Scroll Snap . La présence du mot «points» dans le titre est un signe que le tutoriel peut s'appuyer sur l'ancienne spécification. Un indicateur plus fiable est toutefois la présence des propriétés scroll-snap-points-x
ou scroll-snap-points-y
.
est vraiment bien adapté à la présentation de diaporamas, c'est ce que nous allons construire. Voici notre balisage
Source link