`@starting-style` - Directive CSS

@starting-style

Résumé des caractéristiques de la directive `@starting-style`

Description rapide

Définit les valeurs de départ pour les propriétés qui vont être soumises à une transition.

Statut

Standard

Module W3C

Les transitions en CSS

Références (W3C)

CSS Transitions - Level 2

Statut du document: WD (document de travail)

Description de la directive `@starting-style`.

La directive @starting-style sert à définir les valeurs de départ des propriétés participant à une transition. Cette directive n'est nécessaire que au chargement de la page, ou lorsque l'élément n'est pas affiché au moment où la page apparaît, comme une boîte dialog ou un élément manipulé ou créé par Javascript.

Dans l'exemple ci-dessous, nous avons deux blocs, masqués au départ, qui peuvent être affichés par des boutons. Pour le premier une transition est définie sur la couleur du fond. On voit que cette transition ne démarre pas au moment de l'affichage. Le deuxième bloc comporte aussi une transition sur la couleur du fond, mais en plus la directive @starting-style est utilisée.

Cet élément est affiché par un clic sur un bouton. Bien qu'une transition soit définie sur background, on voit qu'elle ne se déclenche pas.

Cet élément est également affiché par un clic sur un bouton, mais la directive @starting-style permet d'avoir une transition.

La directive @starting-style peut être utilisée de deux façons. Soit au premier niveau : elle regroupe les styles de depart de plusieurs sélecteurs. Soit, incluse dans le bloc d'un sélecteur. Dans ce cas, elle ne peut définir que les styles de départ de ce sélecteur.


	En tant que bloc autonome
	@starting-style {
	   selector {
	      ...
	   }
	   selector {
	      ...
	   }
	}
	
	Niché dans un autre bloc
	selector {
	   ...
	   @starting-style {
	      ...
	   }
	}

Attention ! Dans tous les cas, les sélecteurs définis dans une directive @starting-style ont la même spécificité que les sélecteurs normaux. Il faut donc positionner le bloc avec @starting-style après les autres styles, faute de quoi ils seront systématiquement écrasés.

Cet élément n'a pas de transition car les valeurs définies dans @starting-style sont systématiquement écrasés par les valeurs définies dans l'élément.

Cet élément s'affiche progressivement car la directive @starting-style est écrite après les styles standards.

@starting-style ne concerne que les transitions CSS. Elle n'est pas nécessaire avec les animations en CSS car les valeurs de départ et d'arrivée sont définies par la directive @keyframes.

Exemples d'utilisation de la directive `@starting-style`.

Transition sur une boîte de dialogue.

Les boîte de dialogue construites avec la balise dialog peuvent être soumises à une transition lors de leur affichage, mais là aussi, les valeurs de départ des propriétés ne sont pas définies sans la directive @starting-style.

Dans cet exemple, nous souhaitons que la fenêtre de dialogue ne se contente pas d'apparaître à l'écran mais semble provenir de la gauche de celui-ci. La position initiale de la boîte (avant affichage) doit donc être quelque chose de négatif, par exemple translate:-100vw;.

Remarque : nous avons utilisé ici la syntaxe où @starting-style constitue un bloc de premier niveau.

Pour plus d'informations sur la balise dialog voyez la page sur le sélecteur pseudo-classe :popover-open.

Définir les valeurs de départ au chargement de la page.

Lorsque l'on souhaite animer un élément au chargement de la page, il faut définir la valeur de départ des propriétés, les valeurs finales étant définies dans les styles de l'élément lui-même. Rafraîchissez la page si vous n'avez pas eu le temps de voir la transition, .

Dans cet exemple, un élément semble sortir de rien pour grandir jusqu'à sa taille normale (propriété scale). La valeur de départ pour scale est définie par @starting-style comme on peut le voir sur le code CSS.

Ce bloc apparaît suivant un effet de zoom au moment de l'affichage de la page.

Compatibilité des navigateurs avec la directive `@starting-style`.

La compatibilité est bonne sur tous les grands navigateurs, que ce soit sur PC, sur MacIntosh, ou sur mobile.

Colonne 1

Traitement correct par les navigateurs de la directive @starting-style qui est utilisée pour définir les valeurs initiales d'une transition, y compris pour les éléments qui ne sont pas dans le DOM au moment du chargement de la page.

Directive
@starting-style

Estimation de la prise en charge globale.

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Chrome

Edge

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@starting-style`.

Les transitions en CSS - Niveau 2

Le niveau 2 de la spécification sur les transitions ajoute la possibilité d'appliquer une transition sur une propriété discrète.
Une nouvelle directive @starting-style permet de définir les valeurs de départ pour les valeurs des propriétés . Il est maintenant possible d'appliquer une transition sur des éléments qui passent de l'état invisible à l'état visible.

Concernant @starting-style. Introduction de la directive @starting-style pour palier à la difficulté de faire des transitions sur les éléments créés après le chargement de la page.

05 Septembre 2023
Document de travail.