совет
Если при изучении разметки вас беспокоил вопрос, почему я не воспользовался такими семантическими элементами, как header, footer и aside, не стоит волноваться. Эти элементы HTML5 подробно рассматриваются в главе 4.
Теперь посмотрим, каким будет то же самое содержимое на экранах меньших размеров. Сначала оно динамически подстраивается под контрольную точку, после чего подстраивается под среду, а затем изменяется под ту разметку, которую мы уже видели. Окончательный вариант кода этой разметки можно увидеть в файле каталога example_03-02.
Суть замысла в том, что для экранов меньшего размера у нас будет одна колонка содержимого. Левосторонняя часть будет видна как область, выходящая за пределы холста, обычно эта область отводится под меню или что-то подобное, что не попадает на просматриваемое пространство экрана и выплывает при нажатии кнопки меню. Основное содержимое помещается ниже заголовка, еще ниже помещаются правосторонняя часть и, наконец, область подвала. В нашем примере левостороннюю область меню можно показать после щелчка в любом месте заголовка. Обычно при реализации схемы дизайна подобного рода для активизации бокового меню используется кнопка меню.
совет
Для переключения класса тела документа я воспользовался небольшим сценарием на JavaScript. Но он не отвечает требованиям готовности к полноценному использованию, поскольку в JavaScript применяется обработчик события щелчка 'click', а в идеале должно быть предусмотрено что-нибудь для работы на сенсорном экране (для удаления задержки 300 мс, которая до сих пор имеется в устройствах, работающих под управлением iOS).
Как вы, наверное, и ожидали, применив только что приобретенные навыки создания медиазапросов, мы можем настроить окно просмотра, и дизайн просто адаптируется под эту настройку, перейдя от одной разметки к другой и растягиваясь при этом в промежуточных позициях между этими двумя разметками.
Я не собираюсь показывать здесь весь код CSS, доступный в файле каталога example_03-02, и привожу лишь его пример, относящийся к левосторонней части:
.Left {
height: 625px;
background-color: #03A66A;
display: inline-block;
position: absolute;
left: -200px;
width: 200px;
font-size: .9rem;
transition: transform .3s;
}
@media (min-width: 40rem) {
.Left {
width: 20.83 33333%;
left: 0;
position: relative;
}
}
Как видите, сначала идет разметка без медиазапроса, предназначенная для небольшого экрана. Затем для более крупных экранов ширина задается в пропорциях, позиционирование задается относительным, а left присваивается значение 0. Значения таких свойств, как height, display или background-color, переписывать не нужно, поскольку их мы не изменяем.
Дело сдвинулось с места. Мы объединили две уже рассмотренные основные технологии адаптивного веб-дизайна, преобразовав фиксированные размеры в пропорции и воспользовавшись медиазапросами для создания целевых CSS-правил, относящихся к размеру окна просмотра.
совет
В предыдущем примере есть два примечательных момента. Во-первых, вам могла показаться странным необходимость учитывать все десятичные знаки после разделителя. Дело в том, что значения ширины будут в итоге преобразованы браузером в пикселы и их еще предстоит вычислить (например, более точно определить ширину вложенных элементов). Из этого следует, что я рекомендую никогда не трогать числа, стоящие после разделителя. Во-вторых, в реальном проекте мы предоставили бы что-нибудь на случай отключения JavaScript и сохранения необходимости просмотра содержимого меню. Такой сценарий еще будет прорабатываться в главе 8.
Зачем нам нужен Flexbox
Давайте углубимся в подробности использования модуля CSS Flexible Box Layouts, более известного как Flexbox.
Но полагаю, что перед этим было бы разумно рассмотреть недостатки существующих технологий разметки, таких как линейные блоки, плавающие элементы и таблицы.
Линейные блоки и свободное пространство
Самой большой проблемой использования линейных блоков (inline-block) является механизм разметки, выводящий пробелы между элементами HTML. Это не считается серьезном недостатком (хотя многие разработчики были бы не прочь узнать способ удаления пробела), но означает, что для удаления нежелательного пробела нужно прибегать к особым приемам, что, на мой взгляд, отнимает около 95 % времени. Существует множество способов решения этой проблемы, в предыдущем примере мы воспользовались обнулением размера шрифта — 'font-size zero', у которого есть собственные недостатки и ограничения. Но вместо перечисления всех возможных способов устранения свободных пространств при использовании линейных блоков я предлагаю ознакомиться со статьей неугомонного Криса Койера (Chris Coyier): http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
Стоит также заметить, что простого способа центрирования содержимого внутри линейного блока по вертикали не существует. Кроме того, при использовании линейных блоков отсутствует способ получения двух одноуровневых элементов, один их которых имеет фиксированную ширину, а другой подстраивается для заполнения всего оставшегося пространства.
Плавающие элементы (floats)
Я ненавижу плавающие элементы. И этим все сказано. Их положительным свойством является довольно устойчивая работа при любых обстоятельствах. Но у них есть две весьма досадные особенности.
Во-первых, при указании ширины плавающих элементов в процентах вычисленная ширина не округляется всеми браузерами одинаково (некоторые округляют вверх, а некоторые — вниз). Это означает, что иногда разделы вопреки задуманному будут выпадать из общей картины, а иногда будут оставлять с одной из сторон портящие внешний вид пробелы.
Во-вторых, плавающие элементы приходится вычищать, поскольку в противном случае родительские блоки или элементы не схлопываются. Конечно, особого труда это не составляет, но все же служит постоянным напоминанием о том, что плавающие элементы не следует использовать в качестве надежного механизма разметки ни при каких условиях.
Table и table-cell
Не нужно путать display: table и display: table-cell с соответствующими элементами HTML. Эти CSS-свойства просто имитируют разметку своих собратьев из HTML и на структуру HTML не влияют.
Я считаю табличную CSS-разметку исключительно полезной. Как минимум она позволяет осуществлять единообразное и надежное выравнивание элементов по центру друг в друге. Кроме того, элементы, имеющие настройку отображения display: table-cell внутри элемента, имеющего настройку display: table, отлично справляются с расстановкой пустых пространств и не страдают от проблем округления, как плавающие элементы. А поддержка этих свойств уходит корнями аж к Internet Explorer 7!
Но и здесь не обошлось без ограничений. Зачастую возникает необходимость заключать элемент в дополнительную оболочку (чтобы получить четкое выравнивание по центру, ячейка таблицы (table-cell) должна находиться внутри элемента, настроенного как таблица (table)). Кроме того, элементы, имеющие настройку отображения display: table-cell, не могут переносить свое содержимое с одной строки на другую.
В заключение необходимо отметить, что ограничения имеются у всех существующих методов разметки. Но, к нашему глубокому удовлетворению, есть новые CSS-методы разметки, справляющиеся с данными проблемами, которые способны не только на это, но и на многое другое. Дуйте в фанфары, расстилайте красный ковер. К нам идет Flexbox.
Представляем Flexbox
Модуль Flexbox предназначен для устранения недостатков, имеющихся в каждом из упомянутых ранее механизмов отображения. Коротко перечислю его исключительные возможности.
• Он легко справляется с выравниванием содержимого по вертикали.
• Он может изменить порядок визуального отображения элементов.
• Он может автоматически заполнять пространство пробелами и выравнивать элементы внутри блока, автоматически распределяя между ними доступное пустое пространство.
• Он может заставить вас выглядеть на десять лет моложе (наверное, все же не может, но, в чем я смог лично убедиться, уменьшая количество проб и ошибок, он снижает у вас уровень стресса).
Тернистый путь к сегодняшнему Flexbox
Прежде чем Flexbox превратился в сегодняшнюю относительно стабильную версию, он прошел через несколько основных стадий. Рассмотрим, к примеру, изменения, произошедшие со времени выхода версии 2009 года (http://www.w3.org/TR/2009/WD-css3-flexbox-200 90723/), версии 2011 года (http://www.w3.org/TR/2011/WD-css3-flexbox-201 11129/) и версии 2014 года, на которой основаны приводимые здесь примеры (http://www.w3.org/TR/css-flexbox-1/). Можно заметить, что у этих версий имеются существенные синтаксические различия.
Наличие различных спецификаций означает, что есть три основные версии реализации. Скольким версиям следует уделить внимание, зависит от необходимого вам уровня поддержки со стороны браузеров.
