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