Использование CSS Grid и его адаптация под масштаб

Использование CSS Grid и его адаптация под масштаб

От автора: в прошлом месяце мы запустили редизайн Thomasnet.com — сайта американской обрабатывающей промышленности (и компании, которой посчастливилось нанять меня на полный рабочий день). Редизайн, в котором мы решили пойти ва-банк при помощи CSS Grid. Это веб-сайт, который в одном только январе получил 100k + посетителей в Internet Explorer 11 – первого среди браузеров не поддерживающего CSS Grid.

То, что использование CSS Grid уже реально в производстве, на самом деле не секрет. От уверенности команды до откатов, вот подход, который мы применили к Thomas с реализацией CSS Grid.

Краткое руководство по CSS Grid

(Те, кто и так всё это знает, могут пропустить изучение основ)

CSS Grid — это спецификация, которая стандартизирует подход к макетам в интернете — спецификация, которой исполнилось семь лет. Это ОГРОМНЫЙ шаг вперед для дизайна в интернете.

Как ни странно, CSS Grid изначально была предложена Microsoft еще в апреле 2011 года.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Версия спецификации без префиксов была впервые выпущена в Firefox, Chrome и Safari в марте 2017 года. 16 октября 2017 года Microsoft наконец-то выпустили Edge 16 с полной поддержкой, сделав это в тот день, когда макет таблицы CSS был официально принят всеми основными браузерами (Я предупреждал вас об иронии).

Решение о CSS Grid было довольно простым: мы хотели построить сайт с надежным дизайном, ориентированный на будущее, с целью использования возможностей браузера там, где это реально, чтобы вывести производительность и эффективность на первое место.

Я не стану утомлять вас подробностями, объясняя преимущества CSS Grid над существующими решениями, об этом было достаточно много написано в интернете.

«Ага» моменты в CSS Grid

Изначально мы не были так уверены, зная, что спецификация доступна в основных браузерах всего лишь несколько месяцев. Также потому, что мы уже выбрали Bootstrap в качестве базового фреймворка, который поставляется в комплекте с широко адаптированной системой Grid на основе Flexbox.

Момент «ага» настал, когда мы собрали компонент, который потребовал изменения порядка разметки для переменного варианта.

Это не новаторский шаблон дизайна, и соблюдение разметки во время чередования конструкций имело решающее значение для масштабируемости и эффективности компонентов на основе системы проектирования, которую мы собирали.

Grid Template Areas — функция, которая убедит большинство фанатов Flexbox в том, что Grid — это превосходный подход к размещению (подробнее о Grid vs. Flexbox ниже). Возможность переключения порядка элементов, не касаясь разметки или реализации какого-либо мастерства JS, сразу же подкупила команду и сделала CSS Grid очевидным решением.

(PS. Я уверен, что вы могли бы воссоздать один и тот же чередующийся набор шаблонов, не внося изменений в разметку, используя только float в 1.5 строках кода, и набирая с завязанными глазами — я понимаю, вы ниндзя. Но этот случай стал примером для нас.)

Разрешение споров по CSS Grid и Flexbox

Когда мы начали рассматривать CSS Grid, один и тот же вопрос всплывал снова и снова:

Разве вы не можете сделать это с помощью Flexbox?

И да и нет. На базовом уровне:

Flexbox позволяет настраивать правила в одном измерении, то есть вам нужно выбирать или строки или столбцы, но не всё сразу.

CSS Grid, с другой стороны, является двухмерным, позволяя одновременно адресовать как строки, так и столбцы в дополнении к более широкому набору правил специально предназначенных для макетов.

(И, как я уже упоминал выше, CSS Grid имеет Grid Template Areas, что стало причиной для того, чтобы большинство разработчиков, с которыми я говорил, приняли Grid.)

Вместо того, чтобы выбирать из двух зол, мы согласились использовать CSS Grid на уровне макета, а Flexbox на уровне компонентов (организация дочерних элементов компонентов). Хотя есть некоторые совпадения, и в некоторых случаях оба могут использоваться взаимозаменяемо, соблюдение этого правила помогло нам избежать путаницы в серых областях.

Теперь, когда команда подготовилась, и были рассмотрены различные варианты использования, настало время приступить к работе и выяснить, как же мы хотим реализовать и масштабировать CSS Grid.

Макет основы CSS Grid

С пятью разработчиками, работающими одновременно над front-end веб-сайта и жёстким трехмесячным сроком, наша основа должна была быть идеальной, чтобы поддерживать быстро развивающиеся скоординированные усилия.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Sass mixin

Мы создали простой Sass mixin, который поможет нам поддерживать последовательный разделитель во всех экземплярах Grid.

@mixin display-grid {
 display: grid;
 grid-template-rows: auto;
 grid-gap: 1.5em; 
}

Мы бы включили эту смесь в контейнерный уровень разделов, которые мы хотели включить, чтобы использовать Grid:

.container {
 @include display-grid;
 grid-template-columns: repeat(2, 1fr);
}

Пример с брейкпоинтами:

.container {
 @include media-breakpoint-up(md) {
 @include display-grid;
 grid-template-columns: repeat(2, 1fr);
 }
 @include media-breakpoint-up(lg) {
 grid-template-columns: repeat(4, 1fr);
 }
}

Вот и все. Нет раздутых зависимостей, все в браузере.

Многоразовые классы

В усилиях по поддержанию СУХОГО подхода мы создали классы столбцов, которые позволили нам легко применять правила Grid к любому контейнеру.

%grid-helpers-base {
 @include media-breakpoint-up(md) {
 @include display-grid;
 grid-template-columns: 1fr;
 }
}
.cols-2 {
 @extend %grid-helpers-base;
 @include media-breakpoint-up(md) {
 grid-template-columns: repeat(2, 1fr);
 }
}
.cols-3 {
 @extend %grid-helpers-base;
 @include media-breakpoint-up(md) {
 grid-template-columns: repeat(3, 1fr);
 }
}
.cols-4 {
 @extend %grid-helpers-base;
 @include media-breakpoint-up(md) {
 grid-template-columns: repeat(4, 1fr);
 }
}
.cols-auto-fit {
 @extend %grid-helpers-base;
 @include media-breakpoint-up(md) {
 grid-template-columns: repeat(auto-fit, minmax(15.625em, 1fr));
 }
}

Это помогло нам примерно в 75% сценариев. Для остальных мы создали собственный CSS для каждого макета.

Фоллбеки для браузеров без поддержки

Мы решили не делать в старых браузерах одинаковые макеты, так как это удвоит нашу работу. Некоторые из более привлекательных макетов мы собрали вместе и использовали стандартный двухстолбцовый макет в качестве фоллбека. Мы заметили, что до тех пор, пока веб-сайт можно использовать, и опыт не нарушается, пользователи устаревших браузеров действительно не возражают против того, чтобы не обслуживать последнюю и самую лучшую версию макета.

Modernizr был нашим альтернативным подходом выбора — мы нашли это лучшим вариантом, потому что мы смогли легко отделить резервный код от базы.

Когда CSS Grid недоступна, Modernizr добавляет .no-cssgrid к тегу html страницы. Это позволило нам писать вложенные правила простого обтекания с процентами для браузеров без поддержки.

.no-cssgrid {
 .cols-2 {
 @include media-breakpoint-up(md) {
 >* {
 width: 50%;
 padding-right: $baseline*3;
 float: left;
 margin-bottom: $baseline*3;
 }
 }
 }
 .cols-3 {
 @include media-breakpoint-up(md) {
 >* {
 width: 33.3%;
 padding-right: $baseline*3;
 float: left;
 margin-bottom: $baseline*3;
 }
 }
 }
 .cols-4 {
 @include media-breakpoint-up(md) {
 >* {
 width: 25%;
 padding-right: $baseline*3;
 float: left;
 margin-bottom: $baseline*3;
 }
 }
 }
 .cols-auto-fit {
 @include media-breakpoint-up(md) {
 text-align: center;
 >* {
 min-width: 15.625em;
 padding-right: $baseline*3;
 display: inline-block;
 margin-bottom: $baseline*3;
 }
 }
 }
}

Мы сохранили это, просто установив ограничение на один набор правил в средних размерах экранов просмотра и выше.

На момент написания статьи, мобильный агент Google, используемый для выполнения мобильных тестов, не поддерживал Grid — добавление фоллбеков без медиа-запросов возвращало все наши страницы как «не мобильные». (Мы усвоили это с большим трудом).

Было принято решение не идти по маршруту Feature Query, так как в нем отсутствует поддержка в старых браузерах, включая IE11, и добавление фоллбека к фоллбеку уничтожает цель этой функции.

В случае CSS Grid добавленные правила не будут иметь никакого эффекта в браузерах, у которых нет поддержки.

Существуют некоторые методы создания фоллбеков, которые предполагают добавление float в тот же код, что и CSS Grid, без использования Modernizr. Я не являюсь поклонником этого подхода, так как он смешивает резервный код с остальной частью кода, что затрудняет работу и понимание происходящего любому разработчику.

Заключение

Неприятие риска — это большая часть того, что сдерживает лиц, принимающих решения по поводу принятия каких-либо новых технологий или функций в более широких масштабах. Мы должны убедиться, что решения, принятые по технологиям, являются эффективными и обслуживаемыми, и они не будут подвергать организацию опасности, подрывая важные показатели.

В течение нескольких недель после запуска веб-сайта обслуживание было плавным, а ключевые показатели веб-сайта для пользователей в IE11 и других устаревших браузерах неожиданно выросли. Готова ли сборка CSS для производства? Я оставлю это решение для вас.

CSS Grid предоставляет стандартизованный подход к макетам в Интернете, и мы должны отметить это для себя.

Автор: Julian

Источник: https://julian.is/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree