Как настроить таргетинг только на Internet Explorer 10 для определенных ситуаций, таких как CSS или JavaScript-код, специфичный для Internet Explorer?
Я пробовал это, но он не работает:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10 игнорирует условные комментарии и использует <html lang="en" class="no-js"> вместо <html class="no-js ie10" lang="en">.
Возможно, вы можете попробовать jQuery следующим образом:
if ($.browser.msie && $.browser.version === 10) {
$("html").addClass("ie10");
}
Чтобы использовать этот метод, вы должны включить библиотеку jQuery Migrate, потому что эта функция была удалена из основной библиотеки jQuery.
Разработал у меня неплохо. Но, безусловно, нет замены условных комментариев!
Я бы не использовал JavaScript navigator.userAgent или $. browser (который использует navigator.userAgent), поскольку он может быть подделан.
Чтобы настроить таргетинг на Internet Explorer 9, 10 и 11 (Примечание: также последний Chrome):
@media screen and (min-width:0\0) {
/* Enter CSS here */
}
Чтобы настроить таргетинг на Internet Explorer 10:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS here */
}
Чтобы настроить Edge Browser:
@supports (-ms-accelerator:true) {
.selector { property:value; }
}
Источники:
Я нашел решение на этом сайте, где у кого-то был ценный comment:
Решение:
if (Function('/*@cc_on return [email protected]*/')()){
document.documentElement.className+=' ie10';
}
Это
Internet Explorer 10 больше не пытается читать условные комментарии. Это означает, что он будет обрабатывать условные комментарии так же, как любой другой браузер: как регулярные комментарии HTML, предназначенные для полного игнорирования. Рассматривая разметку, указанную в вопросе в качестве примера, все браузеры, включая IE10, будут игнорировать фрагменты комментариев, выделенные серым цветом, полностью. В стандарте HTML5 не упоминается синтаксис условных комментариев, и именно поэтому они решили отказаться от поддержки в IE10.
Обратите внимание, однако, что условная компиляция в JScript по-прежнему поддерживается, как показано в комментариях, а также более поздние ответы. Это не уходит в финальный выпуск, в отличие от jQuery.browser. И, конечно же, само собой разумеется, что нюхание пользователя-агента остается столь же хрупким, как никогда, и никогда не должно использоваться ни при каких обстоятельствах.
Если вы действительно должны нацелиться на IE10, используйте условную компиляцию, которая может по-прежнему видеть поддержку в ближайшем будущем, или - если вы можете помочь ей - используйте библиотеку обнаружения функций, такую как Modernizr вместо (или в сочетании) с обнаружением браузера. Если ваш случай использования не требует noscript или размещения IE10 на стороне сервера, пользовательский нюанс агента будет скорее головной болью, чем жизнеспособным вариантом.
Звучит довольно громоздко, но помните, что в качестве современного браузера, который очень соответствует сегодняшним веб-стандартам 1 предполагая, что вы написали совместимый код, который соответствует стандартам, вам не нужно отложите специальный код для IE10, если это абсолютно необходимо, т.е. он должен походить на другие браузеры с точки зрения поведения и рендеринга. 2 И это звучит надуманно, учитывая историю IE, но сколько раз вы ожидали Firefox или Chrome ведут себя одинаково, только чтобы встретить смуту?
box-sizing unprefixed в течение многих летЕсли у вас есть законная причина для ориентации на определенные браузеры, непременно вынюхивайте их другими инструментами, предоставленными вам. Я просто говорю, что вам будет гораздо труднее найти такую причину сегодня, чем то, чем она была раньше, и на самом деле это не то, на что вы можете положиться.
1 Не только IE10, но и IE9 и даже IE8, который обрабатывает большую часть зрелого стандарта CSS2.1 намного лучше, чем Chrome, просто потому, что IE8 был настолько сосредоточен на соблюдении стандартов (на в то время CSS2.1 уже была довольно стабильной, и только незначительные отличия от сегодняшней рекомендации), в то время как Chrome, похоже, является чуть более полуполированной технической демонстрацией передовых псевдостандартов.
2 И я могу быть предвзятым, когда я говорю это, но он уверен, что это так. Если ваш код работает в других браузерах, но не в IE, вероятность того, что это проблема с вашим собственным кодом, а не IE10 намного лучше, скажем, 3 года назад, с предыдущими версиями IE. Опять же, я могу быть предвзятым, но позвольте быть честным: не так ли? Просто посмотрите на свои комментарии.
Хорошим местом для начала является Документация по поддержке стандартов IE.
Вот как настроить IE10 в JavaScript:
if ("onpropertychange" in document && !!window.matchMedia) {
...
}
Вот как настроить IE10 в CSS:
@media all and (-ms-high-contrast: none) {
...
}
В случае, если IE11 необходимо отфильтровать или reset через CSS, см. другой вопрос: Как написать CSS-хак для IE 11?
Оба решения, размещенные здесь (с небольшими изменениями), работают:
<!--[if !IE]><!--><script>if(/*@[email protected]*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->
или
<script>if(Function('/*@cc_on return [email protected]*/')()){document.documentElement.className='ie10';}</script>
Вы добавляете одну из вышеуказанных строк внутри основного тега вашей html-страницы до вашей ссылки css. А затем в файле css вы указываете свои стили, имеющие класс "ie10" в качестве родителя:
.ie10 .myclass1 { }
И вуаля! - другие браузеры остаются нетронутыми. И вам не нужен jQuery. Вы можете увидеть пример, как я его реализовал здесь: http://kardash.net.
Я написал небольшой ванильный плагин JavaScript под названием Макет Engine, который позволяет вам обнаруживать IE 10 (и каждый другой браузер) простым способом, который нельзя подделать, в отличие от пользователя агент нюхает.
Он добавляет имя механизма рендеринга в качестве класса в теге html и возвращает объект JavaScript, содержащий поставщика и версию (если необходимо)
Отправляй сообщение в своем блоге: http://mattstow.com/layout-engine.html и получите код на GitHub: https://github.com/stowball/Layout-Engine
Я использую этот script - он устарел, но эффективен в таргетинге на отдельный Internet Explorer 10 лист стилей или файл JavaScript, который включен , только если браузер это Internet Explorer 10, так же, как и с условными комментариями. Нет jQuery или другого плагина.
<script>
/*@cc_on
@if (@_jscript_version == 10)
document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
@end
@*/
</script >
Вы можете использовать PHP для добавления таблицы стилей для IE 10
Как
if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
<link rel="stylesheet" type="text/css" href="../ie10.css" />
}
Если вы должны это сделать, вы можете проверить строку пользовательского агента в JavaScript:
var isIE10 = !!navigator.userAgent.match(/MSIE 10/);
Как говорили другие люди, я всегда рекомендую обнаружение функций.
Если вы хотите настроить IE 10 на ванильный JavaScript, вы можете попробовать использовать свойство CSS:
if (document.body.style.msTouchAction != undefined) {
document.body.className = 'ie10';
}
Вместо msTouchAction вы также можете использовать один из этих свойств CSS, потому что в настоящее время они доступны только в IE 10. Но это может измениться в будущем.
Я собрал тестовую страницу со всеми свойствами в CodePen.
clipBoardData - это функция, доступная только в IE, поэтому, если вы хотите настроить таргетинг на все версии IE, вы можете использовать
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
</script>
CSS для IE10 + и IE9
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ styles */
}
@media screen\0 {
/* IE8,9,10 styles*/
}
Вы можете использовать обнаружение функции, чтобы увидеть, является ли браузер IE10 или больше:
var isIE = false;
if (window.navigator.msPointerEnabled) {
isIE = true;
}
Только true, если > IE9
Conditionizr (см. docs) добавит CSS-классы браузера к вашему элементу html, включая ie10.
Я просто хотел добавить свою версию обнаружения IE. Он основан на фрагменте, найденном в http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ и удаляется, чтобы также поддерживать ie10 и ie11. Он обнаруживает IE 5-11.
Все, что вам нужно сделать, это добавить его где-нибудь, а затем вы всегда можете проверить с помощью простого условия. Глобальный var isIE будет undefined, если это не IE, иначе он будет номером версии. Таким образом, вы можете легко добавить такие вещи, как if (isIE && isIE < 10) или аналогичный.
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;
}());
Отъезд 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 */
}
С JavaScript:
if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
document.getElementsByTagName('html')[0].className= 'no-js ie'; }
Работайте для всех IE.
IE08 => 'Trident/4.0'
IE09 => 'Trident/5.0'
IE10 => 'Trident/6.0'
IE11 => 'Trident/7.0'
Итак, измените /Trident/g на /Trident/x.0/g, где x = 4, 5, 6 или 7 (или, возможно, 8 на будущее).
Для меня следующий код работает нормально, все условные комментарии работают во всех версиях 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>
Я на windows 8.1, не уверен, связано ли это с обновлением ie11...
Вот как я делаю пользовательский CSS для Internet Explorer:
В моем файле 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.
}
}
});
И затем в моем файле CSS y определите каждый другой стиль:
.ie10 .some-class span{
.......
}
.ie8 .some-class span{
.......
}
используйте Babel или машинопись для преобразования этого кода 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;
};Этот ответ дал мне 90% пути. Я нашел остальную часть своего ответа на Сайт Microsoft здесь.
Ниже приведен код, который я использую для таргетинга на все, т.е. добавив класс .ie к <html>
Использовать jQuery (который устарел .browser в пользу пользовательских агентов в 1.9+, см. http://api.jquery.com/jQuery.browser/) для добавления класса .ie:
// ie identifier
$(document).ready(function () {
if (navigator.appName == 'Microsoft Internet Explorer') {
$("html").addClass("ie");
}
});
Если вы не против таргетинга на браузеры IE10 и выше и не IE, вы можете использовать этот условный комментарий:
<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->
Получено из http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
Если вам действительно нужно, вы можете сделать работу с условными комментариями, добавив следующую строку в <head>:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
современное решение для css
html[data-useragent*='MSIE 10.0'] .any {
your-style: here;
}