MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

-moz-context-properties

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément <img>), il est possible d'appliquer les propriétés de l'élément <img> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété -moz-context-properties.

Syntaxe

/* Valeurs avec un mot-clé */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* Valeurs globales */
-moz-stack-sizing: inherit;
-moz-stack-sizing: initial; 
-moz-stack-sizing: unset;

Valeurs

fill
Expose la valeur fill appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
stroke
Expose la valeur stroke appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
fill-opacity
Expose la valeur fill-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
stroke-opacity
Expose la valeur stroke-opacity appliquée sur l'image afin qu'elle soit appliquée sur le SVG.

Syntaxe formelle

none | [ fill | fill-opacity | stroke | stroke-opacity ]#

Exemples

Dans cet exemple, on embarque un SVG simple dans un élément <img>.

Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété -moz-context-properties. Par exemple :

img {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;
}

.img1 {
    fill: lime;
    stroke: purple;
}

Une fois que c'est fait, on peut utiliser les valeurs fill et stroke dans le SVG. Par exemple :

<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
                       <rect width='100%' height='100%' stroke-width='30px'
                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">

Ici, l'attribut src de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <rect> est paramétré afin de récupérer les valeurs fill et stroke telles que fournies par les propriétés fill et stroke de l'élément <img> grâce aux mots-clés context-fill/context-stroke. On utilise aussi une couleur de secours pour le remplissage (fill) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.

Note : vous pouvez consulter un exemple complet sur notre dépôt Github.

Valeur initialenone
ApplicabilitéAny element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Spécifications

Cette propriété n'est définie dans aucun standard CSS.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple ? 55 (55)[1] Pas de support ? ?
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple Pas de support ? 55.0 (55)[1] Pas de support ? ? ?

[1] Cette fonctionnalité est disponible depuis Firefox 55, uniquement pour le canal Nightly. Pour les autres versions de Firefox, il est nécessaire d'activer la préférence svg.context-properties.content.enabled pref avec la valeur true si les images ne sont pas référencées via une URL utilisant le schéma chrome:// ou resource://.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,