Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété paint-order permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.

Syntaxe

/* Normal */
paint-order: normal;

/* Valeur unique */
/* le contour est dessiné en premier, puis */
/* le remplissage puis les marqueurs */
paint-order: stroke;
/* les marqueurs sont dessinés en premier, */
/* suivis du remplissage et du contour */
paint-order: markers;

/* Plusieurs valeurs */
/* Le contour est dessiné en premier puis */
/* le remplissage puis les marqueurs */
paint-order: stroke fill;
/* Les marqueurs sont dessinés en premiers */
/* puis le contour, puis le remplissage */
paint-order: markers stroke fill;

La valeur par défaut, utilisée si aucune valeur n'est fournie, sera fill, stroke, markers.

Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.

Note : Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés marker-* (e.g. marker-start) ou l'élément <marker>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre stroke et fill importe.

Valeurs

normal
Les différents niveaux sont appliqués dans l'ordre normal.
stroke,
fill,
markers
Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.

Syntaxe formelle

normal | [ fill || stroke || markers ]

Exemples

HTML

<p>Contour en avant</p>

<p class="stroke-behind">Contour derrière</p>

CSS

p {
  font-family: sans-serif;
  font-size: 5rem;
  font-weight: bold;
  margin: 0;
  -webkit-text-stroke: 5px red;
}

.stroke-behind {
  paint-order: stroke fill;
}

Résultat

Spécifications

Spécification État Commentaires
Scalable Vector Graphics (SVG) 2
La définition de 'paint-order' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initialenormal
Applicabilitééléments textes
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 60IE Aucun support NonOpera Aucun support NonSafari Support complet OuiWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 60Opera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,