Использование значения свойства CSS ширины по размеру содержимого
2 августа 2018 | Опубликовано в css | Нет комментариев »
Хотя некоторые новые свойства и значения свойств, такие как 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: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191