Підстроюємо html контейнери під ширину контенту

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі