Більше ніяких CSS Grid фреймворків

14

Від автора: кілька хвилин тому я прочитав пост на Designer News. Пост написав хлопець, який хоче створити черговий CSS grid фреймворк, заснований на flexbox. Швидше за все, він знає, що таких фреймворків вже повно в мережі, але це не утримало його від того, щоб дізнатися, що з цього приводу думають інші.

Причиною цього, швидше за все, послужило те, що людина просто любить кодити, а також розуміє, що дійсно крутих grid фреймворків досить мало. Я вважаю цієї непоганою ідеєю створити ще один фреймворк, тому що я хочу, щоб у людей залишалася мотивація для здійснення своїх ідей (не важливо, скільки розробників вже зробили те ж саме). АЛЕ тільки якщо все це робиться з метою навчання, а не для когось.

Чому так? Тому що в недалекому майбутньому ці фреймворки взагалі не будуть потрібні. Це може прозвучати дивно, але нижче я все поясню:

Я не знаю, чим ви користуєтеся, але ось уже кілька років я використовую тільки grid фреймворки для вирівнювання вмісту і створення чуйних верстки макетів. Згодом пара аспектів початкової ідеї сайтобудування змінилися: веб-сайти тепер, в основному, проектуються в першу чергу під мобільні пристрої (на щастя). Flexbox з його властивостями дозволяє досягати поставлених завдань по створенню ефективних CSS макетів набагато швидше. Приміром, окремі властивості flexbox допомагають вирівнювати висоти колонок, збудованих в ряд, не знаючи розмірів контенту, що можна замінити на код JS.

До цих пір цей спосіб був чи не найкращим для створення надійних макетів (без написання користувача grid, природно). На щастя, тепер нам стало набагато легше, завдяки grid.

Що ж в ньому такого гарного

По суті, це новий CSS метод, який дозволяє створювати красиві макети сайтів без використання величезних grid фреймворків. Grid надає вам доступ до безлічі властивостей, які підказують браузеру як позиціонувати елемент на сторінці, і не важливо який бюджет у клієнта, і наскільки стислі терміни виконання.

Найдивовижніше в тому, що браузер взагалі не хвилює розташування елемента в HTML коді. Наприклад, колонка, яку ви хочете відобразити у верхньому правому куті вікна, може знаходитися прямо перед закриваючим тегом body (після всіх інших тегів).

Це чимось схоже на дію position: absolute, але без необхідності прописувати позиціонування елемента попіксельно. Grid сама прорахує це – W3C описує таку поведінку, як незалежність порядку у вихідному коді (source-order independence).

Підтримка браузерів

Так як технологія ще нова, в даний момент тільки один браузер підтримує цю технологію за замовчуванням: ви не повірите, але… не можу не сміятися… гаразд, це всіма улюблений друг Internet Explorer. Але не турбуйтеся, все не так погано: все ще необхідно використовувати –ms префікс. Тепер трохи зрозуміліше? Не можу перестати сміятися.

У будь-якому випадку, якщо ви не використовуєте IE (ганьба вам), ви можете активувати цю функцію через прапор «експериментальні можливості веб-платформи» chrome://flags для браузерів Chrome і Opera.

Так що, це альтернатива flexbox?

НІ! Тільки не почніть бігати по офісу і кричати «Нафіг ваш flexbox», ВІН ВСЕ ЩЕ ПОТРІБЕН!

Дані дві властивості використовуються в абсолютно різних випадках. Перше display: grid можна використовувати для створення основного макета верстки вашого веб-додатки або сайту, але не для вирівнювання боксів з контентом. У цьому випадку вам допоможе display: flex. Використовується, наприклад, для вирівнювання висоти колонок, розташованих в один ряд. Підіб’ємо підсумок. Яку властивість для чого використовувати:

Grid: — для макета

Flex: — для вмісту

Досить просто, чи не правда?

І чого ж ви чекаєте? Відкривайте Chrome, включайте прапор експериментальних можливостей і тестуйте grid! Якщо ви заплуталися або просто хочете більше дізнатися про те, як працюють ці властивості і як їх використовувати, загляньте в документацію W3C.

Нам усім слід брати участь у розвитку цих властивостей, так як існує набагато більше невивчених випадків їх використання. Я думаю, це справді величезний крок до світу, вільного від громіздких і пожирають багато оперативної пам’яті CSS фреймворків.