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

La propriété CSS -ms-filter est une propriété spécifique à Microsoft qui permet de définir ou d'obtenir un filtre ou l'ensemble de filtres appliqué à un objet.

Attention ! Cette propriété a été dépréciée à partir d'Internet Explorer 9 puis a été retirée avec Internet Explorer 10. Elle ne doit plus être utilisée.

Syntaxe

La propréité -ms-filter est définie avec une liste d'un ou plusieurs éléments des types suivants :

Syntaxe formelle

<string>

où la chaîne de caractères (string) contient la liste des filtres, transitions et surfaces procédurales. Se référer aux pages filtres et transitions pour plus de détails.

Exemples

L'exemple qui suit illustre comment utiliser la propriété -ms-filter avec Internet Explorer 8.

Code de l'exemple : http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm

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

L'exemple qui suit illustre comment utiliser un style en ligne afin de définir un filtre sur une image.

Code de l'exemple : http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm

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

L'exemple qui suit illustre comment utiliser un script en ligne afin de définir un filtre sur une image.

Code de l'exemple : http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm

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

Spécifications

Cette propriété 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 qui suit liste les filtres DX les plus populaires et les alternatives standard correspondantes :

Filtre DX Alternatives standard
Alpha opacity
AlphaImageLoader <img> ou background-image
Gradient background-image et la forme linear-gradient().
DropShadow text-shadow ou box-shadow
Matrix transformtransform-origin

La propriété -ms-filter est une propriété spécifique Microfost et peut être utilisée comme synonyme de filter avec le mode standard d'IE8. Lorsqu'on utilise -ms-filter, la valeur du progid doit être fournie entre quotes simples (') ou entre double quotes ("). La virgule (,) est utilisée comme séparateur (cf. les exemples ci-avant).

Un objet doit faire partie de la disposition afin que le filtre soit correctement rendu. Pour cela, il suffit simplement d'indiquer une hauteur (height) et/ou une largeur (width) pour cet objet (d'autres propriétés peuvent être utilisées afin de faire participer un objet dans le plan).

Le filtre shadow peut être appliqué à un élément <img> en appliquant le filtre sur le conteneur parent de l'image.

Cette mécanique permet de développer et d'ajouter des filtres a posteriori. Pour plus d'informations, voir Introduction aux filtres et aux transitions.

Étiquettes et contributeurs liés au document

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