Маленький, великий: використовуючи CSS значення fit-content

11

Від автора: У попередніх статтях я розповів про нових підтримуваних (і не тільки) CSS значеннях, наприклад, object-fit, max-content і min-content. І хоча дані значення досі офіційно є «експериментальними», вони мають відмінну браузерну підтримку (за наявності відповідних вендорних префіксів).

Перебуваючи десь між max-content і min-content значення fit-content може бути дуже корисним, особливо при створенні чуйних дизайнів.

«Безболісне» стиснення контейнера

Значення min-content відмінно підходить для вирівнювання блоків з контентом з невідомої шириною, наприклад, навігаційного меню на сайті:

Home
About
Contact

Використовуємо наступний CSS:

nav { background: #555; }
nav a { display: inline-block; padding: 1rem; text-transform: uppercase; color: #fff; text-decoration: none; }

За замовчуванням панель навігації буде виглядати приблизно так:

Маленький, великий: використовуючи CSS значення fit-content

Якщо б ми захотіли зробити так, щоб меню не займало всю ширину батьківського елементу, а, навпаки, стискалося до мінімально можливої ширини, без переносу будь посилань на новий рядок? Домогтися цього нам допоможе значення fit-content:

nav { background: #555; width: fit-content; }

Маленький, великий: використовуючи CSS значення fit-content

Тепер ми отримали можливість відцентрувати навігаційну панель, явно не вказуючи її ширину:

nav { margin: 0 auto; }

Це також буде працювати і для зображень, і для інших заміщуються елементів:

figure { border: 2px solid #222; width: fit-content;
background: #555; font-size: 0; }
figure img { width: 200px; }

Ось результат, отриманий після розміщення двох зображень всередині елемента :

Маленький, великий: використовуючи CSS значення fit-content

Зверніть увагу на те, що ширина зображення повинна бути вказана, щоб значення fit-content спрацювало. Однак, дизайнери повинні бути уважними з використанням відсотків; якщо параметри ширини контенту не співпадуть з потрібними значеннями, то місце, що залишилося, буде збережено:

figure { border: 1px solid red; display: table; width: fit-content; background: #555; font-size: 0; }
figure img { width: 33%; }

Результат:

Маленький, великий: використовуючи CSS значення fit-content

Очевидно, що в даному випадку контейнер також передбачає ширину в 100% від ширини батьківського елемента.

Префікси й запасні варіанти

Значення fit-content потребує на даний момент наявності вендорних префіксів для забезпечення повної підтримки. Як і у випадку з кількома іншими винятками в CSS, префікс потрібно вказувати перед самим значенням, а не властивістю:

width: -moz-fit-content; width: -webkit-fit-content; width: fit-content

Значення fit-content поки не підтримується Internet Explorer або Opera Mini, але є чудові запасні варіанти з використанням властивості display: зокрема, display: inline-block або display: table. В обох випадках досягається дуже схоже на поведінку width: fit-content.

Єдиним недоліком використання display: inline-block є те, що ви зіткнетеся з необхідністю боротися з відомими проблемами з пробілами, але і той і інший запасний варіант працює добре. Для забезпечення максимальної підтримки потрібно використовувати нову можливість разом з запасний:

element { width: fit-content; display: table; }