Mask-clip - Propriété CSS

Schéma syntaxique de mask-clip.

Description de la propriété mask-clip.

Le masquage consiste à faire interagir deux éléments entre eux. L'un d'eux, dénommé le masque, cachant certaines parties de l'autre. Le masquage est proportionnel au canal alpha du masque. Il est donc possible d'utiliser des masques avec des zones semi-transparentes.

La propriété mask-clip définit la zone de l'élément qui sera concernée par le masque. Les parties de l'élément à l'extérieur de cette zone ne seront pas affichées. mask-clip est sans effet si aucun masque n'est appliqué à l'élément (voir mask-image ou mask).

Pour que mask-clip soit opérationnelle, le masque doit être un fichier PNG ou un dégradé mais pas un fichier SVG. Pour les masques écrits en SVG vous devrez utiliser les attributs de la balise mask : x, y, width, height et maskUnits. C'est moins pratique que CSS.

Voici un exemple. L'élément ci-dessous comporte une bordure de 10 pixels et des marges intérieures de 20 pixels (padding). Un masque lui est appliqué, ce qui donne cet effet de pointillisme. Voici ce qui sera visible en fonction de la valeur affectée à mask-clip. Les parties non soumises au masque ne sont pas affichées.

Pour des explications plus complètes sur le masquage, reportez-vous à la propriété raccourcie mask.

Valeurs pour mask-clip.

• mask-clip: border-box;

  Avec la valeur border-box le contenu, les marges intérieures et la bordure de l'élément sont affectés par le masque. C'est la valeur par défaut.

  Contenu
  mask-clip:border-box;
• mask-clip: padding-box;

  Le contenu et les marges intérieures (padding) de l'élément sont affectés par le masque, mais pas la bordure.

  Contenu
  mask-clip:padding-box;
• mask-clip: content-box;

  Seul le contenu de l'élément est affecté par le masquage, à l'exclusion de ses marges intérieures (padding) et de sa bordure.

  Contenu
  mask-clip:content-box;
• mask-clip: no-clip;

  La valeur no-clip ne change rien à la zone d'application du masque : aucune découpe n'est effectuée.

  Contenu
  mask-clip:no-clip;
• mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box;

  Ces trois valeurs sont applicables aux éléments du type SVG. En HTML, on a les équivalences suivantes :

  • fill-box est équivalent à content-box.
  • stroke-box est équivalent à border-box.
  • view-box n'a pas d'équivalent. Il se comporte comme border-box ou no-clip.
  Contenu

  
  clip-mask:fill-box;

  Contenu

  
  clip-mask:stroke-box;

  Contenu

  
  clip-mask:view-box;
• mask-clip: text; ⚠

  La zone d'application du masque est limitée à la forme du texte de l'élément. Cette valeur n'est pas reconnue par tous les navigateurs.

  Contenu
  mask-clip:text;
• mask-clip: border-box, content-box;

  Lorsque plusieurs sont indiquées, séparées par des virgules, mask-clip affecte chacune des valeurs à un masque. Voir la propriété mask pour plus d'informations sur les masques multiples.

  L'exemple ci-dessous comporte deux masques. Le premier, un dégradé de couleur, reçoit la valeur border-box. La bordure est effectivement en partie masquée vers le bas. Le deuxième est une image PNG (un quadrillage) qui ne s'applique que sur padding-boc : la bordure n'est pas touchée.

  Contenu
  mask-clip:border-box,padding-box;
• mask-clip: initial; (border-box) mask-clip: inherit; mask-clip: revert; mask-clip: revert-layer; mask-clip: revert-rule; mask-clip: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, revert-rule, unset.

Animation de la propriété mask-clip.

Voici un exemple d'animation pour la propriété mask-clip, qui se traduit par un clignotement de la bordure.

Manipulation de la propriété mask-clip par programme.

Modifier la valeur de mask-clip en Javascript.

Voici deux exemples de code Javascript pour modifier la valeur de la propriété mask-clip. Javascript accepte une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case, plus courante en Javascript.

let el = document.getElementById('id'); el.style['mask-clip'] = 'content-box'; // ou let el = document.getElementById('id'); el.style.maskClip = 'content-box';

Lire en Javascript la valeur de mask-clip.

Ce code récupère la valeur de la propriété mask-clip si elle a été affectée directement à l'élément lui-même, dans le code HTML, avec l'attribut style et non pas en CSS, en passant par un sélecteur. C'est donc la code symétrique du précédent.

let el = document.getElementById('id'); let value = el.style['mask-clip']; // ou let el = document.getElementById('id'); let value = el.style.maskClip;

Lire la valeur calculée de mask-clip en Javascript.

La valeur calculée est celle qui a été affectée à l'élément via un sélecteur quelconque, ou à défaut, celle qui est obtenue suivant le mécanisme d'héritage. Si la valeur n'est affectée nulle part, ce sera la valeur initiale : border-box.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('mask-clip');

Lire ou modifier la valeur de la propriété mask-clip avec JQuery.

Comme an Javascript, les écritures en kebab-case et en camel-case sont acceptées.


// Lire la valeur :
$('#id').prop('mask-clip');
// Écrire la valeur :
$('#id').prop('mask-clip', 'content-box');
$('#id').prop('{mask-clip': 'content-box'});


Lire la valeur calculée de la propriété mask-clip avec JQuery.

let value = $('#id').css('mask-clip');

Autres exemples de code.

Allez voir d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété mask-clip et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée, ce qui, dans le cas de mask-clip, ne fera pas de différence car la propriété n'accepte que des valeurs prédéfinies.

Simulateur avec la propriété mask-clip.

Le bloc de démonstration ci-dessous a des marges de 20 pixels, une bordure de 10 pixels, une marge intérieure (padding) de 20 pixels, et un fond bleu. Cela permet de visualiser les parties qui sont visibles et celles qui sont masquées en fonction de la valeur donnée à mask-clip.

Prise en charge de mask-clip par les navigateurs.

La propriété mask-clip est bien reconnue par tous les navigateurs récents.

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.

1

Masquage par
une image

2

Propriété
mask-clip

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

QQ Browser

1

Baidu Browser

1

Samsung Internet

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Historique de la propriété mask-clip.

• Module CSS - Masquage - Niveau 1

  Ce module de spécification décrit deux moyens pour cacher partiellement ou totalement des portions d'éléments visuels : le masquage et le rognage.
  Le masquage consiste à utiliser un autre élément graphique ou une image comme masque.
  Le rognage décrit la région visible des éléments visuels. La région peut être décrite en utilisant certains éléments graphiques SVG ou des formes simples. Tout ce qui se trouve en dehors de cette région n'est pas rendu.

  Concernant mask-clip Introduction des techniques de masquage par image. Et définition initiale de la propriété mask-clip.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

La propriété mask-clip est définie dans la spécification qui standardise tout ce qui concerne le masquage et qui s'appelle Module CSS - Masquage (Module CSS - Masquage). Les propriétés suivantes sont également présentées dans ce module :

Propriétés :