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

160

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

J'ai essayé ceci, mais cela ne fonctionne 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 au <html lang="en" class="no-js">lieu de <html class="no-js ie10" lang="en">.

javascript  html  css  internet-explorer-10  conditional-comments 
— trusktr
source
8
Je pense qu'une meilleure question serait: Comment puis-je obtenir le même aspect CSS sur les deux navigateurs?
— BentOnCoding
12
IE10 PP4 soutient toujours la @cc_ondéclaration . Donc, pour détecter si IE10 est prise en charge ou non, vous pouvez utiliser le code suivant: <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->. (J'ai posté ceci en commentaire, car IE est toujours en développement, donc on ne sait pas si la version finale prend également en charge cette fonctionnalité)
— Rob W
15
@RobW - Votre exemple de code sera erroné une fois ie11 sorti. Version améliorée: <script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>Améliorations: n'a pas besoin de commentaires conditionnels; fonctionne même si la compression / traitement de suppression de commentaires; aucune classe ajoutée pour ie11; fonctionnera avec ie11 fonctionnant en mode de compatibilité ie10; n'a pas besoin de balise de script autonome (peut simplement être ajoutée à d'autres javascript dans head).
— robocat
2
Exemple de l'extrait de code ci-dessus: jsbin.com/upofoq/2
— robocat
8
Une solution plus générique est: if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';- qui résout 90% des problèmes (parfois les modes de compatibilité échouent, auquel cas vous avez besoin d'un autre niveau de correctif en plus de cela).
— robocat

Réponses:

65

Vous pouvez peut-être essayer un jQuery comme celui-ci:

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

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

— Max Sohrt
source
3
Je ne suis pas sûr pour vous les gars mais je dois l'utiliser == '10.0'pour que cela fonctionne
— lulalala
112
Attention: jQuery.browsern'est plus disponible dans la version actuelle de jQuery (1.9) sans plugin. blog.jquery.com/2013/01/15/…
— dave1010
2
Je recommanderais: if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }Notez la version <10 pour détecter les anciennes versions d'IE. IE10 et supérieur fonctionne bien avec tous mes CSS3, HTML5, jquery, etc.
— Dan Mantyla
1
@dan car les commentaires conditionnels fonctionnent dans tous les navigateurs IE, moins de 10 les utilisent au lieu d'encombrer votre JS pour tous les navigateurs. Dites simplement <! - [if lte IE 9]> et vous pouvez cibler toutes les versions IE inférieures à 10. Aucun JS requis.
— edhurtig
1
@ Marc-AndréLafortune soulève un bon point. En règle générale, vous devez toujours utiliser l'opérateur === et non ==. Lorsque vous écrivez du javascript, vous devez en tenir compte. stackoverflow.com/questions/359494/…
— Stewart
132

Je n'utiliserais pas JavaScript navigator.userAgentou $ .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 Edge Browser:

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

Sources:

— Roni
source
C'est vraiment sympa. Mais dans quelle mesure devrions-nous être préoccupés lorsque nous testons divers modes de document par rapport aux modes de navigateur dans IE? Dans quelles situations pouvons-nous nous attendre à ce que les utilisateurs en ligne utilisent un mode de document différent de leur mode de navigateur actuel?
— klewis
les gens ne changent généralement pas le mode du document. Ils le peuvent, mais je n'ai rencontré aucun site qui obligeait l'utilisateur à changer le mode du document. Si vous utilisez le bon DOCTYPE, ce n'est pas du tout un problème.
— Roni
3
Tu es mon héros! Juste une note, cela a également corrigé des problèmes dans IE11
— locrizak
8
Cela affecte également IE11 - donc si vous cherchez une solution pour cibler uniquement IE9 / 10, celle-ci ne fonctionnera pas :-(
— Lukasz Lenart
1
Qu'entendez-vous par "tous détectent le navigateur via navigator.userAgent"? La compilation conditionnelle est une fonctionnalité intégrée du runtime JScript, qui ne peut pas être usurpée via la chaîne user-agent.
— BoltClock
111

J'ai trouvé une solution sur ce site où quelqu'un avait un commentaire précieux :

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 la compression / traitement de suppression de commentaires;
  • aucune classe ie10 ajoutée dans Internet Explorer 11;
  • plus susceptible de fonctionner comme prévu avec Internet Explorer 11 fonctionnant 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 la tête).
  • n'a pas besoin de jQuery pour tester
— Willem de Wit
source
3
@ dave1010 Les agents utilisateurs peuvent facilement être usurpés. Les commentaires conditionnels ne sont pris en charge que par le moteur JScript, qui n'est disponible que dans IE4 + (y compris 10).
— Rob W
2
@ dave1010 Écrire un analyseur fonctionnel qui fait ce que vous décrivez est difficile et extrêmement improbable. Quiconque crée et installe délibérément une telle extension a probablement l'intention «d'agir comme» IE (peut-être à des fins de test automatisé sur des environnements non Windows?). Une confiance à 100% n'est jamais garantie dans les navigateurs, mais vous pouvez vous en rapprocher suffisamment. Les commentaires conditionnels sont un moyen très fiable de détecter le moteur JScript, qui est utilisé par IE.
— Rob W
3
le seul inconvénient que je peux voir est qu'il nécessite js, ce qui n'était pas le cas
— James Westgate
4
Cela devrait être la meilleure réponse, et l'exigence de JS devrait être sans objet pour les utilisateurs d'IE10 - si JS est désactivé, il ne s'agira probablement que de l'addon NoScript. Je pense que nous avons besoin de plus d'éducation du public sur la pure stupidité de NoScript (par opposition aux addons sains comme AdBlock ou Ghostery).
— iono
8
Je suggère d'utiliser le code alternatif fourni par l'auteur: if (/*@cc_on!@*/false && document.documentMode === 10) {}qui contourne les avertissements eval dans les programmes de linting.
— ajbeaven
62

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 normaux, censés être entièrement ignorés. En regardant le balisage donné dans la question à titre d'exemple, tous les navigateurs, y compris IE10, ignoreront entièrement les parties de commentaire, surlignées en gris. La norme HTML5 ne fait aucune mention de la syntaxe des commentaires conditionnels, et c'est exactement pourquoi ils ont choisi de ne plus la supporter dans IE10.

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

Si vous devez vraiment cibler IE10, utilisez la compilation conditionnelle qui pourrait encore bénéficier d'un support dans un proche avenir, ou - si vous pouvez l'aider - utilisez une bibliothèque de détection de fonctionnalités telle que Modernizr au lieu de (ou en conjonction avec) la détection du navigateur. À moins que votre cas d'utilisation ne nécessite noscript ou IE10 accommodant côté serveur, le reniflage de l'agent utilisateur sera plus un casse-tête qu'une option viable.

Cela semble assez lourd, mais rappelez-vous qu'en tant que navigateur moderne hautement conforme aux normes Web actuelles 1 , en supposant que vous ayez écrit un code interopérable hautement conforme aux normes, vous ne devriez pas avoir à mettre de côté un code spécial pour IE10 à moins que cela ne soit absolument nécessaire, c'est-à-dire qu'il est censé ressembler aux autres navigateurs en termes de comportement et de rendu. 2 Et cela semble exagéré, étant donné l'histoire d'IE, mais combien de fois vous êtes-vous attendu à ce que Firefox ou Chrome se comportent de la même manière pour être consternés?

Si vous avez une raison légitime de cibler certains navigateurs, n'hésitez pas à les renifler avec les autres outils qui vous sont 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 vraiment pas quelque chose sur lequel vous pouvez compter.

1 Non seulement IE10, mais IE9 et même IE8 qui gère la plupart des standards matures CSS2.1 bien mieux que Chrome, simplement parce que IE8 était tellement concentré sur la conformité aux normes (à ce moment-là, CSS2.1 était déjà assez stable avec seulement des différences mineures de la recommandation d'aujourd'hui) alors que Chrome semble être un peu plus qu'une démo technologique à moitié polie de pseudo-normes de pointe.

2 Et je peux être partial quand je dis cela, mais c'est sûr que l'enfer le fait. Si votre code fonctionne dans d'autres navigateurs mais pas dans IE, les chances que ce soit un problème avec votre propre code plutôt qu'avec IE10 sont bien meilleures que, disons, 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'est-ce pas vous aussi? Regardez simplement vos commentaires.

— BoltClock
source
20
Chhhh, ouais, IE10 est toujours loin derrière le webkit et le gecko. J'ai du CSS qui a l'air bien dans le webkit et hideux dans IE10. Si je ne peux pas trouver un moyen d'appliquer sélectivement les styles, alors je devrai abandonner ces styles. :(
— trusktr
2
Il vaut la peine de souligner que les commentaires conditionnels ont été supprimés dans IE10 car il dispose désormais d'un analyseur HTML5. Les commentaires conditionnels ne sont pas valides selon l'algorithme d'analyse HTML5. Voir la section des fonctionnalités héritées
— David Storey
3
@trusktr si vous le codez bien, il aura fière allure dans tous les derniers navigateurs.
— Klevis Miho
10
@KlevisMiho Ce n'est pas vrai, Chrome et Firefox prennent en charge des fonctionnalités que IE n'a pas, même si elles sont bien codées. Si vous voulez dire "utiliser uniquement les fonctionnalités communes", ce n'est pas tout à fait la même chose que "bien coder".
— trusktr
5
@Dan Mantyla: Dans ce cas,<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
— BoltClock
11

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" 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 je l'ai implémenté ici: http://kardash.net .

— Eugène Kardash
source
11

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

Il ajoute le nom du moteur de rendu en tant que classe sur 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

— Matt Stow
source
7

J'utilise ce script - il est désuet, mais efficace pour cibler une feuille de style Internet Explorer 10 distincte ou un fichier JavaScript qui n'est inclus que si le navigateur est Internet Explorer 10, de la même manière 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 >
— Deborah
source
2
Cool. Pourriez-vous ajouter un peu d'informations sur ce que sont ces @statements?
— trusktr
6

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" />
}
— Lenny Bruyninckx
source
2
Cela n'a pas de sens d'augmenter la chaîne car les stripos ne sont pas sensibles à la casse;)
— mgutt
2
Je tente toujours pour cela, mais rappelez-vous que cela se brise quand il y a un cdn / cache / proxy à l'avant.
— Johan
5

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

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

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

— dave1010
source
à quoi servent les `` !! ''?
— Francisco Corrales Morales
4
String.match()renverra un tableau pour une correspondance ou null si ce n'est pas le cas. !(String.match())le rend faux pour une correspondance ou vrai pour aucune correspondance. !(!(String.match()))le rend vrai pour une correspondance ou faux pour aucune correspondance. !(!(something))ou tout simplement !!somethingconvertit donc n'importe quoi en un booléen vrai / faux. stackoverflow.com/questions/784929/…
— dave1010
@FranciscoCorralesMorales Oh, le nombre de fois qu'on m'a demandé ça quand mon code est sous contrôle. :) En tant qu'extension du grand commentaire de dave1010, il peut être utilisé pour contraindre des valeurs «véridiques» ou «fausses» en une booleanvaleur intrinsèque , par exemple var name = 'me', hasName = !!name;.
— WynandB
4

Si vous souhaitez cibler IE 10 avec Vanilla JavaScript, vous pouvez essayer la détection des propriétés CSS: 

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

Propriétés CSS

Au lieu de cela, msTouchActionvous pouvez également utiliser l'une de ces propriétés CSS, car elles ne sont actuellement disponibles que dans IE 10. Mais 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 sur CodePen.

— TimPietrusky
source
3

clipBoardData est une fonction qui n'est disponible que dans 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>
— Njaal Gjerde
source
-1: mais qu'en est-il des versions? comment savoir quelle version est?
— Francisco Corrales Morales
Le navigateur Edge n'a pas non plus "window.clipboardData"
— AFD
@AFD Cette question concerne IE, pas Edge.
— TylerH
3

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*/
}
— svnm
source
1

Vous pouvez utiliser la détection des fonctionnalités 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

— George Filippakos
source
1

Avec JavaScript:

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

Travaillez pour tous IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

Alors changez /Trident/gpar /Trident/x.0/goù x = 4, 5, 6ou 7(ou peut-être 8pour l'avenir).

— Evénements Ender
source
1

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

Tout ce que vous avez à faire est de l'ajouter quelque part et vous pouvez toujours vérifier avec une condition simple. La variable globale isIEne sera pas définie si ce n'est pas un IE, sinon ce sera le numéro de version. Ainsi, vous pouvez facilement ajouter des éléments similaires if (isIE && isIE < 10)ou similaires.

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;
}());
— Jan.
source
0

Pour moi, le code suivant fonctionne correctement, tous les commentaires conditionnels fonctionnent dans toutes les versions d'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 cela est lié à la mise à jour ie11 ...

— Alex
source
1
Le (gt IE 11)bit est complètement inutile. Vous pouvez aussi bien le faire à la <!--[if !(IE)]<!-->place.
— BoltClock
BoltClock si (gt IE 11) est laissé de côté et que le navigateur de l'utilisateur est IE 12 (quand il sortira), il n'y aurait pas d'élément html défini.
— Leonardo Gonzalez
0

Voici comment faire du 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{
    .......
}
— Francisco Corrales Morales
source
0

utiliser babel ou dactylographié 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;
};
Développer l'extrait

— Aliaksandr Shpak
source
Salut Aliaksandr, merci pour l'idée! Je ne sais pas pourquoi quelqu'un a voté contre, mais j'ai voté pour parce que la réponse est au moins un indice utile. Quiconque refuse de voter, pourquoi ne pas aider un nouvel utilisateur avec des conseils utiles?
— trusktr
-2

Cette réponse m'a conduit à 90% du chemin. J'ai trouvé le reste de ma réponse sur le site de Microsoft ici .

Le code ci-dessous est ce que j'utilise pour tout cibler, c'est-à-dire en ajoutant une classe .ie à <html>

Utilisez jQuery (qui a désapprouvé .browser en faveur des agents utilisateurs dans la version 1.9+, voir http://api.jquery.com/jQuery.browser/ ) pour ajouter une classe .ie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});
— bdanin
source
"qui a désapprouvé .browser en faveur des agents utilisateurs dans la version 1.9+" Il ne dit pas "en faveur des agents utilisateurs" - quoi que cela signifie - il dit en faveur de la détection des fonctionnalités .
— BoltClock
-2

Si cela ne vous dérange pas de cibler les navigateurs IE10 et supérieurs et non IE, 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

— user1003757
source
1
Je ne l' ai pas -1 votre réponse , mais le lien semble un peu outd- huit -ed. Il convient également de noter que OP avait pour objectif de cibler uniquement IE10 et IE10. Quoi qu'il en soit, votre extrait de code ne fonctionnera ni pour IE10 et supérieur, ni pour tout autre navigateur non-IE, car les commentaires conditionnels ne sont pris en charge que dans IE5 jusqu'à IE9.
— WynandB
-2

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

La source

— nyuszika7h
source
-4

solution moderne pour css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
— Raphael
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.