Как сделать текучий фон

Оцените материал
(0 голосов)

Проблема

В последние несколько лет в веб-дизайне набирает популярность новое направление, которое я бы назвал «текучая ширина фона, фиксированная ширина содержимого». Типичные характеристики подобного шаблона включают:

  • несколько разделов, каждый из которых занимает всю ширину просмотрового окна, с разным оформлением фона;
  • ширина содержимого фиксирована, даже если конкретное значение ширины варьируется в зависимости от разрешения экрана, так как для управления шириной используются медиазапросы. В некоторых случаях ширина содержимого в разных разделах может различаться.

Иногда веб-сайт целиком состоит из разделов, стилизованных вышеописанным образом. Чаще всего данный вариант оформления используется только для отдельных разделов, в частности нижнего колонтитула. Самый распространенный вариант реализации подобного дизайна заключается в использовании двух элементов для каждого раздела: один для текучего фона, а второй для содержимого фиксированной ширины. Второй элемент выравнивается по центру с помощью  margin: auto . Например, разметка для такого нижнего колонтитула может выглядеть приблизительно так:

HTML
<footer>
<div class="wrapper">
<!-- Здесь находится содержимое нижнего колонтитула -->
</div>
</footer>
CSS-код обычно включает правила, структурированные как в примере ниже:
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}

Выглядит знакомо? Большинству веб-дизайнеров и разработчиков приходилось на том или ином этапе своей карьеры писать подобный код. Действительно ли дополнительные элементы — это неизбежное зло или современный уровень CSS позволяет избежать их использования?

Решение

Давайте подумаем, какую роль в данном случае играет  margin: auto. Поле, которое создается этим правилом, равно половине ширины просмотрового окна за вычетом половины ширины страницы. Так как процентные значения у нас завязаны на ширину окна просмотра (при условии, что у него не
существует предка с явно определенной шириной), в нашем случае это выглядит как  50% - 450px . Однако функция calc() , определенная в CSS Values andUnits Level 3, позволяет использовать такие простые математические выражения прямо в таблице стилей. Заменив  auto на calc(), мы получим такое правило-обертку:

.wrapper {
max-width: 900px;
margin: 1em calc(50% - 450px);
}

Единственная причина, почему нам требовался второй элемент-обертка, — необходимость применять волшебное ключевое слово  auto к его полю посредством свойства  margin. Однако мы избавились от колдовства и заменили его обычным  calc(), то есть теперь это всего лишь еще один размер в CSS, который можно указывать для любого свойства, принимающего подобные значения. Таким образом, при желании мы можем использовать его с родительским элементом в свойстве  padding:

footer {
max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
.wrapper {}

Как вы видите, благодаря этому мы убрали весь CSS-код из обертки, что означает, что она нам больше не требуется и мы можем спокойно удалить ее из нашей разметки. Мы создали требуемый стиль безо всяких лишних элементов HTML. Можно ли дополнительно улучшить его? Как всегда, ответ
положительный. Обратите внимание, что если закомментировать объявление  width , то ничего не произойдет.
Визуальный результат будет точно таким же, и поведение тоже не изменится, независимо от размера окна просмотра. Почему же? Потому что забивка, равная  50% - 450px , все равно оставляет только 900px ( 2 × 450px ) доступного пространства. Мы бы увидели отличия, если бы значение  width отличалось от  900px в большую или меньшую сторону. Но мы в любом случае получаем именно  900px , поэтому объявление ширины избыточно, и мы можем убрать его, следуя заветам DRY.

Еще одно усовершенствование не помешало бы, чтобы обеспечить обратную совместимость. Нам следует добавить резервное решение, чтобы получать хоть какую-то забивку в ситуации, когда  calc() не поддерживается:

footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}

Готово! Мы добились гибкого, соответствующего принципам DRY и обеспечивающего обратную совместимость результата, написав всего лишь три  строки CSS-кода безо всякой лишней разметки!

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/fluid-fixed

Десерт на сегодня - очень смешное видео про то, как обезьяны убегают верхом на кабане . Музыка из "Неуловимых мстителей" создает нужную атмосферу

Прочитано 95 раз Последнее изменение Суббота, 03 июня 2017 12:33
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+