Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

mask-clip - Propriété CSS

mask-clip

Résumé des caractéristiques de la propriété mask-clip

Description rapide
Définit la zone concernée par le masquage.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
border-box | content-box | padding-box | fill-box | stroke-box | view-box | no-clip
Pourcentages
Ne s'appliquent pas.
Valeur initiale
border-box
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété mask-clip passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

Description de la propriété mask-clip.

La propriété mask-clip n'est pas encore bien reconnue par tous les navigateurs (2022). Doublez la syntaxe avec la variante -webkit-mask-clip pour améliorer la compatibilité.

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.

Contenu du bloc
L'élément original, sans masquage
Contenu du bloc
border-box
L'élément est visible en entier, avec sa bordure et les marges intérieures

Contenu du bloc
padding-box
Les marges intérieures sont visibles, mais pas la bordure

Contenu du bloc
content-box
La bordure et les marges intérieures sont masquées

 

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

Valeurs pour mask-clip.

mask-clip:
Schéma syntaxique de la propriété mask-clipSyntaxe de mask-clip (propriété CSS) et liste des valeurs acceptées, pour HTML et SVG. content-box content-box padding-box padding-box border-box border-box fill-box fill-box stroke-box stroke-box view-box view-box no-clip no-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.

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

  • mask-clip: border-box;

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

  • mask-clip: no-clip;

    Aucune découpe n'est effectuée.

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

    Ces trois valeurs sont applicables aux éléments du type SVG.

  • mask-clip: initial; mask-clip: inherit; mask-clip: revert; mask-clip: revert-layer; mask-clip: unset;

    La valeur initiale est : border-box.

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.

Le paramètre el qui figure dans les exemples de code ci-après, représente l'élément de la page sur lequel on souhaite travailler.

Modifier la valeur de mask-clip en Javascript.

Voici deux exemples de code Javascript pour modifier la valeur de la propriété mask-clip pour l'élément el. Javascript accepte une syntaxe avec la notation typique de css, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case, plus courante en Javascript (une majuscule pour séparer les mots).


function setMaskClip(el) {
el.style['mask-clip']='no-clip';
// ou
el.style.maskClip='no-clip';
}

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.


function getMaskClip(el) {
alert(el.style['mask-clip']);
// ou
alert(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.


function getCalcMaskClip(el) {
alert(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.


function setMaskClip(el) {
$(el).css('mask-clip','content-box');
// ou
$(el).css('maskClip','content-box');
}

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


function getCalcMaskClip(el) {
alert($(el).css('mask-clip'));
// ou
alert($(el).css('maskClip'));
}

Simulateur.

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.

mask-clip :
Ce bloc a des marges de 20 pixels, une bordure de 10 pixels, et une marge intérieure (padding) de 20 pixels.

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Compatibilité des navigateurs avec les techniques de masquage, consistant à découper un élément d'après une image ou une forme géométrique.
Colonne 2
Support de la propriété mask-clip
1
Masking
2
mask-clip
Estimation de la prise en charge en pourcentage du parc actuel.
73%
95%

Navigateurs 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-clip.

Les spécifications CSS éditées par le W3C sont organisées en modules. mask-clip fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la partie visible de l'élément (découpage).
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Résumé des paramètres de masquage.
Définit tous les paramètres d'un masque pour la bordure d'un élément.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Définit le mode de masquage (couche alpha, luminance...)
Définit la référence pour le positionnement du masque.
Position du masque.
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Fixe les dimensions du masque.