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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

Этот результат гораздо лучше. Другие стандартные альтернативы: применение к контейнеру свойств display: inline-block, display: table-cell или свойства float. Но использование данных способов влечет серьезные последствия, влияющие на расположение остального контента на странице; width: max-content влияет только на ширину самого элемента.

Важно отметить, что в результате применения width: max-content могут «лопнуть» контейнеры, использующие традиционные средства создания адаптивных изображений для контента, поскольку искусственно уменьшенные в масштабе изображения вернутся к своим исходным размерам. Из предыдущего примера я исключил изображения с медиа-запросами, когда окно браузера сужается, хотя в будущем для данного решения будет использоваться атрибут srcset.

Пожалуй, самый легкий способ запомнить, что делает max-content, — это запомнить, что он отвечает на вопрос «насколько маленьким я могу сделать контейнер без необходимости в переносе строк?» И это, кстати, хорошо продемонстрировано в следующем примере.

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

CSS:

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

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

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

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

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

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

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

Автор: demosthenes.info

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки: ,

Похожие статьи:

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

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

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

  1. BECEJLBE

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree