web-dev-qa-db-fra.com

Comment cibler uniquement Internet Explorer 10 dans certaines situations, telles que le code CSS spécifique à Internet Explorer ou le code JavaScript spécifique à Internet Explorer?

Comment cibler uniquement Internet Explorer 10 dans certaines situations, telles que le code CSS spécifique à Internet Explorer ou le code JavaScript spécifique à Internet Explorer?

J'ai essayé ça, mais ça ne marche pas:

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10 ignore les commentaires conditionnels et utilise le <html lang="en" class="no-js"> au lieu de <html class="no-js ie10" lang="en">.

javascripthtmlcssinternet-explorer-10conditional-comments
153
trusktr

Peut-être que vous pouvez essayer un jQuery comme ceci:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

Pour utiliser cette méthode, vous devez inclure la bibliothèque jQuery Migrate car cette fonction a été supprimée de la bibliothèque principale jQuery.

Ca a très bien fonctionné pour moi. Mais sûrement pas de remplacement pour les commentaires conditionnels!

62
Max Sohrt

Je ne voudrais pas utiliser JavaScript navigator.userAgent ou $ .browser (qui utilise navigator.userAgent) car il peut être usurpé.

Pour cibler Internet Explorer 9, 10 et 11 (Remarque: également la dernière version de Chrome):

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

Pour cibler Internet Explorer 10:

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

Pour cibler le navigateur Edge:

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

Sources:

128
Roni

J'ai trouvé une solution sur this site où quelqu'un avait 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 les commentaires éliminent la compression/le traitement;
  • aucune classe ie10 ajoutée dans Internet Explorer 11;
  • plus susceptibles de fonctionner comme prévu avec Internet Explorer 11 exécuté en mode de compatibilité Internet Explorer 10;
  • n’a pas besoin de balise de script autonome (peut simplement être ajoutée à un autre code JavaScript dans l’en-tête).
  • n'a pas besoin de jQuery pour tester
110
Willem de Wit

Internet Explorer 10 ne tente plus de lire les commentaires conditionnels. Cela signifie qu'il traitera les commentaires conditionnels comme tout autre navigateur le ferait: comme des commentaires HTML normaux, destinés à être totalement ignorés. En regardant le balisage donné dans la question à titre d'exemple, tous les navigateurs, y compris IE10, ignoreront entièrement les portions de commentaires, surlignées en gris. Le standard HTML5 ne fait aucune mention de la syntaxe de commentaire conditionnelle et c’est précisément pourquoi ils ont choisi de ne plus la prendre en charge dans IE10.

Notez cependant que compilation conditionnelle dans JScript est toujours pris en charge, comme indiqué dans les commentaires ainsi que dans les réponses les plus récentes. Cela ne va pas disparaître dans la version finale non plus, contrairement à jQuery.browser . Et bien entendu, il va sans dire que le reniflement utilisateur-agent reste aussi fragile que jamais et ne doit en aucun cas être utilisé.

Si vous devez vraiment cibler IE10, utilisez une compilation conditionnelle qui pourra toujours bénéficier d’une assistance dans un avenir proche ou, si vous pouvez l’aider, utilisez une bibliothèque de détection d’options telle que Modernizr au lieu de (ou conjointement). avec) détection du navigateur. À moins que votre cas d'utilisation nécessite noscript ou héberge IE10 côté serveur, le reniflement agent-utilisateur sera plus un casse-tête qu'une option viable.

Cela semble assez encombrant, mais rappelez-vous qu’il s’agit d’un navigateur moderne et hautement conforme aux normes Web actuelles.1En supposant que vous écriviez du code interopérable hautement conforme aux normes, vous ne devriez pas == devez mettre de côté un code spécial pour IE10 sauf si cela est absolument nécessaire, c'est-à-dire qu'il est supposé ressembler à d'autres navigateurs. en termes de comportement et de rendu.2 Et cela semble exagéré, compte tenu de l'historique d'IE, mais combien de fois avez-vous prévu que Firefox ou Chrome se comportent de la même manière, mais qu'ils soient consternés?

Si vous do avez une raison légitime de cibler certains navigateurs, n'hésitez pas à les renifler avec les autres outils qui vous ont été fournis. Je dis simplement que vous allez avoir beaucoup plus de mal à trouver une telle raison aujourd'hui que ce qu'elle était auparavant, et ce n'est tout simplement pas une chose sur laquelle vous pouvez compter.

1Non seulement IE10, mais également IE9 et même IE8, qui gère la plupart des normes CSS2.1 bien plus avancées que Chrome, tout simplement parce que IE8 était tellement axé sur le respect des normes (à ce moment-là, CSS2.1 était déjà assez stable avec seulement La recommandation d’aujourd’hui) alors que Chrome semble être un peu plus qu’une démo à moitié polie des pseudo-normes de pointe.

2Et je peux être partial quand je dis cela, mais c'est sûr que si. Si votre code fonctionne dans d'autres navigateurs mais pas dans IE, les chances que c'est un problème avec votre propre code plutôt que IE10 sont bien meilleures comparées à, par exemple, il y a 3 ans, avec les versions précédentes d'IE. Encore une fois, je suis peut-être partial, mais soyons honnêtes: n'êtes-vous pas aussi? Il suffit de regarder vos commentaires.

62
BoltClock

Un bon point de départ est la IE documentation de support aux normes . 

Voici comment cibler IE10 en JavaScript:

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

Voici comment cibler IE10 en CSS:

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

Si IE11 doit être filtré ou réinitialisé via CSS, voir une autre question Question: Comment écrire un hack CSS pour IE 11?

36
Paul Sweatte

J'ai écrit un petit plug-in JavaScript appelé Vanilla appelé Layout Engine, qui vous permet de détecter IE 10 (et tous les autres navigateurs), d'une manière simple, qui ne peut être simulée, contrairement au sniffing d'agent utilisateur. .

Il ajoute le nom du moteur de rendu en tant que classe à la balise html et renvoie un objet JavaScript contenant le fournisseur et la version (le cas échéant).

Consultez mon article de blog: http://mattstow.com/layout-engine.html et obtenez le code sur GitHub: https://github.com/stowball/Layout-Engine

11
Matt Stow

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

<!--[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" en tant que parent:

.ie10 .myclass1 { }

Et voilà! - les autres navigateurs restent intacts. Et vous n'avez pas besoin de jQuery. Vous pouvez voir l'exemple de la manière dont je l'ai implémenté ici: http://kardash.net .

11
Eugene Kardash

J'utilise ce script - il est désuet, mais efficace pour cibler une feuille de style séparée Internet Explorer 10 ou un fichier JavaScript inclus uniquement si le navigateur est Internet Explorer 10, comme vous le feriez avec des commentaires conditionnels . Aucun plug-in jQuery ou autre 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 >
7
Deborah

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" />
}
6
Lenny Bruyninckx

Si vous devez le faire, vous pouvez vérifier la chaîne de l'agent utilisateur en JavaScript:

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

Comme d'autres personnes l'ont mentionné, je recommanderais toujours la détection de fonctionnalités à la place.

5
dave1010

Si vous souhaitez cibler IE 10 avec le code JavaScript Vanilla, essayez de détecter les propriétés CSS: 

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

Propriétés CSS

Au lieu de msTouchAction, vous pouvez également utiliser l'une de ces propriétés CSS, car elles ne sont actuellement disponibles que dans IE 10. Toutefois, cela pourrait changer à l'avenir.

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

Page de test

J'ai mis en place une page de test avec toutes les propriétés de CodePen. 

4
TimPietrusky

CSS pour IE10 + et IE9

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

@media screen\0 {
    /* IE8,9,10 styles*/
}
3
steven iseki

clipBoardData est une fonction uniquement disponible dans IE. Vous pouvez donc utiliser toutes les versions IE

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

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

1
Astrotim

Je voulais juste ajouter ma version de détection IE. Il est basé sur un extrait trouvé à http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ et étendu pour prendre en charge les versions ie10 et ie11. Il détecte IE 5 à 11.

Tout ce que vous avez à faire est de l’ajouter quelque part et vous pourrez alors toujours vérifier avec une condition simple. La variable globale isIE sera non définie si ce n'est pas un IE, ou sinon, il s'agira du numéro de version. Vous pouvez donc facilement ajouter des éléments tels que 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;
}());
1
Jan.

Vous pouvez utiliser la détection de fonctionnalité pour voir si le navigateur est IE10 ou supérieur, comme ceci:

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

Seulement vrai si> IE9

1
George Filippakos

Pour moi, le code suivant fonctionne bien, tous les commentaires conditionnels fonctionnent dans toutes les versions 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 sur Windows 8.1, je ne sais pas s'il est lié à la mise à jour de ie11 ...

0
Alex

Voici comment je crée un 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, vous définissez chaque style différent:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}
0
Francisco Corrales Morales

utilisez babel ou TypeScript pour convertir ce code js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};

0
Aliaksandr Shpak

Avec JavaScript:

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

Travailler pour tous IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

Alors changez /Trident/g par /Trident/x.0/g où x = 4, 5, 6 ou 7 (ou peut-être 8 pour le futur).

0
Ender-events

Découvrez 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 */
}
0
Tom Senner