mask-clip - Propriété CSS
Résumé des caractéristiques de la propriété mask-clip
border-box
| content-box
| padding-box
| fill-box
| stroke-box
| view-box
| no-clip
border-box
mask-clip
passe d'une valeur à l'autre sans transition.Description de la propriété mask-clip
.
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
.
border-box
L'élément est visible en entier, avec sa bordure et les marges intérieures
padding-box
Les marges intérieures sont visibles, mais pas la bordure
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:
;
- 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
.
padding
) de 20 pixels.
Prise en charge par les navigateurs (compatibilité).
mask-clip
mask-clip
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.