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

Использование 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 года.

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

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.