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.

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).

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: 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: 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: border-box;

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

  Contenu
• mask-clip: no-clip;

  Aucune découpe n'est effectuée.

  Contenu
• 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;

Valeurs communes :

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');

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.


$('#id').css('mask-clip', 'content-box');
// ou
$('#id').css('maskClip', '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.

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.

92%

95%

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

  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 s'appelle CSS Masking Module (Module CSS - Masquage). Les propriétés suivantes sont également présentées dans ce module :

Propriétés :