Как лучше сделать фолбэк для CSS Grid и стоит ли?

Question

[r_g_b_a]

Здравствуйте.
Хочу использовать гриды с фолбэком для старых браузеров. Во всех гайдах, что я нашел, используют директиву @supports. И делают это следующим образом - сначала пишут код на flexbox/inline-block/float, потом внутри @supports переопределяют все с использованием гридов для современных браузеров. Например:

.photo-layout {
    display: flex;
    flex-wrap: wrap;
}
.photo-layout > div {
    width: 200px;
    margin: 1rem;
}
@supports (display: grid) {
    .photo-layout {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 2rem;
    }
    .photo-layout > div {
        margin: 0;
        width: auto;
    }
}

Мне на ум пришла следующая идея - разбить код на два css-файла. В первом мы сразу верстаем гридами и подключаем на сайт. Второй содержит только код для старых браузеров и подключается динамически при необходимости. Детектить поддержку можно тем же Modernizr (2.08 kB gzipped)

if (!Modernizr.cssgrid) {
	// подгружаем grid-fallback.css
}

Из плюсов я вижу следующее:
1) Код основного файла стилей намного чище и сам файл будет гораздо меньше весить, по сравнению с первым способом.
2) В будущем, когда отпадет необходимость поддерживать старые браузеры, достаточно будет отключить скрипт.

Меня беспокоит только одно - я не смог нагуглить ни одной статьи, где бы рассказывали о таком подходе. Вероятно, в данной реализации есть какие-то существенные минусы, которые я упускаю из виду?

Ну и второй вопрос по теме - часто ли вы под конец 2020 используете гриды и делаете ли поддержку для IE11 и старых сафари <=10.2? Потому что есть заказчики, для которых можно сверстать сайт для последнего хрома и они будут счастливы. Но я, как разработчик, стремлюсь делать работу качественно. И тут есть выбор - писать более чистый и минимальный код, используя всю мощь css-переменных, гриды с их gap, auto-fill. Или на флексах городить обертки с полями, отрицательными отступами и медаизапросами, но зато дополнительно у 3-5% пользователей сайт будет нормально отображаться.

Answer 1

[sergski]

Решение создавать отдельные css для разных версий браузеров из стародавних времен (типа ie7,-8-9), и имеет смысл, если у вас отдельный бюджет от заказчика на поддержку старых версий.
Сейчас половина трафика уже с моб.версий сайтов и разумнее идеально сделать "сначала мобильные", чем писать двойной код для исчезающего кол-ва адептов ie11) да и поддерживать такой код довольно неудобно.
Сообщество, имхо уже пришло к мнению, что верстка не обязана выглядеть одинаково везде, достаточно, чтобы она на старых версиях выглядела аккуратно.
А ваш пример можно переписать так без ущерба и заметно меньше и поддерживать удобнее:

.photo-layout {
    display: flex;
    flex-flow: row wrap;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.photo-layout > div {
    width: auto;
    flex: 1;
    margin: 1rem;
}