Mask-composite - Propriété CSS

Schéma de la syntaxe de mask-composite.

Description de la propriété mask-composite.

Le masquage consiste à cacher certaines parties d'un élément en fonction d'une image (désignée comme étant le masque). Cette possibilité est relativement récente et est définie par le W3C dans le module "CSS Masking".

La propriété mask-composite définit comment interagissent les masques lorsque plusieurs sont appliqués à un élément. Plus précisément elle indique comment un des masques (dénommé "la source") interagit avec celui qui est directement en dessous de lui (nommé "la destination").

Si mask-composite est appliquée sur le dernier masque, elle est ignorée. Cette propriété ne s'applique que entre deux masques, elle ne définit pas l'interaction entre un masque et le contenu de l'élément.

L'ordre des masques est défini par la propriété mask-image ou par la propriété raccourcie mask. Par exemple la syntaxe suivante énumère deux masques. Le masque carre.png étant au dessus de cercle.png.
mask-composite doit donc être appliquée sur carre.png, qui sera alors la source, pour définir son interaction avec cercle.png, qui sera alors la destination. Appliquée sur cercle.png elle n'aura aucun effet.

Lorsqu'il y a plus de deux masques, mask-composite accepte plusieurs valeurs séparées par des virgules. Dans l'exemple ci-dessous, l'opérateur exclude est d'abord appliqué sur le masque 2, par rapport au masque 3, puis l'opérateur add est appliqué sur le masque 1 par rapport au résultat de la composition des masques 2 et 3.

L'application du masque résultat sur le contenu se fait après que toutes les opérations de combinaisons entre masque aient été réalisées.

Pour plus d'informations, reportez vous à ces explications sur les masques multiples. Vous trouverez également des informations générales sur la technique de masquage sur la page de mask.

Valeurs pour mask-composite.

Dans ces exemples de syntaxe, "la source" désigne le masque qui est au dessus, et "la destination" désigne celui qui est directement en dessous.

• mask-composite: add;

• mask-composite: subtract;

• mask-composite: intersect;

• mask-composite: exclude;

• mask-composite: clear; ⚠ mask-composite: copy; ⚠ mask-composite: xor; ⚠ mask-composite: Etc...

  De nombreuses valeurs, non standardisées par le W3C sont reconnues par certains navigateurs avec le préfixe -webkit-. La pérennité de ces valeurs n'est pas garantie : il est préférable de ne pas les utiliser. Notre simulateur ci-dessous les présente tout de même et permet de se rendre compte de leur effet.

• mask-composite: initial; (add) mask-composite: inherit; mask-composite: revert; mask-composite: revertLayer; mask-composite: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de mask-composite.

Deux animations ont été créées pour cet exemple. La première avec les valeurs standardisées par le W3C, et la deuxième avec les valeurs préfixées par -webkit-, donc non standards. Ceci veut dire que vous n'aurez pas le même résultat suivant le navigateur que vous utilisez.

Dans tous les cas, l'animation montre le logo du navigateur Edge, plus ou moins dévoilé en fonction de l'animation sur mask-composite.

Exemple interactif avec la propriété mask-composite.

L'exemple est composé de deux masques et d'un élément constitué en fait d'un simple carré gris (à droite). Les deux masques sont des cercles noirs totalement opaques, sur un fond totalement transparent. Leur code SVG est consultable. Les deux masques sont appliqués à l'élément de droite. Observez l'effet de la propriété mask-composite.

On note aussi que le navigateur Chrome accepte plus de valeurs pour la propriété mask-composite en la faisant précéder du préfixe -webkit-, mais ces valeurs ne sont pas standards.

Compatibilité des navigateurs avec mask-composite.

La propriété mask-composite est relativement bien prise en charge par les navigateurs, mais il y a cependant quelques exceptions. Comme on l'a vu dans les différents exemples, pour que le fonctionnement soit correct sur Chrome, sur Edge, et probablement sur d'autres navigateurs, il est nécessaire de doubler la syntaxe en ajoutant le préfixe -webkit-.

De plus, certaines valeurs de cette propriété ne sont pas standardisées, et reconnues par certains navigateurs seulement. On évitera d'utiliser mask-composite avec ces valeurs.

Remarques :

(1) Nécessite le préfixe -webkit-.
Supporte les propriétés mask-image et mask-box-image mais pas les autres propriétés relatives aux masques.

(2) Voir aussi la propriété -webkit-mask-composite qui offre des fonctionnalités comparables, avec des valeurs différentes.

1

Masquage par
une image

2

Propriété
mask-composite

Estimation de la prise en charge globale.

92%

92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

2

QQ Browser

1

Baidu Browser

1

Samsung Internet

2

Safari

2

Safari sur IOS

2

Chrome

2

Opéra

2

Edge

2

Chrome pour Androïd

2

Firefox pour Androïd

Firefox

Androïd Brower

2

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Historique de la propriété mask-composite

• Module CSS - Masquage - Niveau 1

  Introduction des techniques de masquage par image. Et première définition de la propriété résumée mask.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Au sujet des techniques de masquage, voir aussi.

La propriété mask-composite et les propriétés énumérées ci-dessous sont présentées dans la spécification qui standardise tout ce qui concerne le masquage : CSS Masking Module (Module CSS - Masquage).

Propriétés :