Дизайн изнутри вместе с CSS значением min-content

Дизайн изнутри вместе с CSS значением min-content

От автора: Каждого дизайнера можно отнести к одной из двух больших категорий: Дизайнеры, которые сначала создают дизайн, а потом пытаются уместить контент внутри фиксированных размеров каркаса сайта. Хорошие дизайнеры, учитывающие все особенности контента, а также контекста, в котором он будет использоваться, и создают дизайн, который подстраивается под контент.

HTML, по своей природе, является отзывчивым: поток контента отображается внутри окна просмотра браузера. Однако совсем недавно, из-за повсеместного применения, CSS стали использовать в противовес данной, изначально присущей HTML, особенности для того, чтобы дизайнеры создавали макеты из блоков с фиксированными размерами, а потом пытались затолкать в них контент.

За последние три года произошла революция в области веб-разработки, которая имеет много названий, — адаптивный дизайн, отзывчивый дизайн, дизайн по принципу «сначала мобильные устройства». Самое главное, что здесь первоочередное внимание уделено контенту. Эта революция стала возможна благодаря CSS, за счет появления большого количества различных свойств и значений, среди которых одним из важных аспектов (хотя и относительно неизвестным) является использование значений для определения внутренних и внешних параметров ширины.

Давайте взглянем на решение обычной задачи, возникающей при создании дизайна веб-страницы и имеющей непосредственное отношение к новым типам значений: изображение внутри HTML-элемента figure.

<figure>
<img src="holly.jpg" alt>
<figcaption>Holly</figcaption>
<p>A photo taken by Thomas Hawk on April 18, 2010 using a Canon EOS 5D Mark II
</figure>
figure { background #aebc23; }

Поскольку элемент figure является блочным тегом, он стремится занять все доступное пространство родительского элемента. Когда при создании дизайна мы думаем в первую очередь о контенте, то нам бы хотелось, чтобы контейнер – элемент figure, в нашем случае – был настолько маленьким, насколько это возможно. До настоящего времени было несколько путей для реализации этого:

figure { float: left; }

Данная запись заставляет элемент figure «схлопнуться». Но если абзац шире, чем изображение, то элемент figure «схлопнется» до размеров самой широкой части контента, т.е. не до ширины фотографии. Использование display: inline-block или display: table-cell приведет к тому же результату.

figure { width: 500px; }

Данная запись задает нужную ширину, но делает элемент фиксированным, а не адаптивным. Если размеры изображения хоть как-то изменятся, то все усилия будут напрасными.

CSS значение min-content спешит на помощь

В конечном счете, нам нужно каким-то образом сказать «нужно автоматически уменьшить ширину контейнера, чтобы изображение идеально размещалось внутри него. Если при этом необходимо переносить текст на новые строки, то ничего страшного».

И мы можем этого добиться с помощью min-content. Несмотря на то, что данное ключевое слово появилось примерно с середины 2006 года, оно до сих пор считается экспериментальным значением и требует указания вендорного префикса (возможно, вы использовали вендорные префиксы перед свойствами, но их также можно использовать и перед значениями).

Теперь CSS-код будет выглядеть так:

figure { border: 2px solid black; background: #cae9b8; margin: 0; width: -moz-min-content; width: -webkit-min-content; width: min-content; }

Теперь элемент figure сразу же «схлопывается» до размеров самой широкой части контента, которая не может быть разделена пробелами. При этом свойства margin и padding по-прежнему действуют внутри контейнера, поэтому мы используем первое из них, чтобы добавить свободного пространства вокруг абзаца и элемента figcaption:

figcaption, p { text-align: center; margin: 1rem; }
figcaption { font-weight: bolder; font-size: 1.2rem; }

Ключевое слово min-content является одной из составляющих целого набора возможных значений для определения внутренних и внешних параметров ширины и высоты, которые вместе с модулем «флексбокс» (flexbox), сеточной (grid) и другими системами построения макетов, в разы повышают гибкость при создании веб-дизайнов.

Автор: Dudley Storey

Источник: http://demosthenes.info/

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree