Вирівняють чи CSS Grids наш HTML?

2

Від автора: я подивився виступ Рейчел Ендрю на конференції An Event Apart. Сітки – дивовижний інструмент, і скоро настане день, коли вони стануть найбільш популярним способом макетування. А поки що цей день настав, так як жоден браузер не прийняв останню версію специфікації (у кращому випадку потрібно включати експериментальні прапори).

Є хороша новина. Специфікація стала повністю стабільна і перейшла в статус Candidate Recommendation. Всі нові браузери розробляються з ухилом в цю специфікацію і, цілком можливо, що зовсім скоро ми отримаємо безпрефиксную підтримку у всіх стабільних браузерах.

Але є і погана новина. Полягає вона в тому, що підтримка буде неповною. Ми не отримаємо підтримку подсеток, на що Рейчел звернула увагу у своєму виступі. Нижче представлений стандартний HTML-код сторінки:

Всі основні теги є прямими дочірніми елементами тега body. Можна сказати, що body — це сітка, а чотири елемента всередині нього – елементи сітки. Схожий приклад був у Рейчел на GridByExample:

Але… що буде, якщо ми хочемо побудувати сітку, яка не буде такою плоскою, як ми бачили вище.

I want to use the grid.

Me too!

  • Me three!
  • Me four!

Ми можемо вкласти одну сітку в іншу, як ми це робимо з 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 — як створити свій сайт