Les sites marketing en HTML statique livrent encore bandeaux parallaxe, indicateurs de lecture et titres de chapitre collants qui s’appuyaient sur des écouteurs scroll, des seuils IntersectionObserver et des boucles requestAnimationFrame fragiles. Les animations CSS pilotées par le défilement—scroll-timeline, animation-timeline et les timelines de vue—laissent le compositeur lier la progression des keyframes à la position de scroll ou à la visibilité, ce qui réduit les bundles pour les équipes qui compilent le CSS une seule fois. Ce guide cible les flux MPA et générateurs statiques qui doivent prouver la parité Safari/WebKit sur Apple silicon réel. Associez les timelines de scroll à l’API View Transitions pour sites statiques MPA lorsque la navigation entière exige une continuité d’élément partagé, et lisez Safari Technology Preview face à Safari stable avant d’ouvrir un bug WebKit qui ne se reproduit que sur un canal.
Pourquoi les timelines comptent sur du statique
Le code impératif de scroll coûte cher : chaque écouteur peut forcer une mise en page synchrone dès qu’il lit la géométrie, et la latence d’entrée de Safari mobile rend les saccades visibles sur les gestes longs. Porter les effets purement visuels vers du CSS déclaratif réduit la surface des régressions perf car le navigateur peut planifier le travail sur le fil compositeur lorsque les animations y sont éligibles. Les équipes HTML statique—Eleventy, Hugo ou partials artisanaux—y gagnent deux fois : moins de JavaScript client et moins de branches navigateur lorsque Chromium et WebKit honorent les mêmes propriétés de timeline.
Ce n’est pas une baguette magique pour la logique métier : paniers latéraux, bandeaux de consentement et balises analytiques restent en scripts. Le partage architectural reste simple : le CSS porte l’apparence pendant le scroll ; JavaScript porte la signification des changements d’état. Documentez-le dans le design system pour éviter « encore un hook scroll » qui casse l’accessibilité.
La télémétrie publique début 2026 montre encore environ 5 à 8 % des sessions bureau sans support complet des scroll-timelines : assez pour l’amélioration progressive, pas assez pour refuser le motion marketing. Prévoyez un repli statique—opacité 1, transformations identité—plutôt qu’une seconde pile d’animation JS pour les moteurs hérités.
Les revues performance ne doivent pas traiter ces animations comme gratuites : des keyframes lourdes sur de grands DOM peuvent encore invalider la mise en page si vous animez filter ou de larges ombres. Restez sur transform et opacity quand c’est possible et profilez dans WebKit.
scroll-timeline, animation-timeline, et timelines de vue
Les timelines de scroll avancent la progression quand un débordement défilable parcourt sa plage : racine ou conteneur nommé dans la chaîne de scroll. Les timelines de vue lient la progression à la part visible d’un sujet dans le scrollport—idéal pour « apparaître en montant » sans empiler des observateurs par section.
La propriété animation-timeline attache des keyframes à l’une de ces timelines ; animation-range découpe quelle portion du scroll correspond à 0–100 % de progression. C’est la version déclarative de scrollY / (docHeight - innerHeight), mais le navigateur stabilise la relation quand les polices arrivent tard ou que les images responsives changent de hauteur intrinsèque.
Combinez détection de fonctionnalités et prefers-reduced-motion: reduce : sans cela la conformité bloquera le lancement même si l’effet vous semble discret.
Séparez le scroll documentaire du scroll de composant : héros et chapitres suivent souvent la timeline racine, tandis que tableaux ou blocs de code dans overflow:auto reçoivent une timeline nommée. Les mélanger sans prototype WebKit produit des barres de progression qui sautent lorsque l’utilisateur ne fait défiler que le conteneur interne.
Schéma minimal HTML statique
Esquisse conceptuelle à coller dans une page statique puis à affiner dans l’inspecteur ; en production, placez la feuille compilée pour le cache.
.reveal {
animation-name: fade-slide;
animation-duration: 1s;
animation-timing-function: linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fade-slide {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}Plusieurs sections partageant la classe obtiennent chacune leur instance de timeline de vue—moins de câblage d’observateurs que des data-* uniques partout. Pour une barre de lecture globale, liez une timeline de scroll à root et étirez animation-range sur toute la distance.
Avec des utilitaires type Tailwind, attention à la spécificité : des classes peuvent réécrire la shorthand animation et casser le lien timeline. Isolez les règles scroll-driven dans des partials ou couches dédiées.
Navigateurs en 2026
Matrice utile quand la sécurité ou les achats demandent si le CSS scroll-driven est déjà « baseline web ».
| Moteur | Animations liées au scroll | Notes QA statique |
|---|---|---|
| Chromium | Fort | DevTools permet de scrubber les timelines ; idéal pour captures. |
| Firefox | Pris en charge (vérifier version) | Contrôlez les plages de vue avec les exemples de spec. |
| Safari stable | Sur macOS récents | Re-testez chaque mineure ; régressions sur barres de défilement. |
| WebKit mobile ancien | Souvent partiel | @supports et reduced motion obligatoires. |
Les noms ont dérivé pendant la standardisation : tenez une feuille de triche interne avec les propriétés réellement émises par PostCSS/lightningcss. Les docs obsolètes énervent plus la QA que le bug lui-même.
Les CDN peuvent servir d’anciennes feuilles sans règles timeline pendant des jours : versionnez les URL par hash de build pour éviter les faux positifs « Safari ne montre rien ».
Checklist Safari et Mac cloud
La CI Linux ne reproduit pas le travail du compositeur quand le défilement élastique dépasse la fin du document, ni l’antialiasing subpixel sur texte transformé pendant une timeline de vue. Bloquez 30 à 45 minutes par semaine sur du matériel Apple : Safari stable pour la signature contractuelle, puis Safari Technology Preview pour isoler une régression absente de Chromium. Notez aussi la mineure de macOS—des mises à jour GPU ont souvent été confondues avec des « régressions CSS ».
Checklist avant tag :
- Builds : inscrivez versions Safari et STP dans les PR dès que le CSS de scroll change.
- Zoom : 100 %, 125 %, 150 % ; les timelines ne doivent pas rogner les en-têtes sticky.
- Reduced motion : layouts statiques lisibles.
- Scroll imbriqués : panneaux
overflow: autosans combat avec la timeline racine. - Impression : pas d’opacité partielle résiduelle dans les styles print.
Si les achats bloquent du neuf, louez un Mac mini Apple Silicon cloud avec SSH pour le déploiement et VNC pour Safari interactif—environ 16,9 $/jour en rafales, moins cher qu’un prêt matériel express. Snapshot disque avant d’activer des flags WebKit expérimentaux.
Astuce ops : reproduisez la Content-Security-Policy et les hôtes de polices des préprod. Un léger écart de hauteur de ligne suffit à faire passer un scroll fluide pour une « animation cassée » lorsqu’une webfont arrive en retard.
Culture PR : joignez 30–60 s de vidéo Chromium/Safari côte à côte, la version de l’outil de build et le hash CSS minifié pour classer vite incident WebKit vs CMS.
Pensez à l’impression et au PDF exporté : un bloc @media print qui remet opacité et transformations par défaut évite les textes fantômes.
FAQ
Les animations CSS pilotées par le défilement remplacent-elles les écouteurs JavaScript ?
Elles remplacent beaucoup de boucles de mesure pour l’effet visuel pur, mais JavaScript reste nécessaire pour l’analytique, les gestes complexes ou l’état synchronisé aux API. Le CSS reste la couche présentation, le JS le comportement et les données.
Safari prend-il en charge scroll-timeline en 2026 ?
Les Safari récents sur macOS actuels l’incluent—vérifiez avec caniuse, les notes WebKit et votre build STP car les mineures bougent les cas limites. Les iOS anciens nécessitent des repli @supports.
Puis-je valider le CSS lié au scroll sans Mac physique ?
Les smokes WebKit automatisés aident, mais le défilement élastique, le rendu des polices et le compositeur diffèrent sur appareil réel. Prévoyez du temps hebdo sur matériel ou louez un Mac mini cloud en VNC.
Mac mini sur Apple Silicon reste la référence discrète pour WebKit : physique de scroll réaliste, piles de polices prévisibles, thermique faible quand Safari tourne des heures pour l’QA animation. MacHTML loue du bare metal SSH/VNC pour clore les régressions de scroll sans nouveau cycle CapEx—montez l’environnement pour le sprint, archivez la preuve, coupez quand la QA est verte.
QA Safari scroll sur Mac mini cloud
Louez un Mac mini Apple Silicon pour valider le CSS scroll-driven, comparer Safari stable et STP, et snapshotter avant expériences WebKit risquées.