-ms-filter

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.

Obsolète
Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

La propriété -ms-filter est une propriété spécifique à Microsoft qui permet de définir des filtres à appliquer à un objet.

Attention ! Ne pas confondre cette propriété et la propriété standard filter car les deux sont pleinement incompatibles.

Attention ! Cette fonctionnalité a été dépréciée avec Internet Explorer 9. Dans Internet Explorer 10, cette fonctionnalité a été supprimée et ne devrait plus être utilisée.

Syntaxe

La propriété -ms-filter est définie avec une chaîne de caractères contenant une liste d'un ou plusieurs éléments, séparés par des espaces. Chacun de ces éléments peut avoir l'un des types suivants :

Syntaxe formelle

filter: <-ms-filter-function>+  
-ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ]

où
<-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy>

où
<-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ]
<-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')'

La chaîne de caractères (string) contient la liste des filtres, transitions et surfaces procédurales. Voir la référence relative aux filtres et transitions pour plus de détails.

Exemples

L'exemple suivant illustre comment utiliser la propriété -ms-filter dans Internet Explorer 8.

-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';

L'exemple suivant illustre comment utiliser un style en incise pour appliquer un filtre sur une image.

<img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
    src="/workshop/samples/author/dhtml/graphics/cone.jpg"
    height="80px" width="80px" alt="cone">

Dans l'exemple suivant, on voit comment utiliser les API scriptées pour définir un filtre sur une image.

<body>
  <p>Click the image to start the filter.</p>
  // Call the function.
  <div id="filterFrom" 
      style="position: absolute; 
            width: 200px; 
            height: 250px; 
            background-color: white; 
            filter: revealTrans()">
    <img id="imageFrom" 
         style="position: absolute; 
                top: 20px; 
                left: 20px;" 
                src="sphere.jpg" 
                alt="sphere">
    <div id="filterTo" 
         style="position: absolute; 
                width: 200px; 
                height: 250px; 
                top: 20px; 
                left: 20px; 
                background: white; 
                visibility: hidden;">
    </div>
  </div>
  <script type="text/javascript">
  let filterImg = document.querySelector('#filterFrom');
  filterImg.addEventListener('click', doFilter);  

  function doFilter () {
    filterFrom.filters.item(0).Apply(); // 12 is the dissolve filter.
    filterFrom.filters.item(0).Transition=12;
    imageFrom.style.visibility = "hidden";
    filterTo.style.visibility = "";
    filterFrom.filters.item(0).play(14);
  }
  </script>
</body>

Dégradé

progid:DXImageTransform.Microsoft.Gradient( <properties> )

où
<properties> = [ <Enabled> | <EndColor> | <EndColorStr> | <GradientType> | <StartColor> | <StartColorStr> ]#

où
<Enabled> = 'Enabled=' [ true | false ]
<EndColor> = 'StartColor=' <color>
<EndColorStr> = 'StartColorStr=' <color>
<GradientType> = 'GradientType=' <integer>
<StartColor> = 'StartColor=' <color>
<StartColorStr> = 'StartColorStr=' <color>

Enabled: Valeur par défaut : true
Utiliser false pour désactiver le dégradé.
EndColor: La couleur pour la fin du dégradé, seules les couleurs opaques (utilisant la notation #RRGGBB) sont prises en charge.
EndColorStr: La couleur pour la fin du dégradé avec une prise en charge des couleurs opaques avec la notation #RRGGBB et une prise en charge des couleurs avec la notation #AARRGGBB.
GradientType: Valeur par défaut : 0 (ce qui est équivalent à linear-gradient(to bottom, …))
Toute valeur non nulle rendra le dégradé horizontal (équivalent à linear-gradient(to right, …))
StartColor: La couleur pour le début du dégradé, seules les couleurs opaques (utilisant la notation #RRGGBB) sont prises en charge.
StartColorStr: La couleur pour le début du dégradé avec une prise en charge des couleurs opaques avec la notation #RRGGBB et une prise en charge des couleurs avec la notation #AARRGGBB.

HTML

<div class="gradient horizontal"></div>
<div class="gradient vertical"></div>

CSS

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.gradient {
  width: 100vw;
  height: 60px;
  height: 50vh;
}

.gradient.horizontal {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=1)'; 
  background-image: linear-gradient(to right, #ffffff 0%, #000000 100%); 
}

.gradient.vertical {
  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=0)';
  background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
}

Résultat

Spécifications

Cette propriété est une propriété spécifique à Microsoft, ne doit pas être utilisée sur le Web et ne fait partie d'aucune spécification.

Valeur initiale	"" (the empty string)
Applicabilité	tous les éléments
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Notes

Le tableau suivant énumère les différents filtres DX spécifiques qui étaient fréquemment utilisés, avec leur équivalent en CSS standard :

Nom du filtre DX	Alternative standard
`Alpha`	`opacity`
`AlphaImageLoader`	`<img>` ou `background-image` et les propriétés associées
`Gradient`	`background-image: linear-gradient`
`DropShadow`	`text-shadow` ou `box-shadow`
`Matrix`	`transform`, `transform-origin`

Pour Windows Internet Explorer 8, la propriété -ms-filter est une extension à CSS et peut être utilisée comme synonyme de filter en mode standard IE8.

Un objet doit avoir une disposition où afficher le filtre. Pour cela, on pourra fournir une hauteur et une largeur à l'élément grâce aux propriétés height et width.

Le filtre d'ombre peut être appliqué à un objet <img> en paramétrant le filtre sur le conteneur de l'image.

Dernière modification : Apr 5, 2019, par des contributeurs MDN