От автора: каждый хочет использовать CSS Grid. Речь идет о новом методе верстки, который существенно изменит способ разработки контента в Вебе. С помощью CSS Grid у вас есть возможность размещать контент на веб-сайте в беспрецедентной форме и динамически сортировать его по областям просмотра.
Этот метод появился, поскольку многие авторы веб-сайтов имели слишком ограниченные возможности работы с сеткой. Что касается разнообразия устройств, на которых сегодня представлены веб-сайты, это состояние не было устойчивым. И был создан CSS Grid.
Да, CSS Grid является новым. Но он уже поддерживается довольно хорошо. Это новая технология, появившаяся недавно, поэтому нам нужно провести обзор экосистемы этой технологии и посмотреть, где мы можем ее использовать. Поскольку этот метод должен поддерживаться браузером, мы можем проверить текущую поддержку браузера на caniuse.com.
Это показывает нам, что все основные браузеры поддерживают CSS Grid. Но что, если клиенту нужна поддержка IE 10 + 11 или более ранних версий Internet Explorer? Я попытаюсь ответить на этот вопрос в этой статье.
Использование Autoprefixer
Существует общая проблема с отображением атрибутов CSS во всех браузерах с одинаковым эффектом, поэтому были разработаны полностью автоматизированные инструменты, которые могут улучшить ваш код, а вы тем временем можете приготовить себе кофе, но недолго, потому что все это происходит менее чем за одну секунду. Autoprefixer — это инструмент, который проверяет CSS-код и добавляет необходимые атрибуты для унификации кода во всех браузерах. С помощью Autoprefixer вы можете охватить все браузеры, в которых поддерживаются атрибуты CSS Grid, включая Internet Explorer 10/11. Для браузеров, которые не поддерживаются, вы используете запасные варианты.
Svelte — рецепт успешного фреймворка?
Запланируйте откат с первой строки кода
Поскольку все еще существуют браузеры, которые не поддерживают CSS Grid (около 10% всех браузеров в мире), мы полагаемся на создание альтернативных решений. Здесь в игру вступают резервные варианты. Этот метод работает, обнаруживая неподдерживаемые браузеры и затем предоставляя им другой код, который они поддерживают. Лучший способ сделать это — использовать следующий аргумент, если вы решили поддерживать IE10 + 11 через префиксы -ms:
Если вы хотите использовать другой код для Internet Explorer 10 и 11 и других неработающих браузеров, вы можете использовать следующую резервную директиву:
С помощью запросов @support у вас есть возможность создать макет для старых браузеров, полностью независимый от CSS Grid.
Убедите клиента с помощью правильных аргументов
Вы должны убедить своих клиентов в целесообразности использования этой новой и захватывающей технологии. Преимуществами здесь являются гибкая реструктуризация контента и лучшая доступность метода макета, который в противном случае может быть реализован только с помощью «тяжелых» фреймворков, таких как bootstrap.
Благодаря резервным вариантам, охватывающим браузеры, которые не поддерживают CSS Grid, вы можете использовать сегодня эту технологию без колебаний.
CSS Grid будет доминировать
Надеемся, что через 1–2 года вы сможете устранить ошибки в коде. Браузеры, такие как Internet Explorer, будут заменены на Edge (с Chrome Engine) или другие браузеры с поддержкой CSS Grid, а CSS Grid будет преобладать в качестве метода макета.
Автор: Felix Häberle
Редакция: Команда webformyself.