Выровняют ли CSS Grids наш HTML?

Выровняют ли CSS Grids наш HTML?

От автора: я посмотрел выступление Рэйчел Эндрю на конференции An Event Apart. Сетки – изумительный инструмент, и скоро наступит день, когда они станут самым популярным способом макетирования. А пока что этот день не настал, так как ни один браузер не принял последнюю версию спецификации (в лучшем случае нужно включать экспериментальные флаги).

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

Но есть и плохая новость. Заключается она в том, что поддержка будет неполной. Мы не получим поддержку подсеток, на что Рэйчел обратила внимание в своем выступлении. Ниже представлен стандартный HTML код страницы:

<body>
  <header class="site-header"></header>
  <main class="main-content"></main>
  <aside class="sidebar"></aside>
  <footer class="site-footer"></footer>
</body>

Все основные теги являются прямыми дочерними элементами тега body. Можно сказать, что body — это сетка, а четыре элемента внутри него – элементы сетки. Похожий пример был у Рэйчел на GridByExample:

Но… что будет, если мы хотим построить сетку, которая не будет такой плоской, как мы видели выше.

<body>
  <header class="site-header">
    <h1>I want to use the grid.</h1>
    <nav>Me too!</nav>
  </header>
  <main class="main-content">
    <ul class="schedule">
       <li>Me three!</li>
       <li>Me four!</li>
    </ul>
  </main>
  ...
</body>

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

У Джен Симмонс есть живой пример Jazz Poster. В DOM есть пара элементов, которые намного лучше бы смотрелись, будь они в рамках одной сетки. Однако вместо этого они расположены в других сетках.

Процесс создания подсеток довольно скучный, так как он может продолжаться очень долго. Даже чтобы мой небольшой пример выше заработал, мне нужно было бы его переписать:

body {
  display: grid;
}
.site-header {
  /* текущий способ из спецификации... */
  display: subgrid;

  /* старый метод... */
  display: grid;
  grid: subgrid;
}
.main-content {
  display: subgrid;
}
.main-content > ul {
  display: subgrid;
}

И это без понимания самого принципа работы сеток.

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

Эрик в качестве примера привел форму form, в которой пары label/input идут внутри контейнеров, то есть они не могут быть внутри одной сетки.

Все ряды – это отдельные сетки, что не очень удобно. Намного лучше было бы, если бы они были элементами общей сети. Эрик призвал не выпускать сетки, пока не будет решена эта проблема: «Подсетки – основной компонент сетчатого макета, и они должны быть частью любой реализации, когда проект выходит из статуса developer-preview. Если это приводит к задержке с выходом сеток, я думаю, оно того стоит.»

Скорее всего, подсетки будут полностью поддерживаться с выходом CSS Grid. Тем не менее, не помешает наделать немного шума вокруг этой темы (как, например, моя статья), чтобы показать, что подсетки очень важны, и нужно продолжать работу и выпустить их как можно скорее после выхода самой CSS Grid. Это не просто мои слова, Джен Симмонс будет продвигать эту идею в Mozilla.

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

Риск…

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

А может, никто так делать не будет. В любом случае было бы неплохо иметь под рукой такой инструмент, так что это даже и не проблема вовсе.

Материал предоставлен сайтом MyRusakov.ru — как создать свой сайт

Автор: Chris Coyier

Источник: https://css-tricks.com/

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии 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