Comment dois-je cibler uniquement Internet Explorer 10 pour certaines situations, comme Internet Explorer CSS spécifiques ou Internet Explorer code JavaScript spécifique?
Comment dois-je cibler uniquement Internet Explorer 10 pour certaines situations, comme Internet Explorer CSS spécifiques ou Internet Explorer code JavaScript spécifique?
J'ai essayé ceci, mais ça 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 le <html lang="en" class="no-js">
au lieu de <html class="no-js ie10" lang="en">
.
- ce type de situation ?
- Tout type de situation. En particulier, j'ai un CSS situation sur mes mains. J'ai un peu de CSS qui a l'air bien dans webkit, mais hideuse dans IE10.
- Je pense qu'une meilleure question serait : Comment puis-je obtenir cette CSS de regarder la même chose sur les deux navigateurs ?
- Que peut-être une autre option, mais techniquement non, parce que je veux être en mesure de cibler IE10 pour certains scripts ainsi.
- IE10 PP4 prend Toujours en charge de la
@cc_on
de l'instruction. Donc, pour détecter si IE10 est pris en charge ou pas, vous pouvez utiliser le code suivant:<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->
. (J'ai posté un commentaire, depuis IE est encore en développement, donc il ne sait pas si la dernière version prend en charge cette fonctionnalité) - Aussi douloureux que cela puisse être d'entendre cela, vous avez l'air de faire les choses correctement. Publier vos CSS et/ou JavaScript de votre et je suis sûr qu'on peut s'assurer de l'adéquation des solutions de rechange pour la compatibilité inter-navigateur. IE10 ne devrait pas nécessiter une attention particulière.
- Votre exemple de code va être trompé une fois ie11 est 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 le commentaire de décapage de compression/traitement; aucune classe ajoutée pour ie11; travaillera avec ie11 cours d'exécution dans ie10 mode de compatibilité; n'a pas besoin autonome balise de script (peut-être simplement ajoutés à d'autres javascript en tête). - L'exemple ci-dessus l'extrait de code: jsbin.com/upofoq/2
- Plus génériques, la solution est:
if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';
- qui résout 90% des questions (parfois les modes de compatibilité de l'échec, dans ce cas vous avez besoin d'un autre niveau de fixer sur le dessus de cela).
Vous devez vous connecter pour publier un commentaire.
Peut-être que vous pouvez essayer quelques-uns de jQuery comme ceci:
Pour utiliser cette méthode, vous devez inclure jQuery Migrate bibliothèque parce que cette fonction a été retirée de la principale bibliothèque jQuery.
Travaillé très bien pour moi. Mais sûrement pas de remplacement pour les commentaires conditionnels!
== '10.0'
pour que cela fonctionnejQuery.browser
n'est plus disponible dans la version actuelle de jQuery (1.9) sans plugin. blog.jquery.com/2013/01/15/...if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }
Note le version < 10 pour détecter les anciennes versions d'IE. IE10 et ci-dessus fonctionne très bien avec tous mes CSS3, HTML5, jquery, etc.'10.0'
, et si à l'aide de CoffeeScript, vous devez l'utiliser, depuis==
/is
est traduite en===
.Je ne voudrais pas utiliser JavaScript
navigator.userAgent
ou $.navigateur (qui utilisenavigator.userAgent
), puisqu'il peut être usurpée.À la cible d'Internet Explorer 9, 10 et 11 (Note: également le dernier Chrome):
À la cible d'Internet Explorer 10:
Pour cible Bord de Navigateur:
Sources:
navigator.userAgent
"? La compilation conditionnelle est une fonctionnalité intégrée de la JScript d'exécution, qui ne peut pas être usurpée par la chaîne de l'agent utilisateur.J'ai trouvé une solution sur cette site où quelqu'un a eu un précieux commentaire:
La solution est:
Il
navigator.userAgent
?if (/*@cc_on!@*/false && document.documentMode === 10) {}
qui permet de contourner eval avertissements dans le peluchage programmes.Internet Explorer 10 ne vise pas à lire les commentaires conditionnels plus. Cela signifie qu'il va traiter les commentaires conditionnels juste comme n'importe quel autre navigateur: que régulièrement des commentaires HTML, destiné à être ignoré complètement. En regardant le balisage donné dans la question comme un exemple, tous les navigateurs y compris IE10 ignore les commentaires des parties, a souligné de gris, entièrement. La norme HTML5 ne fait aucune mention de commentaire conditionnel de la syntaxe, et c'est exactement pourquoi ils ont choisi d'arrêter de le soutenir dans IE10.
Noter, cependant, que compilation conditionnelle en JScript est toujours pris en charge, comme indiqué dans les commentaires ainsi que la plus récente des réponses. Il ne va pas loin dans la version finale soit, contrairement à
jQuery.navigateur
. Et bien sûr, il va sans dire que l'utilisateur de l'agent sniffing reste aussi fragile que jamais et ne doit jamais être utilisé en toutes circonstances.Si vous devez vraiment la cible IE10, soit utiliser la compilation conditionnelle qui peut encore voir dans un avenir proche, ou — si vous pouvez l'aider à utiliser une fonctionnalité de détection de la bibliothèque comme Modernizr au lieu de (ou en collaboration avec) la détection du navigateur. Sauf si votre cas nécessite noscript ou d'accueillir les IE10 sur le côté serveur, user-agent sniffing va être de plus d'un mal de tête qu'une option viable.
Semble assez lourd, mais n'oubliez pas que comme un navigateur moderne qui est très conforme à aujourd'hui, les standards du Web1, en supposant que vous avez écrit interopérables code qui est très conforme aux normes, vous ne devrait pas mettre de côté un code spécial pour IE10, sauf si absolument nécessaire, c'est à dire qu'il est censé ressembler à d'autres navigateurs en termes de comportement et de rendu.2 Et il semble exagéré, étant donné IE de l'histoire, mais combien de fois avez-vous prévu de Firefox ou de Chrome à se comporter de la même manière que pour être accueillie avec consternation?
box-sizing
unprefixed pendant des annéesSi vous ne 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 vous êtes va être beaucoup plus difficile de trouver une raison aujourd'hui que ce qu'il utilisé pour être, et c'est vraiment pas juste quelque chose que vous pouvez compter sur.
1 Non seulement IE10, mais IE9, et même IE8 qui gère la plupart de la maturité CSS2.1 norme bien mieux que Chrome, tout simplement parce que IE8 était tellement concentré sur le respect des normes (à ce moment, CSS2.1 a déjà été assez stable, avec seulement des différences mineures de la recommandation faite aujourd'hui), tandis que Chrome semble être un peu plus qu'un demi-poli tech démo de pointe pseudo-normes.
2 Et je suis peut-être biaisé quand je dis cela, mais c'est sûr que l'enfer ne. 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 y a 3 ans, avec les précédentes versions d'IE. Encore une fois, je suis peut-être biaisé, mais soyons honnêtes: n'êtes-vous pas trop? il suffit de regarder vos commentaires.
if (jQuery.browser.msie) { if (jQuery.browser.version < 10) { alert('BAD BROWSER! BAD!!');}}
<!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
Un bon endroit pour commencer est le IE prise en charge des Normes de Documentation.
Ici est de savoir comment cibler IE10 en JavaScript:
Ici est de savoir comment cibler IE10 en CSS:
En cas IE11 doit être filtré ou réinitialiser via CSS, voir un autre
question:
Comment écrire un CSS hack pour IE 11?
Deux solutions posté ici (avec de légères modifications) de travail:
ou
Vous incluez l'une des lignes ci-dessus à l'intérieur de la balise head de votre page html avant de votre lien css. Et puis dans le fichier css, vous spécifiez vos styles avoir "ie10" de la classe en tant que parent:
Et voilà! - les autres navigateurs rester intact. Et vous n'avez pas besoin de jQuery. Vous pouvez voir l'exemple comment j'ai mis en place ici: http://kardash.net.
J'ai écrit un petit, de la vanille JavaScript plugin appelé Moteur de Mise en forme, qui fonctionnalité vous permet de détecter IE 10 (et tous les autres navigateurs), d'une manière simple qui ne peut pas être falsifiée, à la différence de l'agent utilisateur en reniflant.
Il ajoute le moteur de rendu de nom qu'une classe à la balise html et renvoie un objet JavaScript contenant le fournisseur et la version (le cas échéant)
Check out my blog post: http://mattstow.com/layout-engine.html et obtenir le code sur GitHub: https://github.com/stowball/Layout-Engine
J'utilise ce script - c'est archaïque, mais efficace dans le ciblage d'un séparé Internet Explorer 10 de la feuille de style ou un fichier JavaScript qui est inclus seulement si le navigateur est Internet Explorer 10, de la même manière que vous le feriez avec les commentaires conditionnels. Pas de jQuery ou autre plugin.
Vous pouvez utiliser PHP pour ajouter une feuille de style pour IE 10
Comme:
Si vous devez le faire, vous pouvez vérifier la chaîne de l'agent utilisateur en JavaScript:
Comme d'autres personnes l'ont mentionné, j'avais toujours recommander fonctionnalité de détection de la place.
String.match()
retournera un tableau pour un match, ou null si il n'a pas.!(String.match())
fait retourner false pour un match ou vrai pour aucun match.!(!(String.match()))
fait retourner true pour un match ou faux pour pas de match.!(!(something))
ou tout simplement!!something
convertit en conséquence de quoi un booléen (true/false). stackoverflow.com/questions/784929/...boolean
valeur, par exemplevar name = 'me', hasName = !!name;
.Si vous souhaitez cibler, soit 10 à la Vanille, avec JavaScript, vous voudrez peut-être essayer propriété CSS de détection:
Propriétés CSS
Au lieu de
msTouchAction
vous pouvez également utiliser l'une de ces propriétés CSS, parce qu'ils sont actuellement uniquement disponibles dans internet explorer 10. Mais cela pourrait changer dans l'avenir.Page de Test
J'ai mis en place un page de test avec toutes les propriétés sur CodePen.
clipBoardData est une fonction qui n'est disponible que sous IE, donc si vous êtes à la recherche pour cibler toutes les versions IE vous pouvez utiliser
CSS pour IE10+ et IE9
Vous pouvez utiliser la fonctionnalité de détection de voir si le navigateur IE10 ou plus comme:
Vrai uniquement si > IE9
Conditionizr (voir docs) va ajouter navigateur de classes CSS pour votre élément html, y compris ie10.
Avec JavaScript:
De travail pour tous les IE.
Donc changer
/Trident/g
par/Trident/x.0/g
oùx = 4, 5, 6
ou7
(ou peut-être8
pour l'avenir).Je voulais juste ajouter ma version d'IE à la détection. Il est basé sur un fragment trouvé à 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 d'ajouter quelque part et puis vous pouvez toujours vérifier avec un simple condition. Le global var
isIE
sera pas défini si ce n'est pas un IE, ou sinon, il sera le numéro de version. Donc, vous pouvez facilement ajouter des choses commeif (isIE && isIE < 10)
ou semblables.Pour moi, le code suivant fonctionne très bien, tous les commentaires conditionnels sont de travail dans toutes les versions IE:
Je suis sur windows 8.1, vous ne savez pas si c'est lié à ie11 mise à jour...
(gt IE 11)
bits est complètement inutile. Vous pouvez tout aussi bien faire<!--[if !(IE)]<!-->
à la place.Voici comment je le fais custom CSS pour Internet Explorer:
Dans mon fichier JavaScript:
Et puis dans mon fichier CSS, y définissent chaque style différent:
Découvrez http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/
utilisation babel ou tapuscrit pour convertir ce code js
JS:
Cette réponse m'a fait 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 je suis en utilisant à la cible de toutes c'est à dire par l'ajout d'un .ie de la classe de
<html>
Utiliser jQuery (qui obsolète .navigateur en faveur des agents utilisateurs dans 1,9+, voir http://api.jquery.com/jQuery.browser/) pour ajouter un .ie de la classe:
Si vous n'avez pas l'esprit de ciblage de IE10 et ci-dessus et non IE navigateurs, vous pouvez utiliser ce commentaire conditionnel:
Dérivé de http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
Si vous avez vraiment, vous pouvez faire des commentaires conditionnels de travail en ajoutant la ligne suivante à
<head>
:Source
solution moderne pour css