Популярно, доступно, полезно

CSS Grid Layout — лучшие практики. Часть 2


Статья является продолжением CSS Grid Layout — лучшие практики. Часть 1

Автоматическое или обозначенное расположение элементов

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

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

Какой метод позиционирования выбрать?

При работе с макетом CSS Grid в конечном итоге все сводится к перемещению компонентов из одной строки в другую. Все остальное является вспомогательными действиями для этого.

Решите вместе со своей командой, хотите ли вы именовать строки, используя Template Areas, или будете сочетать различные типы макетов. Я поняла, что мне нравится использовать для небольших компонентов Grid Template Areas. Однако нет ничего правильного или неправильного. Выясните, что лучше для вас.

CSS Grid в сочетании с другими механизмами размещения

Помните, что CSS Grid Layout — это не единственный истинный способ создания макета, который был бы королем всех остальных. Он предназначен для определенного типа макета, а именно двумерного. Другие методы создания макета все еще существуют, и вы должны рассматривать каждый шаблон и то, что ему подходит.

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

В моей собственной работе я склонна применению Flexbox для компонентов, где я хочу, чтобы натуральный размер этих компонентов в сильной степени влиял на их расположение, опираясь на другие элементы вокруг. Я также часто использую Flexbox, потому что хочу воспользоваться выравниванием, принимая во внимание, что свойства Box Alignment (https://drafts.csswg.org/css-align/) доступны только для использования в Flexbox и CSS Grid. Также я могу применить контейнер Flex с одним дочерним элементом, только чтобы выровнять его.

Признаком того, что, Flexbox является методом компоновки, который не подходит в данной ситуации — это когда я начинаю устанавливать ширину в процентах для flex-элементов и устанавливаю flex-grow в 0. Причиной добавления процентной ширины для flex-элементов часто является попытка выровнять их в двух измерениях (выравнивание элементов в двух измерениях — это именно то, для чего нужен грид). Однако попробуйте оба метода, и посмотрите, что лучше всего подходит для контента или дизайна.

Вложенные CSS Grid и элементы Flex

Нет абсолютно никаких проблем с созданием Grid Item(элемент сетки) как Grid Container (контейнер сетки), в результате чего одна сетка будет располагаться внутри другой. Вы можете сделать то же самое с Flexbox, создав Flex Item и Flex Container. Также можно сделать Grid Item и Flex Container или Flex Item и Grid Container — ни одна из этих задач не вызовет трудностей!

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

Вы можете располагать на одной странице несколько гридов одновременно

В опросе несколько раз появилось замечание, которое меня удивило. Оказалось, есть идея, что грид должен быть ограничен основным макетом, и что несколько гридов на одной странице это не очень хорошо. Вы можете располагать на странице столько гридов, сколько вам нужно! Используйте этот элемент для больших и маленьких элементов и если есть смысл представить данные в виде сетки.

Отказы и поддержка старых веб-браузеров

«Грид, в сочетании с @supports, позволил нам лучше контролировать количество различных вариантов макета. Он также отлично поработал с нашим подходом прогрессивного улучшения, что означает, что мы можем вознаградить тех, у кого есть современные веб-браузеры, не препятствуя доступу к контенту тем, кто не использует новейшие технологии».

— Джо Ламберт, работающий на сайте rareloop.com

В опросе многие люди упоминали более старые обозреватели, однако мнения разделились поровну между теми, кто считает поддержку старых версий трудной, и те, кто считает ее легким благодаря Feature Queries, и тот факт, что грид замещает другие методы создания макетов. Я подробно написала о механизме создания этих резервных копий в статье «Использование CSS Grid: поддержка веб-браузеров без Grid».

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

Конечно, есть ситуации, когда один веб-браузер еще не поддерживает определенную спецификацию или некоторых ее частей. С CSS Grid нам очень повезло, что в веб-браузерах он был полностью реализован в течение короткого промежутка времени. Поэтому наше внимание должно быть сосредоточено на тестировании кода в браузерах с его поддержкой и без. Возможно, вы также решили использовать префиксные версии свойств -ms в IE10 и IE11, которые затем потребует тестирования в качестве третьего типа обозревателей.

Веб-браузеры, поддерживающие современный CSS Grid Layout (а не версию IE), также поддерживают Feature Queries. Это означает, что вы можете протестировать его поддержку перед использованием.

Тестирование в браузерах без поддержки грида

При использовании fallbacks (резервный вариант) для веб-браузеров без поддержки грида (или с использованием префиксных версий -ms для IE10 и 11) вы захотите проверить, как они отображают его. Для этого вам нужен способ просмотра вашего сайта в выбранном обозревателе.

Я не стала бы применять подход для проверки вашего Feature Query, путем задания некорректных значений свойствам грида. Такой способ будет работать только в том случае, если ваша таблица стилей невероятно проста, и вы помещаете абсолютно все, что связано с вашим гридом внутри Feature Query. Это очень хрупкий и трудоемкий способ работы, особенно если вы активно используете грид. Кроме того, старый программы могут не поддерживать не только CSS Grid Layout, но и другие свойства CSS.

Есть несколько простых способов наставить себя на правильный путь тестирования ваших fallbacks. Самый простой способ — если у вас достаточно быстрое подключение к Интернету и вы не платите абонентскую плату — это воспользоваться таким сервисом, как BrowserStack. Это сервис, который позволяет просматривать веб-сайты (даже те, что разрабатываются на вашем компьютере локально) на целом ряде реальных веб-браузеров. BrowserStack предлагает бесплатные учетные записи для проектов с открытым исходным кодом.

Вы можете загрузить виртуальные машины для тестирования CSS Grid с Microsoft.

Чтобы протестировать локально, моим предложением было бы использовать виртуальную машину с установленным вами целевым обозревателями. Microsoft предлагает бесплатные загрузки виртуальной машины с версиями IE для IE8, а также Edge. Вы также можете установить на виртуальную машину более старую версию браузера без поддержки CSS Grid. Например, получив копию Firefox 51 или ниже. После установки вашего старого Firefox обязательно отключите автоматические обновления, как описано здесь, так как в противном случае он будет спокойно обновлять себя!

Затем вы можете протестировать свой сайт в IE11 и в Firefox на одной виртуальной машине (это гораздо менее хрупкое решение, чем неправильные значения свойствам). Настройка может занять около часа или около того, но после вам будет очень удобно тестировать свои fallback’и.

Отучивание от старых привычек

«Это был мой первый раз, когда я использовал грид, так что было много понятий, которые нужно изучить, и свойства чтобы понять. Я нашел наиболее трудным это отучиться от того, что делал годами, например, очистка float’ов и упаковка в контейнеры в виде div’ов.

Hidde работает над hiddedevries.nl/en

Многие люди, ответившие на опрос, упомянули о необходимости отучения от старых привычек и о том, насколько макеты будет легче изучать людям, совершенно не знакомым с CSS. Я склонна согласиться. При обучении людей лично у начинающих мало проблем с CSS Grid, в то время как опытные разработчики стараются использовать его как одномерный макет. Я видела попытки применения в «сетчатых систем» с применением грида контейнеров, которые нужны лишь для сеток основанных на float или flex.

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

«CSS Grid Layout — самая захватывающая разработка CSS со времени появления медиа-запросов. Он так хорошо продуман для реальных потребностей разработчиков и это абсолютное наслаждение использовать его в реальных проектах — как для дизайнеров, так и для разработчиков ».

Trys Mudford работающий на trysmudford.com

Заключение

В завершение, приведу очень короткий список текущих наилучших практик! Если вы обнаружили, что какие-то рекомендации не работают или работают не совсем корректно в вашей ситуации, напишите о них в комментариях.

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

Перевод статьи «Best Practices With CSS Grid Layout»

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

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