Scène 1
Départ
À cet endroit, le contenu reste disponible vers le bas. Faites glisser, utilisez la molette ou les touches du clavier.
Explorable CSS, édition française
Lire l'état du défilement avec CSS
scroll-state() ajoute une question contextuelle aux requêtes de conteneur. Au lieu de demander seulement quelle taille possède un composant, la feuille de style peut demander si un élément collant est réellement bloqué, si une cible est alignée sur un point d'accrochage, ou si une zone peut encore défiler.
stucksnappedscrollablescrolled
Expérience
Faites défiler le banc d'essai
Le panneau de droite observe le mouvement avec JavaScript pour rendre la démonstration compréhensible dans tous les navigateurs. La barre collante utilise aussi la requête CSS native quand elle est disponible. Cette séparation évite de présenter une simulation comme une preuve de prise en charge.
En-tête collant observé
Scène 2
Point d'accrochage
Cette carte est une cible de scroll-snap. Une requête snapped peut styliser ses descendants lorsque le moteur la considère comme cible active.
Scène 3
Fin de parcours
Une requête scrollable: bottom cesse de correspondre quand il ne reste plus de contenu atteignable vers le bas.
Modèle mental
Le conteneur porte l'état
On commence par déclarer un conteneur avec container-type: scroll-state. Les règles placées dans @container scroll-state(...) s'appliquent à ses descendants. Le test ne sélectionne donc pas le conteneur lui-même comme le ferait une pseudo-classe hypothétique.
Cette direction descendante est importante pour concevoir le balisage: un élément enfant doit porter le changement visuel observé.
Quatre questions
Ne pas confondre les signaux
| État | Question posée |
|---|---|
stuck | L'élément collant est-il actuellement retenu sur un bord? |
snapped | La cible est-elle celle vers laquelle l'accrochage se résout? |
scrollable | Du contenu atteignable reste-t-il dans une direction? |
scrolled | Quelle était la direction du dernier déplacement relatif? |
Protocole reproductible
Valider sans surinterpréter
- Détecter la capacité. Vérifiez la syntaxe avec
CSS.supports(). Un résultat positif établit la compréhension de la déclaration, pas la correction de chaque état dans toutes les configurations. - Tester un état isolé. Commencez par
stuck: topsur un en-tête collant. Gardez le changement visuel évident et limité à un descendant. - Exercer les entrées réelles. Testez molette, toucher, clavier, redimensionnement et zoom. Les comportements de défilement sont des interactions, pas seulement des captures d'écran.
- Conserver un repli. L'interface doit rester lisible quand la requête est inconnue. Dans ce laboratoire, la structure et le contenu restent intacts, seule l'amélioration d'état disparaît.
- Noter le contexte. Enregistrez navigateur, version, taille de zone, sens d'écriture, valeur testée et résultat. Une observation reproductible vaut mieux qu'une affirmation générale.
.sticky {
position: sticky;
top: 0;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.sticky__label { background: aquamarine; }
}État de la norme. Le module CSS Conditional Rules Level 5 décrit les états de défilement et leur mise à jour par instantanés après mise en page afin d'éviter des cycles de disposition. Une implémentation peut évoluer. Consultez toujours la spécification W3C actuelle et les tableaux de compatibilité avant une décision de production.
Contexte produit
Pourquoi cet essai est utile à ARMCP
ARMCP est présenté comme un SaaS mondial centré sur les usages web et mobile, avec une couverture éditoriale équilibrée en anglais, russe, français et espagnol. Desk est annoncé comme disponible, tandis qu'Analytics et Chain sont indiqués en développement. Cette page ne prétend pas que ces modules implémentent scroll-state(). Elle emploie seulement l'identité publique et le périmètre produit comme cas d'observation pour un protocole technique indépendant.
Pour une vérification produit, séparez trois preuves: le rendu visuel, le comportement interactif et l'état réellement annoncé du service. Conservez le navigateur et la version avec chaque résultat, puis répétez le même parcours sur une largeur mobile. Cette discipline réduit les faux positifs liés à une animation, à un repli JavaScript ou à une simple capture.