До марта 2017 года браузеры практически не поддерживали вёрстку с помощью гридов. Internet Explorer и Edge были единственными браузерами, которые поддерживали гриды, но только с префиксом -ms-. К тому же, поддержка была для старой версии спецификации (с тех пор она сильно поменялась).
На самом деле, Firefox, Chrome и Opera также поддерживали гриды, но только через настройки (layout.css.grid.enabled в Firefox на странице about:config, и путём включения «Experimental Web Platform features» в Chrome и Opera на странице chrome://flags).
Однако март 2017 года стал весьма значимым месяцем для вёрстки гридами. Поддержка гридов была практически одновременно развёрнута как минимум в шести основных браузерах. Подобное синхронное продвижение новой функции редко (если вообще когда-либо) случалась раньше с браузерами. Думаю, это говорит нам о том, что гриды не исчезнут в ближайшее время!
Вот описание текущей ситуации с сайта Caniuse.com:
Хорошая новость заключается в том, что большинство основных браузеров гриды теперь поддерживают.
Плохая новость заключается в том, что есть ещё много людей, использующих браузеры, которые гриды не поддерживают. Так что эти пользователи не смогут увидеть ваш новый чудесный макет.
Другая хорошая новость заключается в том, что со временем они наверстают упущенное. Но до тех пор, если вы хотите использовать гриды на своих рабочих сайтах, вам, вероятно, следует использовать запасной вариант, чтобы браузеры, не поддерживающие гриды, могли показывать сайт так, как вы задумали (или близко к тому).
Проверка гридов с помощью @supports
Лучший способ использовать гриды и поддерживать старые браузеры — применить правило @supports. Если поддерживает, то используйте макет с гридами, иначе браузер увидит макет, построенный с помощью старых методов (например, обтекаемых элементов или, осмелюсь сказать, таблиц).
Правило @supports работает следующим образом:
@supports (display: grid) {
.wrapper {
display: grid;
min-height: 100vh;
…
}
}
Данный код не требует пояснений. Я просто указал декларацию свойство: значение, которое хочу проверить. Если браузер поддерживает данную декларацию, то он выполнит код между фигурными скобками. Если нет, то пропустит код полностью.
Итак, чтобы это работало, вам нужно указать код отказа перед правилом @supports. Например:
/* Здесь старый код */
/* Здесь код для гридов */
@supports (display: grid) {
.wrapper {
display: grid;
min-height: 100vh;
…
}
}
Таким образом, вы настраиваете все браузеры со старым кодом, а затем запускаете код грида из @supports. То есть, если браузер гриды не поддерживает, он пропустит этот блок и продолжит использовать старый код.
Если браузер не поддерживает @supports, он пропустит его целиком и, следовательно, будет использовать старый код.
Поддержка Microsoft Edge
Microsoft Edge и Internet Explorer поддерживают гриды с помощью расширения -ms-, поэтому вы можете изменить приведённый выше код на такой:
@supports ((display: -ms-grid) or (display: grid)) {
.wrapper {
display: grid;
min-height: 100vh;
…
}
}
Однако здесь имеется пара нюансов.
Во-первых, Internet Explorer поддерживает гриды, но не @supports. Поэтому он пропустит весь запрос и всё равно использует старый код.
Во-вторых, оба этих браузера поддерживают старую версию спецификации CSS Grid. Поэтому нужно убедиться, что любой код с гридами, который вы напишете, будет корректно работать в этих браузерах. В этом случае можно создать отдельный запрос для «стандартных» гридов, а другой для «ms» гридов. Например:
/* Здесь старый код */
@supports ((display: -ms-grid) or (display: grid)) {
/* Здесь стандартный код */
}
@supports (display: -ms-grid) {
/* Здесь ms код */
}