HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

совет

Если есть намерение часто менять элементы местами, я бы порекомендовал расширить описание и присвоить каждому элементу порядковый номер. Это упростит понимание задачи в сочетании с медиазапросами.

Объединим наши новые возможности по изменению порядка следования с медиазапросами, чтобы получилась не просто различная разметка для разных размеров, а разный порядок следования элементов.

примечание

Код примера в окончательном виде можно найти в файле каталога example_03-09.

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

<div class="FlexWrapper">

    <div class="FlexItems FlexContent">I am content in the Content.</div>

    <div class="FlexItems FlexSideOne">I am content in the SideOne.</div>

    <div class="FlexItems FlexSideTwo">I am content in the SideTwo.</div>

    <div class="FlexItems FlexHeader">I am content in the Header.</div>

    <div class="FlexItems FlexFooter">I am content in the Footer.</div>

</div>

Сначала идет содержимое страницы, затем две боковые области, после этого заголовок и, наконец, подвал. Поскольку используется Flexbox, мы можем структурировать HTML в том порядке, который имеет смысл для документа независимо от того, как все должно располагаться при отображении на экране.

Для самых мелких экранов (вне каких-либо медиазапросов) порядок будет такой:

.FlexHeader {

    background-color: #105B63;

    order: 1;

}

.FlexContent {

    background-color: #FFFAD5;

    order: 2;

}

.FlexSideOne {

    background-color: #FFD34E;

    order: 3;

}

.FlexSideTwo {

    background-color: #DB9E36;

    order: 4;

}

.FlexFooter {

    background-color: #BD4932;

    order: 5;

}

Соответственно, в браузере будет наблюдаться такая картина.

А затем в контрольной точке произойдет переход к следующим настройкам:

@media (min-width: 30rem) {

    .FlexWrapper {

        flex-flow: row wrap;

    }

    .FlexHeader {

        width: 100%;

    }

    .FlexContent {

        flex: 1;

        order: 3;

    }

    .FlexSideOne {

        width: 150px;

        order: 2;

    }

    .FlexSideTwo {

        width: 150px;

        order: 4;

    }

    .FlexFooter {

        width: 100%;

    }

}

Что в браузере будет выглядеть таким образом.

примечание

В данном примере использовалось сокращение flex-flow: row wrap. Это позволило flex-элементам располагаться на нескольких строках. Данное свойство относится к числу наименее поддерживаемых, поэтому в зависимости от того, насколько глубоко в прошлое должна простираться поддержка вашего продукта, может понадобиться заключить содержимое и две боковые панели в другой элемент.

Краткое заключение по Flexbox

Благодаря присущей Flexbox возможности внесения динамических изменений (flexiness) при использовании этой системы разметки мы располагаем практически неисчерпаемыми возможностями, что великолепно подходит для создания адаптивного дизайна. Если раньше вам еще не приходилось создавать что-либо с использованием Flexbox, все новые свойства и значения покажутся немного странными, а та легкость, с какой получаются разметки, в которые прежде приходилось вкладывать намного больше труда, может вызвать небольшое замешательство. Чтобы еще раз проверить особенности реализации функциональных возможностей на соответствие самой последней версии спецификации, зайдите на сайт http://www.w3.org/TR/css-flexbox-1/.

Я думаю, что созидательная работа с использованием Flexbox вам понравится.

примечание

На пятки Flexible Box Layout Module уже наступает Grid Layout Module Level 1: http://www.w3.org/TR/css3-grid-layout/.

Этот модуль еще сыроват по сравнению с Flexbox (как и в ранней истории Flexbox, grid-разметка уже претерпела ряд существенных изменений), и поэтому мы не станем проявлять к нему пристальный интерес. Тем не менее его не нужно сбрасывать со счетов, поскольку этот модуль обещает дать еще более эффективные средства разметки веб-страниц.

Адаптивные изображения

Предоставление пользователям изображений, наиболее подходящих для конкретных характеристик применяемого устройства и среды, всегда было задачей не из легких. Особое звучание она приобрела с появлением адаптивного веб-дизайна, сама природа которого приспособлена для использования единой кодовой базы абсолютно для всех устройств.

Проблема, присущая адаптивным изображениям

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

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

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

Как сообщить браузеру об имеющихся в нашем распоряжении изображениях, чтобы он мог выбрать самое подходящее для пользователя?

В первые несколько лет после появления адаптивного веб-дизайна какого-либо способа сделать это просто не было. Но, к общему удовольствию, теперь есть спецификация встроенного содержимого — Embedded Content: https://html.spec.whatwg.org/multipage/embedded-content.html.

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

Продемонстрировать примеры адаптивных изображений довольно трудно. На одном и том же экране невозможно дать оценку различным изображениям, которые могут быть загружены с применением конкретных синтаксиса или технологии. Поэтому следующие примеры будут в основном в виде кода, и вам придется поверить мне на слово, что в поддерживающих эту технологию браузерах он будет выдавать нужный вам результат.

Рассмотрим два наиболее распространенных сценария, для которых, вероятнее всего, понадобятся адаптивные изображения. Они будут переключать изображение, когда потребуется другое разрешение, и полностью менять изображение в зависимости от доступного пространства окна просмотра.

Простое переключение разрешения с помощью srcset

Предположим, что имеются три версии изображения. Они выглядят одинаково, за исключением того, что одно из изображений имеет наименьшие размер или разрешение и предназначено для самых мелких окон просмотра, другое предназначено для окон просмотра среднего размера, и, наконец, самое большое изображение предназначено для всех остальных окон просмотра. О наличии у нас этих трех версий браузер оповещается следующим образом:

<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_

   large.jpg 2x" alt="Scones taste amazing">

Это почти так же просто, как и все то, что касается адаптивных изображений, поэтому давайте вникнем в смысл данного синтаксиса.

Сначала идет уже знакомый вам атрибут src, который здесь играет двойную роль. Он указывает на самую простую версию изображения, а также служит указателем на изображение отката, если браузер не поддерживает атрибут srcset. Именно поэтому он используется для указания самого простого изображения. Благодаря этому старые браузеры, игнорирующие информацию в srcset, получат самое простое и, возможно, самое динамичное изображение.

Браузерам, понимающим атрибут srcset, предоставляется список изображений, разделенных запятыми, из которых браузер может сделать выбор. После имени изображения (например, scones_medium.jpg) выдается простое указание на разрешение. В данном примере использованы указания 1.5x и 2x, но допускается применение любого целого числа. Например, 3x или 4x тоже будут работать — при условии, что отыщется подходящий экран высокого разрешения.

Но здесь есть одна проблема: устройство с шириной экрана 1440 пикселов и разрешением 1x получит то же самое изображение, что и устройство с шириной экрана 480 пикселов и разрешением 3x. Такой исход может оказаться нежелательным.

Более совершенный вариант переключения с использованием атрибутов srcset и sizes