Как задать отдельные стили только для браузера IE 11 и Edge
Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих браузерах не поддерживаются фильтры для свг и соответственно свг-шка не отображается как положено (или вообще не отображается).
В общем, все известные мне способы из интернета, как задетектить IE, не сработали или сработали не так как ожидалось, пробовал и эти варианты, и многие другие:
@media screen and (min-width:0\0) { }
@media all and (-ms-high-contrast: none) { }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { }
@supports (-webkit-appearance: none) { }
Поэтому пришлось прибегнуть к старому доброму определению браузера IE с помощью JS:
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
Если isIE
равно true
, значит можем навесить на любой элемент класс .ie-support
, в моем примере, для меня лучше навесить данный класс на body
, потому как потом можно обратиться к любому элементу внутри body
:
if (isIE) {
$('body').addClass('ie-support');
}
И уже в стилях можем задать любые нужные правила для элементов, если страница открыта в браузере IE:
.ie-support svg path {
filter: none;
}
Данные правила сработают только в браузере IE11 или Edge.
Простой пример, как объединить 2 массива в один, чтобы соответствующие элементы каждого массива были помещены…
Редирект с .html Задача простая — убрать из урла расширение страницы .html. Чтобы вместо было:…
В общем, background-position — очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения….
Копирование сайта с помощью Website Scraper — https://www.npmjs.com/package/website-scraper. Запускаем консоль в нужной директории и устанавливаем…
2 комментария
Ответить
modernizr.com/download?svgfilters-setclasses
А можно просто подключить modernizr с проверкой этой фичи
Можно, но это дополнительная библиотека всего для одного момента.
Это просто пример, как быстро задетектить IE.