MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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

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

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

Syntaxe

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

Syntaxe formelle

[ 'progid:DXImageTransform.Microsoft.<filter>( <attributes> )' ]+

<filter> est le nom d'un filtre, d'une transition ou d'une surface procédurale et où <attributes> est une liste de paires attribute=value séparées par des virgules pour la caractéristique donnée. 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

<script type="text/javascript">
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>
</head>
<body>
<p>Click the image to start the filter.</p>
// Call the function.
<div id="filterFrom" onclick="doFilter()" 
    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>
</body>

Spécifications

Cette propriété ne fait partie d'aucune spécification.

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 et/ou une largeur 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.

Cette propriété n'est pas disponible sur les plateformes macOS.

Étiquettes et contributeurs liés au document

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