Как задать отдельные стили только для браузера 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 массива в один

Простой пример, как объединить 2 массива в один, чтобы соответствующие элементы каждого массива были помещены…

Убираем из адреса страницы .html для статических сайтов

Редирект с .html Задача простая — убрать из урла расширение страницы .html. Чтобы вместо было:…

background-position чуть подробнее

В общем, background-position — очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения….

Быстрое копирование сайта с помощью плагина website-scraper

Копирование сайта с помощью Website Scraper — https://www.npmjs.com/package/website-scraper. Запускаем консоль в нужной директории и устанавливаем…

2 комментария

modernizr.com/download?svgfilters-setclasses

А можно просто подключить modernizr с проверкой этой фичи

Можно, но это дополнительная библиотека всего для одного момента.
Это просто пример, как быстро задетектить IE.

Ответить