Comment puis-je cibler seulement Internet Explorer 10 pour certaines situations comme les CSS spécifiques à Internet Explorer ou le code JavaScript spécifique à Internet Explorer?

Je n'utiliserais pas JavaScript navigator.userAgent ou $.navigateur (qui utilise navigator.userAgent ) car il peut être mystifié.

À la cible d'Internet Explorer 9, 10 et 11 (Note: également le dernier Chrome):

@media screen and (min-width:0"151900920") { 
    /* Enter CSS here */
}

pour cibler Internet Explorer 10:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

À la cible de Bord du Navigateur:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Sources:

• Mobile Spécifiques à Internet Explorer CSS @media blocs
• comment cibler Internet Explorer 10 et 11 dans CSS
• Hacks CSS pour Windows 10 et Microsoft 's Edge Web Browser

j'ai trouvé une solution sur ce site où quelqu'un a eu un précieux commentaire :

la solution est:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

Il

• n'a pas besoin de commentaires conditionnels;
• fonctionne même si le commentaire de décapage de compression/traitement;
• aucune classe ie10 ajoutée dans Internet Explorer 11;
• plus probable pour fonctionner correctement avec Internet Explorer 11 dans Internet Explorer 10 mode de compatibilité;
• n'a pas besoin d'étiquette de script autonome (peut simplement être ajouté à d'autres codes JavaScript dans la tête).
• n'a pas besoin de jQuery pour tester

Internet Explorer 10 ne tente plus de lire les commentaires conditionnels. cela signifie qu'il traitera les commentaires conditionnels comme n'importe quel autre navigateur: comme des commentaires HTML réguliers, destinés à être totalement ignorés. En regardant le balisage donné dans la question comme un exemple, tous les navigateurs y compris IE10 ignoreront les parties de commentaire, en surligné gris, entièrement. La norme HTML5 ne fait aucune mention de la syntaxe des commentaires conditionnels, et c'est exactement la raison pour laquelle ils ont choisi d'arrêter de le soutenir dans IE10.

notez cependant que compilation conditionnelle en JScript est toujours supporté, comme le montrent les commentaires ainsi que les réponses plus récentes. Il ne va pas disparaître dans la version finale non plus, contrairement à jQuery.browser . Et bien sûr, il va de soi que le reniflage utilisateur-agent reste aussi fragile que jamais et ne devrait en aucun cas être utilisé.

si vous devez vraiment cibler IE10, soit utiliser la compilation conditionnelle qui peut encore voir le soutien dans un proche avenir, ou - si vous pouvez l'aider - utiliser une bibliothèque de détection de fonctionnalité telle que Modernizr au lieu de (ou en conjonction avec) la détection de navigateur. À moins que votre dossier d'utilisation ne nécessite noscript ou IE10 du côté du serveur, le sniffage par l'utilisateur-agent va être plus un casse-tête qu'une option viable.

semble assez encombrant, mais rappelez-vous que comme un navigateur moderne qui est très conforme aux normes Web d'aujourd'hui ¹ , en supposant que vous avez écrit le code interopérable qui est très conforme aux normes, vous ne devrait pas doivent réserver le code spécial pour IE10 sauf si absolument nécessaire, c.-à-d. il est censé ressembler à d'autres navigateurs en termes de comportement et de rendu. ² et cela semble tiré par les cheveux, étant donné L'histoire D'IE, mais combien de fois avez-vous attendu Firefox ou Chrome de se comporter de la même façon seulement pour être rencontré avec consternation?

• Firefox ne prend pas en charge box-sizing unprefixed pendant des années
• Firefox a eu historiquement bizarre décrire le comportement , et ce fut aussi le cas pour les années
• Firefox refuse de se comporter raisonnablement en ce qui concerne les cellules de table positionnées , citant un comportement non défini comme un excuse, alors que d'autres navigateurs semblent faire face très bien
• Safari et Chrome ont beaucoup de trouble avec certains CSS sélecteurs , avec parfois des correctifs de vraiment vous ramener à bon ol' les jours de IE5, IE6 et IE7
• Chrome semble à avoir beaucoup de problèmes dans le département de repeindre en général, par exemple ne pas refaire correctement les mises en page lorsque les styles de médias sont mis à jour; il semble que la moitié des bugs de Chrome peut être travaillé autour simplement et seulement en forçant une repeindre, encore une fois IE5/6/7-Niveau
• quelques souches de WebKit ont été connus pour tout à fait lie sur le soutien de certaines caractéristiques, ce qui signifie qu'ils ont effectivement mécanismes de détection de la fonction de défaite , de toutes choses

Si vous faire ont une raison légitime de cibler certains navigateurs, par tous les moyens de renifler avec les autres outils mis à disposition pour vous. Je dis juste que tu vas être beaucoup plus pressé de trouver une telle raison aujourd'hui que ce qu'elle était, et ce n'est vraiment pas quelque chose sur quoi tu peux compter.

¹ _{non seulement IE10, mais IE9, et même IE8 qui gère la plupart des CSS2 Matures.1 standard bien mieux que Chrome, tout simplement parce que IE8 était tellement axé sur la conformité aux normes (à l'époque CSS2.1 était déjà assez stable avec seulement des différences mineures par rapport à la recommandation d'aujourd'hui) alors que Chrome semble être un peu plus qu'une démonstration de technologie à moitié polie de pseudo-normes de pointe.}

² _{et je peux être partial quand je dis ça, mais c'est sûr faire. Si votre code fonctionne dans d'autres navigateurs mais pas IE, les chances que c'est un problème avec votre propre code plutôt que IE10 sont beaucoup mieux par rapport, disons, Il ya 3 ans, avec les versions précédentes de IE. Encore une fois, je peux être partial, mais soyons honnêtes: n'êtes-vous pas trop? regardez vos commentaires.}

un bon point de départ est le IE Standards Support Documentation .

Voici comment cibler IE10 en JavaScript:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

Voici comment cibler IE10 dans CSS:

@media all and (-ms-high-contrast: none) {
...
}

dans le cas où IE11 doit être filtré ou réinitialisé via CSS, voir un autre question: comment écrire un hack CSS pour IE 11?

j'ai écrit un petit plugin JavaScript vanille appelé Layout Engine , qui vous permet de fonctionnalité Détecter IE 10 (et tous les autres navigateurs), d'une manière simple qui ne peut pas être falsifié, contrairement à l'agent utilisateur reniflant.

il ajoute le nom du moteur de rendu comme classe sur la balise html et renvoie un objet JavaScript contenant le vendeur et la version (le cas échéant)

consultez mon billet de blog: http://mattstow.com/layout-engine.html et obtenir le code sur GitHub: https://github.com/stowball/Layout-Engine

les deux solutions affichées ici (avec de légères modifications) travail:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

ou

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

vous incluez l'une des lignes ci-dessus à l'intérieur de la balise head de votre page html avant votre lien css. Et puis dans le fichier css vous spécifiez vos styles ayant la classe "ie10" comme parent:

.ie10 .myclass1 { }

et voilà! - les autres navigateurs restent intacts. Et vous n'avez pas besoin de jQuery. Vous pouvez voir l'exemple comment j'ai mis en place ici: http://kardash.net .

j'utilise ce script - il est désuet, mais efficace pour cibler un séparé Internet Explorer 10 feuille de style ou le fichier JavaScript qui est inclus seulement si le navigateur est Internet Explorer 10, la même façon que vous le feriez avec des commentaires conditionnels. Aucun jQuery ou autre plugin n'est requis.

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >

vous pouvez utiliser PHP pour ajouter une feuille de style pour IE 10

Comme:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}

si vous devez faire cela, vous pouvez vérifier la chaîne d'agent utilisateur en JavaScript:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

comme d'autres personnes l'ont mentionné, je recommande toujours la détection de caractéristiques à la place.

si vous voulez cibler IE 10 avec JavaScript Vanille, vous pouvez essayer la détection de propriété CSS:

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

propriétés CSS

au lieu de msTouchAction vous pouvez également utiliser une de ces propriétés CSS, parce qu'elles ne sont actuellement disponibles que dans IE 10. Mais cela pourrait changer dans l'avenir.

• msTouchAction
• msWrapFlow
• msWrapMargin
• msWrapThrough
• msScrollLimit
• msScrollLimitXMin
• msScrollLimitYMin
• msScrollLimitXMax
• msScrollLimitYMax
• msFlexbox
• msFlex
• msFlexOrder

page de Test

j'ai créé une page test avec toutes les propriétés sur CodePen.

clipBoardData est une fonction qui n'est disponible qu'en IE, donc si vous cherchez à cibler toutes les versions D'IE, vous pouvez utiliser

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>

CSS for IE10+ and IE9

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
}

@media screen"151900920" {
    /* IE8,9,10 styles*/
}

vous pouvez utiliser la détection de traits pour voir si le navigateur est IE10 ou plus comme ainsi:

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

vrai Uniquement si > IE9

Conditionizr (voir docs) ajoutera classes CSS navigateur à votre élément html, y compris ie10.

je voulais juste ajouter ma version de détection D'IE. Il est basé sur un extrait de http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ et exteded également leur soutien à ie10 et ie11. Il détecte IE 5 à 11.

Tout ce que vous devez faire est de l'ajouter quelque part et alors vous pouvez toujours vérifier avec une condition simple. La var globale isIE ne sera pas définie si ce n'est pas un IE, ou sinon ce sera la version nombre. Donc, vous pouvez facilement ajouter des choses comme if (isIE && isIE < 10) ou similaire.

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());

Avec JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

du Travail pour tous IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

ainsi changer /Trident/g par /Trident/x.0/g où x = 4, 5, 6 ou 7 (ou peut-être 8 pour l'avenir).

pour moi le code suivant fonctionne très bien, tous les commentaires conditionnels fonctionnent dans toutes les versions de IE:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

je suis sous windows 8.1, Je ne sais pas si c'est lié à la mise à jour de ie11...

Voici comment je fais CSS personnalisé pour Internet Explorer:

dans mon fichier JavaScript:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

et puis dans mon fichier CSS, y définir chaque style différent:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}

Check out http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks /

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       /* IE10-specific styles go here */
}

cette réponse m'a permis d'y arriver à 90%. J'ai trouvé le reste de ma réponse sur le Microsoft site ICI .

le code ci-dessous est ce que j'utilise pour cibler tout ie en ajoutant un .classe ie à <html>

Utiliser jQuery (qui obsolète .navigateur en faveur des agents utilisateurs en 1.9+, voir http://api.jquery.com/jQuery.browser / ) pour ajouter un .classe ie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});

si le ciblage des navigateurs IE10 et supérieurs et des navigateurs non IE ne vous dérange pas, vous pouvez utiliser ce commentaire conditionnel:

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

dérivé de http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

si vous devez vraiment le faire, vous pouvez faire fonctionner les commentaires conditionnels en ajoutant la ligne suivante à <head> :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Source

solution moderne pour css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}