CSS @starting-style 2026 : États d'entrée HTML statiques, approbation de Safari, Cloud Mac

Les équipes marketing proposent toujours des microsites HTML statiques où les menus, les tiroirs et les bannières de consentement « apparaissent » sans environnement d'exécution de framework. Jusqu'à@style de départ, les auteurs ont simulé les premières images avec des classes dupliquées, en ligneopacity:0hacks, ou JavaScript qui basculait les attributs sur l'image d'animation suivante. La nouvelle règle vous permet de déclarer à quoi ressemble un élémentbeforela première mise à jour du style après qu'il soit devenu visible, puis comptez sur les transitions ordinaires pour le reste. Ce guide cible les compilésHTML/CSS statiquebundles, associe la fonctionnalité avecModèles d'API Popover que vous expédiez déjà, et explique pourquoiSafari/WebKitl’approbation du matériel reste obligatoire.

Vous repartirez avec une matrice de navigateur, des garde-fous numériques (limites de durée, distances de traduction maximales), une politique de réduction des mouvements et une liste de contrôle Safari hebdomadaire adaptée à un véhicule loué.Mac-mini budget.

Modèle mental : première image vs état ouvert

Lorsqu'un popover s'ouvre, le moteur le promeut vers la couche supérieure et applique des styles ouverts. Sans @starting-style, le premier cadre peint montre déjà l'opacité et la transformation « ouvertes », donc toute transition depuis un état caché doit être simulée. @starting-style introduit un point de départ synthétique pour cette première image uniquement. Après la peinture, la cascade recalcule selon les règles ouvertes normales et votretransitionles propriétés animent le delta.

Ceci est important pour les sites statiques car vous pouvez conserver un DOM identique entre les aperçus du CMS et la production : aucun supplément.is-enteringclasse gérée par JS sur mesure. L'accessibilité s'améliore car les contours visibles au focus peuvent s'aligner au même moment que l'opacité s'estompe.

Limitation : @starting-style n'invente pas la mise en page. Si l'élément étaitdisplay:none, il participe toujours aux mêmes règles du buis qu'auparavant ; vous stylisez la première image une fois qu'elle est affichée.

La télémétrie des systèmes de conception publics au début de 2026 suggère à peu près5 à 8 %des sessions atterrissent toujours sur les navigateurs sans support : prévoyez une amélioration progressive.

Les concepteurs doivent annoter les chronologies Figma avec des jetons « de démarrage » ou « stables » afin que les ingénieurs les mappent directement aux blocs CSS au lieu de deviner les courbes d'assouplissement.

Syntaxe de création avec transitions

Un motif minimal pour un panneau popover :

.panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}
@starting-style {
  .panel {
    opacity: 0;
    transform: translateY(8px);
  }
}

Gardez les durées sous320 mspour les surfaces d'interface utilisateur ; les fondus plus longs semblent lents sur les écrans iPhone à rafraîchissement élevé. Limiter le déplacement vertical à8 à 12 pixelspour les menus et16 pixelspour les feuilles modales afin que le mouvement reste subliminal.

En combinant avecpopover="auto", n'oubliez pas le timing de rejet de la lumière : Safari peut fusionner les images différemment de Chromium si les filtres d'arrière-plan sont activés : testez les deux moteurs.

Pour les éléments de dialogue, associez-les à::backdropeffectuez les transitions avec prudence ; La toile de fond peint sur son propre calque et peut se désynchroniser du mouvement du panneau si les durées diffèrent de plus de40 ms.

Les générateurs statiques doivent émettre ces blocs une fois par composant partiel ; évitez de dupliquer des sections identiques de style @starting sur des dizaines de pages avec des noms de classe divergents.

Matrice du navigateur en 2026

Engine	@style de départ	Focus sur l’assurance qualité statique
Chrome 117+	Supported	DevTools affiche les états de démarrage et d'ouverture dans l'inspecteur d'animation.
Firefox 129+	Supported	Avertissements forts lorsque les transitions répertorient les propriétés non animables à partir des valeurs de départ.
Safari 17.4+	Supported	Testez à nouveau chaque version mineure ; STP peut différer pour les combinaisons toile de fond + popover.
Kit Web hérité	None	Fournissez une opacité uniquement ou une solution de secours ouverte instantanée.

Contrôle qualité Safari sur un Mac mini cloud

Playwright WebKit détecte les erreurs d'analyse, mais pas les flashs subtils d'une image lorsque Dynamic Type met à l'échelle les polices. Allouer25 à 40 minutespar version sur silicium Apple : Safari stable pour la signature contractuelle, Safari Technology Preview lors de la division des régressions.

Si l'approvisionnement en matériel est lent, louez un cloudMac-minipour le sprint. Les hôtes MacHTML Apple Silicon coûtent généralement près de16,9 $/jour, incluent SSH pour la diffusion de bundles statiques et VNC pour la révision interactive des animations, ce qui est moins cher que le prêt d'ordinateurs portables du jour au lendemain.

Fabrication de miroirsfont-display, les URL des polices Web etbackdrop-filterparamètres lors de l'aperçu ; les polices incompatibles modifient les métriques de glyphes et font apparaître les transformations « fausses » même lorsque CSS correspond octet par octet.

Capturez des enregistrements d'écran au ralenti à120 images par secondelorsque le marketing conteste un « flash à image unique » ; Le compositeur GPU de Safari émet occasionnellement une image lumineuse lors de la promotion des calques.

Les opérations doivent lier les clés de cache CDN au hachage CSS qui contient les règles de style @starting afin que les déploiements partiels n'associent jamais du HTML obsolète avec de nouveaux jetons d'animation.

Mouvements réduits et sécurité vestibulaire

Enveloppez les grandes traductions dans@media (prefers-reduced-motion: reduce)et le mouvement du capuchon vers2 à 4 pixelsavec des durées plus courtes. Offrez une ouverture instantanée aux utilisateurs qui activent également l'augmentation du contraste sur macOS.

Ne comptez pas uniquement sur @starting-style pour respecter les directives de mouvement WCAG : vous devez toujours respecter les paramètres utilisateur.

Liste de contrôle des tests : vérifiez que les anneaux de mise au point restent visibles pendant l'image de départ, confirmez que les lecteurs d'écran entendent les changements d'état même lorsque l'opacité est nulle pour une image et exécutez VoiceOver après chaque refactorisation d'animation.

Internationalisation : les sauts de ligne CJK peuvent modifier la hauteur du panneau entre les paramètres régionaux ; vérifier que les transformations ne coupent pas les descendants lorsquetranslateYest appliqué.

Les examinateurs de sécurité s'inquiètent parfois du détournement de clics lorsque l'opacité commence à zéro : assurez-vous que les fenêtres de tests de détection ne sont pas utilisées de manière abusive ; @starting-style ne modifie pas la sémantique du ciblage d'événements.

Couches en cascade et pièges de spécificité

Placez les blocs de style @starting dans le même@layercomme styles de composants. Si les utilitaires se trouvent dans une couche supérieure, ils peuvent accidentellement remplacer l'opacité de départ et interrompre l'effet. Ordre des couches de documents dans votre guide de style :reset, components, utilitiesest une référence commune.

Lorsque le marketing injecte des styles en ligne en cas d'urgence, apprenez-leur à ne jamais définirtransition:nonesur les shells animés : cela désactive le pont entre le style de démarrage et les états ouverts.

Versionnez vos partiels : ajoutez un en-tête de commentaire à chaque fois que les blocs @starting-style changent afin que le blâme de Git reste lisible pendant les audits.

Combinez-les avec les requêtes de conteneur uniquement après la mesure : le confinement imbriqué peut forcer des passes de mise en page supplémentaires qui décalent le timing de la première image de quelques millisecondes, ce qui est généralement correct, mais visible sur les appareils à faible consommation.

Enfin, ajoutez une règle de charpie qui interditanimationun raccourci sur le même sélecteur que @starting-style à moins que les durées ne soient explicitement revues - les réinitialisations abrégées peuvent encombrer les listes de transition en silence.

Performance et discipline du fil conducteur

Chaque nouvelle surface animée augmente le travail du compositeur. Sur les ordinateurs portables Apple Silicon, cela est rarement catastrophique, mais sur les minis sans ventilateur servant à la fois des captures d'écran Safari QA et CI, conservez les popovers animés simultanés ci-dessous.threepar fenêtre pour éviter les chutes de cadre au-dessus8 mspendant le défilement.

Prefer transform and opacitypour les déclarations de style @starting ; éviter d'animerbox-shadowrayon de flou à partir du bloc de départ car il force les chemins lourds à repeindre sur WebKit.

Lorsque le marketing demande des effets de « flou », simulez-les avec opacité sur un pseudo-élément qui porte déjà un flou statique, ce qui est moins coûteux que d'animer des noyaux de filtre image par image.

Documentez ces budgets dans le README de votre composant afin que les futurs changements de marque héritent du même contrat de performance au lieu de réapprendre les limites du compositeur dans un délai serré.

FAQ

@starting-style remplace-t-il l'API Popover ?

Non : le popover gère l'interaction et la couche supérieure ; @starting-style gère la peinture de la première image.

Safari est-il prêt pour la production ?

Oui sur les versions prises en charge : planifiez toujours le contrôle qualité du matériel pour chaque version.

Combien de temps de contrôle qualité ?

Prévoyez 25 à 40 minutes de mise au point Safari plus 15 minutes pour réduire les mouvements.

Apple Silicon Mac minireste le moyen le plus rapide de régler les débats sur l'animation WebKit : composition native, thermiques prévisibles lors de longues sessions d'enregistrement et bascules d'accessibilité macOS que les machines virtuelles Linux ne peuvent pas émuler.MacHTMLloue des hôtes cloud Mac mini avec SSH/VNC afin que les équipes de sites statiques puissent valider les piles de type @starting, popover et de dialogue sans autre cycle CapEx : provision pour le sprint, capture de preuves, démontage lorsqu'elles sont vertes.