mask-composite - Propriété CSS
Résumé des caractéristiques de la propriété mask-composite
add | exclude | intersect | subtractaddmask-composite passe d'une valeur à l'autre sans transition.Schéma syntaxique de mask-composite.
mask-compositeLes liens du schéma donnent accès à plus de détails
Description de la propriété mask-composite.
mask-composite n'est pas encore bien reconnue par tous les navigateurs (2022).
La fonctionnalité de masquage en elle-même pose encore beaucoup de problèmes de compatibilité.
Doublez les syntaxes avec la variante -webkit-mask-composite pour améliorer la compatibilité.
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.
mask-image: url('carre.png'), url('cercle.png');
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.
mask-image: masque1, masque2, masque3;
mask-composite: add, exclude;
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.
Syntaxes 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; mask-composite:inherit; mask-composite:revert; mask-composite:revert-layer; mask-composite:unset;La valeur initiale est :
add
Animation de la propriété 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.
Simulateur.
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.
(premier exemple)
Prise en charge par les navigateurs (compatibilité).
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.
mask-composite
mask-compositeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que mask-composite.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-composite fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.