Поддерживать или не поддерживать

Как вы должны устранять несоответствия между браузерами при создании вашего модного веб-сайта? В конце концов вы столкнетесь с этой ситуацией, как веб-разработчик. Думаю, общего правила нет, но я довольно твердо верю в прогрессивное улучшение. Философия заключается в том, чтобы предоставить базовую версию для всех, кроме расширенных версий для пользователей с современными браузерами и большей пропускной способностью. Их следует вознаграждать, а не наказывать за то, что они идут в ногу со временем, в то время как менее удачливые по-прежнему удовлетворяют свои основные потребности.

Запросы функций

Вам нужен JavaScript (пример: Modernizr), чтобы сделать это? Не очень, лишний раз можно было решить проблему в пределах своего домена.

Функциональные запросы помогут вам в этом, т. е. с помощью правила @supports в CSS:

rule @supports CSS позволяет указать объявления, которые зависят от поддержки браузером одной или нескольких определенных функций CSS. Это называетсязапросом функций. Правило может быть размещено на верхнем уровне вашего кода или вложено в любое другое условное групповое правило at.

[MDN]

Это работает, если использовать правило в сочетании с парой свойство/значение CSS, типичным примером является display: grid:

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

Не буду здесь вдаваться в подробности, на эту тему уже есть десятки (а может и больше) руководств.

Вы также можете знать, что естественное поведение CSS заключается в том, чтобы пропустить строку кода, которую браузер не понимает, вместо того, чтобы выдавать ошибки, например, оставляя квадрат с закругленными углами вместо круглого при использовании border-radius, поэтому во всех случаях вам не понадобится @supports. Но когда ваши объявления становятся более сложными и описывают более полную функцию, такую ​​как макет сетки, это может быть хорошей идеей.

Без функциональных запросов

Интересно, что, принимая во внимание последний абзац, даже если браузер не поддерживает правило @supports, он пропустит его, что, по иронии судьбы, сделает его эффективным, как в случае с IE11 (который, кстати, поддерживает сетку макет, так что не беспокойтесь об этом).

Таким образом, используя поддержку запросов функций и поддержку функций в браузере, вы можете создать матрицу для определения того, будет ли применяться CSS или нет. Об этом рассказывается в этой статье Джен Симмонс:

Просто кое-что, о чем нужно знать. Принимая все во внимание, автор рекомендует следующую стратегию:

// fallback code for older browsers
@supports (display: grid) {
 // code for newer browsers
 // including overrides of the code above, if needed
}

Некоторые браузеры старше других. Возьмем, к примеру, IE6, там вы бы использовали условные комментарии:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Но вы должны серьезно рассмотреть экономическое обоснование для этого. Посмотрите на статистику и прочее.

Медиа-запросы – еще одна хитрость, которую стоит иметь в арсенале. Например, чтобы отфильтровать определенные правила CSS IE11, вы можете сделать следующее:

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop {
 /* IE11 styles here */
}

Это работает, потому что когда пользовательский агент не может разобрать селектор, он игнорирует селектор и следующий за ним блок объявления — и не полагаясь на JavaScript.

Примеры

С помощью SASS вы можете создать миксин, как показано ниже, чтобы справиться с этим.

@mixin ieOnly { 
  @media not all and (pointer: coarse) {
    *::-ms-backdrop {
      @content;
    }
  }
}

С React и Styled Components вы можете сделать это (пример Typescript):

// cssUtils.ts
import { css } from "styled-components";
export const IEOnly: Function = style => {
  return css`
    @media all and (-ms-high-contrast:none) {
      *::-ms-backdrop, & {
        ${style};
      }
  `;
};

IE11 не справляется со многими вещами так, как вы ожидаете. Например, 3D-преобразования. В этой сути я использую это, чтобы продемонстрировать пример реализации.

https://gist.github.com/perjo927/ad682b83980518fb1406e0b6e6912a83

Пример использования миксина SASS в этом ручке.

https://codepen.io/programmerper/pen/vjgWNO