Comment écrire un hack CSS pour IE 11?
Comment puis-je pirater ou écrire CSS uniquement pour IE 11? J'ai un site Web qui a l'air mauvais dans IE 11.J'ai juste cherché ici et là, mais je n'ai pas encore trouvé de solution.
Y at-il un sélecteur css?
Utilisez une combinaison de règles CSS spécifiques à Microsoft pour filtrer IE11:
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Des filtres tels que celui-ci fonctionnent pour les raisons suivantes:
Lorsqu'un agent utilisateur ne peut pas analyser le sélecteur (c'est-à-dire qu'il ne s'agit pas de CSS 2.1 valide), il doit également ignorer le sélecteur et le bloc de déclaration suivant (le cas échéant).
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>Références
À la lumière de l'évolution du fil, j'ai mis à jour le ci-dessous:
IE 11 (et plus ..)
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 et plus
_:-ms-lang(x), .foo { property:value; }
ou
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10 seulement
_:-ms-lang(x), .foo { property:value\9; }
IE 9 et plus
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 et 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
IE 9 seulement
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 8,9 et 10
@media screen\0 {
.foo {property:value;}
}
IE 8 en mode standard uniquement
.foo { property /*\**/: value\9 }
IE 8
html>/**/body .foo {property:value;}
ou
@media \0screen {
.foo {property:value;}
}
IE 7
*+html .foo {property:value;}
ou
*:first-child+html .foo {property:value;}
IE 6, 7 et 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6 et 7
@media screen\9 {
.foo {property:value;}
}
ou
.foo { *property:value;}
ou
.foo { #property:value;}
IE 6, 7 et 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6
* html .foo {property:value;}
ou
.foo { _property:value;}
Alternatives javascript
Modernisation
Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; il crée ensuite un objet JavaScript avec les résultats et ajoute des classes à l'élément html
Sélection de l'agent utilisateur
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Ajoute (par exemple) l'élément ci-dessous à l'élément html:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Autoriser des sélecteurs CSS très ciblés, par exemple:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Note de bas de page
Si possible, identifiez et corrigez le (s) problème (s) sans piratage. Soutien amélioration progressive et dégradation progressive . Cependant, il s’agit d’un scénario "monde idéal" qui n’est pas toujours réalisable, ce qui précède devrait permettre de proposer de bonnes options.
Attribution/Lecture essentielle
Voici une solution en deux étapes. Voici un hack pour IE10 et 11.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
parce que IE10 et IE11 prend en charge -ms-high-cotrast, vous pouvez en profiter pour cibler ces deux navigateurs.
et si vous voulez exclure l'IE10 de ceci, vous devez créer un code spécifique à IE10 comme suit: il utilise le truc de l'agent utilisateur, vous devez ajouter ceci Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
et cette balise HTML
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
et maintenant vous pouvez écrire votre code CSS comme ça
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
pour plus d'informations s'il vous plaît se référer à ces sites, wil tutorail , Chris Tutorial
Et si vous voulez cibler IE11 et les versions ultérieures, voici ce que j'ai trouvé:
_:-ms-fullscreen, :root .selector {}
Voici une excellente ressource pour obtenir plus d'informations: browserhacks.com
Je les ai écrites et les ai ajoutées à BrowserHacks.com depuis l’automne 2013 - celle que j’ai écrite est très simple et n’est supportée que par IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
et bien sûr la div ...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
Le texte apparaît donc en bleu avec Internet Explorer 11. Amusez-vous avec.
-
Plus de IE et autres hacks CSS de navigateur sur mon site de test en direct ici:
MISE À JOUR: http://browserstrangeness.bitbucket.io/css_hacks.html
MIROIR: http://browserstrangeness.github.io/css_hacks.html
(Si vous recherchez également MS Edge CSS Hacks, c’est là que vous devez aller.)
Vous pouvez utiliser le code suivant dans la balise style:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Voici un exemple qui a fonctionné pour moi:
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
Veuillez noter que puisque (#nav li) et (#nav a) sont en dehors de l'écran @media ..., ce sont des styles généraux.
Vous pouvez utiliser js et ajouter une classe au format HTML pour conserver la norme de commentaires conditionnels :
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Ou utilisez une lib comme bowser:
Ou modernizr pour la détection de fonctionnalité:
J'ai donc trouvé ma propre solution à ce problème à la fin.
Après une recherche dans documentation Microsoft , j'ai réussi à trouver un nouveau style IE11 uniquement msTextCombineHorizontal
Dans mon test, je vérifie les styles IE10 et s’ils correspondent, je vérifie uniquement le style IE11. Si je le trouve, alors c'est IE11 +, sinon, c'est IE10.
Exemple de code:Détecter IE10 et IE11 par le test de capacité CSS (JSFiddle)
Je mettrai à jour l'exemple de code avec plus de styles lorsque je les découvrirai.
REMARQUE: Ceci identifiera presque certainement IE12 et IE13 comme "IE11", car ces styles seront probablement conservés. J'ajouterai d'autres tests au fur et à mesure du déploiement des nouvelles versions, et j'espère pouvoir à nouveau faire confiance à Modernizr.
J'utilise ce test pour le comportement de secours. Le comportement de repli est juste un style moins glamour, il n’a pas de fonctionnalité réduite.
J'ai trouvé cela utile
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Ajoutez ceci sous votre document <head>