Mask-size - Propriété CSS

Schéma syntaxique de mask-size.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length sont des valeurs numériques positives ou nulles, suivies d'une des unités de dimension.
• % sont des pourcentages calculés par rapport à la largeur ou la hauteur de l'élément.

Description de la propriété mask-size.

Le masquage et une technique qui consiste à cacher certaines parties d'un élément d'après une image définie comme étant le masque. Ce dernier peut aussi être un fichier SVG.

La propriété mask-size définit les dimensions du masque. Doit-il être agrandi ou rétréci pour couvrir l'élément qu'il doit masquer ?

Pour plus d'information sur la technique de masquage, reportez-vous à la propriété raccourcie mask.

Valeurs pour mask-size.

• mask-size: auto;

  Le masque est utilisé avec ses dimensions originales.
  Si le masque n'a pas de dimensions propres (dégradé, fichier SVG) les dimensions du masque seront ajustées sur celles de l'élément masqué.

• mask-size: cover;

  Le masque est agrandi ou réduit pour couvrir toute la zone à masquer. Les proportions du masque sont conservées : le masque peut déborder verticalement ou horizontalement.

  La zone à masquer peut inclure la bordure, les marges intérieures, ou seulement le contenu. Voir à ce sujet la propriété mask-origin.

  
  mask-size:cover;
mask-origin:border-box;

  
  mask-size:cover;
mask-origin:padding-box;

  
  mask-size:cover;
mask-origin:content-box;

  Le masque est un cercle. Dimensionné avec cover, son diamètre sera égal à la plus grande des dimensions de la zone à masquer. Il débordera dans l'autre direction (le masque lui-même étant invisible, cela ne peut pas être gênant)..

• mask-size: contain;

  Le masque est agrandi ou réduit pour tenir entièrement dans les dimensions de la zone à masquer. Les proportions du masque sont conservées : le masque peut ne pas couvrir entièrement l'élément.

  
  mask-size:contain;
mask-origin:border-box;

  
  mask-size:contain;
mask-origin:padding-box;

  
  mask-size:contain;
mask-origin:content-box;

  Le masque est un cercle. Dimensionné avec contain, son diamètre sera égal à la plus petite des dimensions de la zone à masquer. Il ne couvrira donc pas tout l'élément dans sa plus grande dimension.

• mask-size: 50px 25px;

  mask-size accepte également une ou deux valeurs numériques positives, avec leur unité de dimension (voir les unités de dimension) ou exprimées en pourcentages. Ces deux valeurs définissent respectivement la largeur et la hauteur du masque. Les proportions de ce dernier peuvent donc ne pas être conservées.

  Si une seule valeur est indiquée, elle définit la largeur du masque, la hauteur sera modifiée pour conserver les proportions initiales du masque.

  Les pourcentages sont calculés par rapport aux dimensions de la zone à masquer.

  
  mask-size:100% 100%;
mask-origin:border-box;

  
  mask-size:100% 100%;
mask-origin:padding-box;

  
  mask-size:100% 100%;
mask-origin:content-box;

  Le masque est un cercle. Si ses deux dimensions sont fixées à 100%, il sera déformé (il devient une ellipse) pour prendre les mêmes dimensions que la zone qu'il masque.

• mask-size: cover, cover, 50px 50px, ...;

  Plusieurs valeurs peuvent être indiquées, séparées par une virgule. Cette syntaxe est utile lorsque plusieurs masques sont définis.

• mask-size: initial; (auto) mask-size: inherit; mask-size: revert; mask-size: revertLayer; mask-size: unset;

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

Animation de la propriété mask-size.

Cet effet hypnotique est obtenu en animant la propriété mask-size. Le masque utilisé est un dégradé répétitif circulaire .

Simulateur avec la propriété mask-size.

L'élément original
180 x 120 pixels

Le masque
100 x 100 pixels

Le résultat

L'élément original
180 x 120 pixels

Le masque
dégradé circulaire
(sans dimensions)

Le résultat

Prise en charge de mask-size 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-size

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-size

• Module CSS - Masquage - Niveau 1

  Première spécification concernant les techniques de masquage par image. Et première définition des propriétés correspondantes dont la propriété mask-size.
  

  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-size est décrite dans la spécification qui standardise tout ce qui concerne le masquage : CSS Masking Module, ou "Module CSS - Masquage" en français.
Les propriétés ci-dessous sont également concernées :

Propriétés :