-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># '"' ]<-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy><-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

.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éenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'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.