Хотя некоторые новые свойства и значения свойств, такие как object-fit (подходить для объекта), max-content (по максимальному размеру содержимого), min-content (по минимальному размеру содержимого) и fit-content (по ширине содержимого) еще считаются экспериментальными, они уже хорошо поддерживаются браузерами, иногда нуждаясь в добавлении приставок производителей.

Родственное значениям свойств максимального и минимального размерам содержимого, значение свойства по размеру содержимого может быть очень полезным, особенно при создании адаптивного дизайна.

Легкий способ получения компактного размера

Значение по размеру содержимого отлично подходит для расположения групп содержимого неизвестной ширины, таких как горизонтальное меню сайта:

<nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
</nav>

С помощью следующего кода CSS:

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

По умолчанию, горизонтальное меню будет выглядеть примерно так:

А если нам нужно, чтобы меню не занимало всю ширину своего родительского элемента, а было своей минимальной ширины без переноса слов в ссылках на новую строку, можно применить значения свойства по размеру содержимого:

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

Что создаст такой внешний вид:

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

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

В результате получим следующее:

Это также сработает для изображений и других подобных элементов:

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

После задания двух изображений в элементе фигуры получим вот это:

Обратите внимание на то, что нужно задать ширину изображений, чтобы в такой ситуации сработало значение свойства по размеру содержимого.

Будьте осторожны с использованием процентов, так как если общая ширина не будет равна 100%, останется незанятое место:

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

Результат будет следующим:

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

Приставки производителя и обходные варианты

Значению свойства по размеру содержимого до недавнего времени были нужны приставки производителей, расположенные прямо перед ним, для всех браузеров, а в новых версиях браузеров приставка -webkit уже нужна только для мобильных версий некоторых браузеров, но приставка -moz все еще нужна всем версиям браузера Firefox. Так что рекомендуем следующую запись этого значения свойства:

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

Значение свойства по размеру содержимого не поддерживается во всех версиях браузеров Internet Explorer, Edge и Opera Mini, но в качестве обходного варианта хорошо подойдут другие свойства отображения, такие как строчно-блочное отображение и отображение в виде таблицы, которые действуют схожим образом.

Одним из недостатков использования строчно-блочного отображения является столкновение с известной проблемой с пробелами, но и с этим можно разобраться. Для полной поддержи браузерами лучше использовать оба пути:

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

Использованы фотографии Denis Collette, лицензированные по лицензии Attribution-NonCommercial-NoDerivatives 4.0 International Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование свойства CSS перспективы
• Использование свойства CSS размера табуляции для сохранения пробела
• Использование свойств задания вида подчеркивания ссылок