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