От автора: В предыдущих статьях я рассказал о новых поддерживаемых (и не только) CSS значениях, например, object-fit, max-content и min-content. И хотя данные значения до сих пор официально являются «экспериментальными», они имеют отличную браузерную поддержку (при наличии соответствующих вендорных префиксов).
Находясь где-то между max-content и min-content, значение fit-content может быть очень полезным, особенно при создании отзывчивых дизайнов.
«Безболезненное» сжатие контейнера
Значение min-content отлично подходит для выравнивания блоков с контентом с неизвестной шириной, например, навигационного меню на сайте:
|
1 2 3 4 5 |
<nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> |
Используем следующий CSS:
|
1 2 |
nav { background: #555; } nav a { display: inline-block; padding: 1rem; text-transform: uppercase; color: #fff; text-decoration: none; } |
По умолчанию, панель навигации будет выглядеть примерно так:
Что если бы мы захотели сделать так, чтобы меню не занимало всю ширину родительского элемента, а, наоборот, сжималось до минимально возможной ширины, без переноса любой из ссылок на новую строку? Добиться этого нам поможет значение fit-content:
|
1 |
nav { background: #555; width: fit-content; } |
Теперь мы получили возможность отцентрировать навигационную панель, явно не указывая ее ширину:
|
1 |
nav { margin: 0 auto; } |
Это также будет работать и для изображений, и для других замещаемых элементов:
|
1 2 3 |
figure { border: 2px solid #222; width: fit-content; background: #555; font-size: 0; } figure img { width: 200px; } |
Вот результат, полученный после размещения двух изображений внутри элемента <figure>:
Обратите внимание на то, что ширина изображений должна быть указана, чтобы значение fit-content сработало. Однако, дизайнеры должны быть внимательными с использованием процентов; если параметры ширины контента не совпадут с нужными значениями, то оставшееся место будет сохранено:
|
1 2 |
figure { border: 1px solid red; display: table; width: fit-content; background: #555; font-size: 0; } figure img { width: 33%; } |
Результат:
Очевидно, что в данном случае контейнер также предполагает ширину в 100% от ширины родительского элемента.
Префиксы и запасные варианты
Значение fit-content требует на данный момент наличия вендорных префиксов для обеспечения полной поддержки. Как и в случае с несколькими другими исключениями в CSS, префикс нужно указывать перед самим значением, а не свойством:
|
1 |
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 является то, что вы столкнетесь с необходимостью бороться с известными проблемами с пробелами, но и тот и другой запасной вариант работает хорошо. Для обеспечения максимальной поддержки нужно использовать новую возможность вместе с запасной:
|
1 |
element { width: fit-content; display: table; } |
Автор: Dudley Storey
Источник: //demosthenes.info/
Редакция: Команда webformyself.
