От автора: Обычно веб-дизайнеры привыкли помещать контент внутрь HTML «контейнеров» – article, nav, а также незаменимый div – а затем задают для данных контейнеров стили и размеры. Но иногда нам было бы удобнее, чтобы размеры контента сами определяли размеры контейнера, без дополнительной установки значений.
До этого я рассказывал про min-content, одно из значимых ключевых слов в CSS, которое дизайнеры могут использовать для создания веб-дизайнов, уделяющих первоочередное внимание контенту. В этой статье я рассмотрю противоположное ключевое слово: max-content.
Используем max-content, чтобы подстроить размеры группы изображений
Предположим, что у нас есть несколько миниатюр изображений, расположенных в элементе header:
1 2 3 4 5 |
<header> <img src="valhalla.jpg" alt> <img src="beached-viking-ship.jpg" alt> <img src="water-maiden.jpg" alt> </header> |
Это будет выглядеть примерно так:
Все бы ничего, но как быть с пустым пространством в конце контейнера?
Обычно в случае с адаптивными изображениями необходимо увеличить масштаб контента так, чтобы он полностью заполнил контейнер. Но что если бы мы смогли использовать противоположный подход: уменьшить размер контейнера до тех пор, пока он не будет соответствовать исходным размерам изображений? Мы можем добиться нужного результата путем увеличения размера каждого изображения, пока в сумме общий размер изображений не будет соответствовать фиксированному размеру элемента header, но это будет медленный, утомительный и трудноизменяемый способ (к тому же он не будет адаптивным).
Вместо этого мы будем использовать max-content:
1 2 3 4 5 |
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 никогда так не сделает:
1 2 3 4 |
<figure> <img src="wotan.jpg" alt> <figcaption>Wotan, by Konstantin Vasilyev (1942 - 1976)</figcaption> </figure> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 |
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 – это легкий способ сообщить: «всегда делать изображение с подписью такого же размера, как и сама подпись»:
1 2 3 |
figure { margin: 0; width: max-content; } figcaption { font-size: 1.4rem; margin-top: .4rem; } figure img { width: 100%; height: auto; } |
Используем адаптивное решение для max-content
Проявив немного смекалки, мы можем использовать max-content для адаптивных веб-дизайнов:
1 2 3 4 5 6 |
figure { margin: 0; width: 33%; max-width: max-content; border: 4px solid black; padding: .4rem; } |
Это можно перевести следующим образом: «пусть элементы figure занимают 33% ширины контейнера, но никогда не будут шире, чем длина текста подписи».
Поддержка и особенности
Ключевое слово max-content является частью CSS и стало доступно почти с момента выпуска Firefox 4, но еще не получило широкого применения в веб-разработке. Одной из причин может быть тот факт, что оно остается одним из немногих CSS значений, которые требуют использования вендорных префиксов:
1 2 3 |
max-width: -moz-max-content; max-width: -webkit-max-content; max-width: max-content; |
Безусловно, другим фактором является браузерная поддержка: браузеру IE еще необходимо догнать остальные браузеры в вопросе измерения внутренних и внешних размеров. Хотя компания Microsoft утверждает, что поддержка ключевых слов находится на рассмотрении, чтобы быть включенной в версию IE 11. А пока для Internet Explorer и Android придется использовать запасные варианты, рассмотренные выше, для достижения нужного результата.
Автор: demosthenes.info
Источник: //demosthenes.info/
Редакция: Команда webformyself.
Комментарии (1)