Підлаштовуємо HTML контейнери під ширину вмісту

14

Від автора: Зазвичай веб-дизайнери звикли розміщувати контент всередину HTML «контейнерів» – article, nav, а також незамінний div – а потім задають для даних контейнерів стилі та розміри. Але іноді нам було б зручніше, щоб розміри контенту самі визначали розміри контейнера, без додаткової установки значень.

До цього я розповідав про min-content, одне із значущих ключових слів в CSS, яке дизайнери можуть використовувати для створення веб-дизайнів, що приділяють першочергову увагу контенту. У цій статті я розгляну протилежне ключове слово: max-content.

Використовуємо max-content, щоб підлаштувати розміри групи зображень

Припустимо, що у нас є кілька мініатюр зображень, розташованих в елементі header:

Підлаштовуємо HTML контейнери під ширину вмісту
Підлаштовуємо HTML контейнери під ширину вмісту
Підлаштовуємо HTML контейнери під ширину вмісту

Це буде виглядати приблизно так:

Підлаштовуємо HTML контейнери під ширину вмісту

Все б нічого, але як бути з порожнім простором в кінці контейнера?

Зазвичай у випадку з адаптивними зображеннями необхідно збільшити масштаб контенту так, щоб він повністю заповнив контейнер. Але що якщо б ми змогли використати протилежний підхід: зменшити розмір контейнера до тих пір, поки він не буде відповідати вихідним розмірами зображень? Ми можемо добитися потрібного результату шляхом збільшення розміру кожного зображення, поки в сумі загальний розмір зображень не буде відповідати фіксованим розміром елемента header, але це буде повільний, виснажливий і трудноизменяемый спосіб (до того ж він не буде адаптивним).

Замість цього ми будемо використовувати max-content:

header {
margin: 0;
width: max-content;
border: 4px solid black;
}

І після додавання вендорних префіксів результат буде наступним:

Підлаштовуємо HTML контейнери під ширину вмісту

Цей результат набагато краще. Інші стандартні альтернативи: застосування до контейнера властивостей display: inline-block, display: table cell або властивості float. Але використання даних способів спричиняє серйозні наслідки, що впливають на розташування іншого контенту на сторінці; width: max-content впливає тільки на ширину самого елемента.

Важливо відзначити, що в результаті застосування width: max-content можуть «лопнути» контейнери, що використовують традиційні засоби створення адаптивних зображень для контенту, оскільки штучно зменшені в масштабі зображення повернуться до своїх початкових розмірів. З попереднього прикладу я виключив зображення з медіа-запитів, коли вікно браузера звужується, хоча в майбутньому для даного рішення буде використовуватися атрибут srcset.

Мабуть, найлегший спосіб запам’ятати, що робить max-content, — це запам’ятати, що він відповідає на питання «наскільки маленьким я можу зробити контейнер без необхідності перенесення рядків?» І це, до речі, добре продемонстровано в наступному прикладі.

Використання max-content для управління текстом підписи

Можна легко розрізнити min-content max-content, бо перший з них буде охоче розбивати тест на декілька рядків, поки не зустріне щось «неподільне», такий, як зображення, у той час як max-content ніколи так не зробить:

Підлаштовуємо HTML контейнери під ширину вмісту
Wotan, by Konstantin Vasilyev (1942 — 1976)

CSS:

figure {
margin: 0;
width: max-content;
background-image: linear-gradient(#777, #222, #777);
padding-top: 15px;
}
figcaption {
font-size: 1.4 rem; margin-top: 1rem;
background: #ccc; padding: 8px;
text-align: center;
}
figure img { display: block; margin: 0 auto; }

Підлаштовуємо HTML контейнери під ширину вмісту

Результат цього видно на ілюстрації із застосуванням елемента figure. Як бачите, використовуючи max-content, текст завжди буде мати пріоритет, розташовуючись в один рядок. Звичайно, вам потрібно бути обережними, оскільки це фіксує ширину елемента figure, яка буде прив’язана до ширини неподільного тексту підпису, і елемент стане неадаптивным. З іншого боку, max-content – це легкий спосіб повідомити: «завжди робити зображення з підписом такого ж розміру, як і сама підпис»:

figure { margin: 0; width: max-content; }
figcaption { font-size: 1.4 rem; margin-top: .4rem; }
figure img { width: 100%; height: auto; }

Використовуємо адаптивне рішення для max-content

Проявивши трохи кмітливості, ми можемо використовувати max-content для адаптивних веб-дизайнів:

figure {
margin: 0;
width: 33%;
max-width: max-content;
border: 4px solid black; padding: .4rem;
}

Це можна перекласти наступним чином: «нехай елементи figure займають 33% ширини контейнера, але ніколи не будуть ширше, ніж довжина тексту підпису».

Підтримка і особливості

Ключове слово max-content є частиною CSS і стало доступно майже з моменту випуску Firefox 4, але ще не отримало широкого застосування у веб-розробці. Однією з причин може бути той факт, що воно залишається одним з небагатьох CSS значень, які вимагають використання вендорних префіксів:

max-width: -moz-max-content;
max-width: -webkit-max-content;
max-width: max-content;

Безумовно, іншим фактором є браузерна підтримка: браузера IE ще необхідно наздогнати інші браузери в питанні вимірювання зовнішніх та внутрішніх розмірів. Хоча компанія Microsoft стверджує, що підтримка ключових слів знаходиться на розгляді, щоб бути включеною у версію IE 11. А поки для Internet Explorer і Android доведеться використовувати запасні варіанти, розглянуті вище, для досягнення потрібного результату.