Tutoriel CSS : La propriété paint-order

La propriété CSS paint-order permet de définir l'ordre dans lequel les éléments d'une page seront affichés lorsqu'ils se superposent. Elle est particulièrement utile pour les éléments qui ont une transparence ou une opacité différente.

Syntaxe générale

La syntaxe générale de la propriété paint-order est la suivante :

			selector {
				paint-order: valeur1 valeur2 ...;
			}

Valeurs par défaut	normal
Inherited:	oui
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.paintOrder="stroke fill"

Le sélecteur peut être n'importe quel élément HTML. La propriété paint-order accepte plusieurs valeurs séparées par des espaces. Les valeurs possibles sont : fill, stroke et markers.

Valeurs possibles

fill : cette valeur indique que l'élément sera peint en premier plan.
stroke : cette valeur indique que les bords de l'élément seront peints en premier plan.
markers : cette valeur indique que les marqueurs (comme les flèches) de l'élément seront peints en premier plan.

Exemples pratiques d'utilisation

Exemple 1

Dans cet exemple, nous avons deux cercles superposés. Le premier est rempli de rouge et le second est rempli de bleu avec une transparence de 50%. La propriété paint-order est utilisée pour que le cercle rouge apparaisse en premier plan.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>la propriété paint-order css</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         
<style> 
.circle {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
		.circle1 {
			background-color: red;
			z-index: 1;
		}
		.circle2 {
			background-color: rgba(0, 0, 255, 0.5);
			position: relative;
			top: -50px;
			left: 50px;
			paint-order: fill stroke markers;
			z-index: 2;			
		}

</style>
</head>
<body>

<h1>La propriété paint-order css</h1>
<div style="position: relative;">
	<div class="circle circle1"></div>
	<div class="circle circle2"></div>
</div>
</body>
</html>

Exemple 2

Dans cet exemple, nous avons un cercle rempli de rouge avec un contour noir et un triangle rempli de bleu avec une transparence de 50%. La propriété paint-order est utilisée pour que le contour noir du cercle apparaisse en premier plan, puis le cercle rouge, puis le triangle bleu.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>la propriété paint-order css</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         
<style> 
	.circle {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: red;
		border: 2px solid black;
		paint-order: stroke fill markers;
	}
	.triangle {
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid rgba(0, 0, 255, 0.5);
		position: relative;
		top: -50px;
		left: 10px;
		z-index: 2;
		paint-order: fill stroke markers;
	}
</style>
</head>
<body>

<h1>La propriété paint-order css</h1>
<div style="position: relative;">
	<div class="circle"></div>
	<div class="triangle"></div>
</div>
</body>
</html>

Exemple 3

Dans cet exemple je vous suggere de changer l'ordre des trois valeurs " fill, stroke et markers" pour voir l'effet que ça donne

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>la propriété paint-order css</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         
<style> 
#star {
  fill: lime;
  fill-rule: evenodd;
  stroke: purple;
  stroke-width: 8px;
  paint-order: fill stroke markers;
}
</style>
</head>
<body>

<h1>La propriété paint-order css</h1>
<p> changer l'ordre des trois valeurs " fill, stroke et markers" pour voir l'effet que ça donne</p>
<svg width="250" height="250">
  <marker
    id="dot"
    viewBox="0 0 10 10"
    refX="5"
    refY="5"
    markerWidth="5"
    markerHeight="5">
    <circle cx="5" cy="5" r="5" fill="red" />
  </marker>
  <polygon 
    id="star" 
    points="120,30 60,218 210,98 30,98 180,218"
    marker-mid="url(#dot)"
    marker-end="url(#dot)"/>
</svg>
</body>
</html>

Astuces et conseils d'utilisation

Il est important de définir une valeur pour la propriété z-index pour que la propriété paint-order soit efficace.
Il est recommandé d'utiliser la propriété paint-order avec précaution, car elle peut affecter la lisibilité du contenu. Il est important de tester différents ordres pour trouver le meilleur résultat.
La propriété paint-order ne fonctionne pas sur tous les navigateurs, il est donc important de tester le code sur plusieurs navigateurs pour s'assurer que le résultat est le même.

Exemple d’utilisation de la propriété paint-order sur des textes

Cette propriété est particulièrement utile pour les textes SVG, en particulier les éléments qui ont à la fois un remplissage et un tracé. Comme le montre l'exemple ci-dessous :

Exemple : Copier le code

	
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>la propriété paint-order css</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         
<style> 
text {
  font-family: sans-serif;
  font-size: 75px;
  stroke-linejoin: round;
  text-anchor: middle;
  fill: #f8a100;
  stroke: #000;
  stroke-width: 6px;
}
</style>
</head>
<body>

<h1>La propriété paint-order css sur un texte</h1>
<svg width="900" height="150" viewBox="0 0 900 150">
  <text x="250" y="100">*CSS-Tricks</text>
</svg>
</body>
</html>

Ce qui donne :

Ops, ce tracé est très mauvais. Il ne fait que 6px de large, mais il couvre en quelque sorte le remplissage(fill). C'est parce que, par défaut, le remplissage est peint en premier suivi du tracé.
Mais si nous inversons ce processus à l'aide de la propriété paint-order, le remplissage est peint en dernier et couvre les parties disgracieuses du tracé.

Pour cela remplacer le code css ci-dessus par le code css suivant :

Exemple : Copier le code

text {
  font-family: sans-serif;
  font-size: 75px;
  stroke-linejoin: round;
  text-anchor: middle;
  fill: #f8a100;
  stroke: #000;
  stroke-width: 6px;
  paint-order: stroke fill;
}

Dans ce code nous avons ajouté la propriété css paint-order :stroke fill ;

WAO, c'est tellement mieux ! Nous pouvons lire le texte et le trait est plus fidèle à la forme des caractères qu'auparavant.

Voilà, vous savez maintenant comment utiliser la propriété CSS paint-order pour contrôler l'ordre d'affichage des éléments superposés dans une page web. N'hésitez pas à expérimenter avec cette propriété pour obtenir des résultats intéressants et créatifs.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.