Подстраиваем HTML контейнеры под ширину контента

Подстраиваем HTML контейнеры под ширину контента

От автора: Обычно веб-дизайнеры привыкли помещать контент внутрь HTML «контейнеров» – article, nav, а также незаменимый div – а затем задают для данных контейнеров стили и размеры. Но иногда нам было бы удобнее, чтобы размеры контента сами определяли размеры контейнера, без дополнительной установки значений.

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

Используем max-content, чтобы подстроить размеры группы изображений

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

<header>
<img src="valhalla.jpg" alt>
<img src="beached-viking-ship.jpg" alt>
<img src="water-maiden.jpg" alt>
</header>

Это будет выглядеть примерно так:

Все бы ничего, но как быть с пустым пространством в конце контейнера?

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

Вместо этого мы будем использовать max-content:

header {
margin: 0;
width: max-content; 
border: 4px solid black; 
}

И после добавления вендорных префиксов результат будет следующим:

Этот результат гораздо лучше. Другие стандартные альтернативы: применение к контейнеру свойств 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>
<img src="wotan.jpg" alt>
<figcaption>Wotan, by Konstantin Vasilyev (1942 - 1976)</figcaption>
</figure>

CSS:

figure {
margin: 0;
width: max-content;
background-image: linear-gradient(#777, #222, #777);
padding-top: 15px;
}
figcaption {
font-size: 1.4rem; margin-top: 1rem;
background: #ccc; padding: 8px;
text-align: center;
}
figure img { display: block; margin: 0 auto; }

Результат этого виден на иллюстрации с применением элемента figure. Как видите, используя max-content, текст всегда будет иметь приоритет, располагаясь в одну строку. Конечно, вам нужно быть осторожными, т.к. это фиксирует ширину элемента figure, которая будет привязана к ширине неделимого текста подписи, и элемент станет неадаптивным. С другой стороны, max-content – это легкий способ сообщить: «всегда делать изображение с подписью такого же размера, как и сама подпись»:

figure { margin: 0; width: max-content; }
figcaption { font-size: 1.4rem; margin-top: .4rem; }
figure img { width: 100%; height: auto; }

Используем адаптивное решение для max-content

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

figure {
margin: 0; 
width: 33%;
max-width: max-content; 
border: 4px solid black; padding: .4rem; 
}

Это можно перевести следующим образом: «пусть элементы figure занимают 33% ширины контейнера, но никогда не будут шире, чем длина текста подписи».

Поддержка и особенности

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

max-width: -moz-max-content;
max-width: -webkit-max-content;
max-width: max-content;

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

Автор: demosthenes.info

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

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

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

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

Получить

Метки: ,

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

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

Комментарии (1)

  1. BECEJLBE

    Спасибо за хороший перевод и сам контент, недавно мучился с этой проблемой!

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

Ваш 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