Windows 8 / HTML5 и адаптивный веб-дизайн

Сочетание CSS3 Grid с медиа-запросами создает мощное решение для создания гибких, отзывчивых приложений.

Как работает Сетка? Вы начинаете с установки блока дисплея на «сетку». (Вам необходимо использовать префиксы поставщика CSS, потому что это еще не рекомендация CSS3. В настоящий момент только предварительный просмотр платформы Internet Explorer 10 поддерживает спецификацию, поэтому вы увидите здесь префикс поставщика CSS -ms-, используемый здесь.) Давайте рассмотрим три примеры того, как вы можете настроить различные виды в зависимости от размера экрана. Медиа-запросы используются для применения различных стилей сетки в зависимости от ширины экрана.

В первом примере HTML-код для определения содержимого состоит из одного заголовка и трех различных блоков текста (см. Рисунок 6) .

Рисунок 6 Определение содержимого для сетки

<div id="mygrid">
            <header id="myheader">
                    <h1>Hello world</h1>
            </header>
            <div id="block1">
                    <h2>Lorem Ipsum section 1</h2>
                    <p>
                          Phasellus venenatis sem vel velit tincidunt tincidunt.
                            Curabitur gravida, ante sit amet [... ...]
                    </p>
            </div>
            <div id="block2">
                    <h2>Lorem Ipsum section 2</h2>
                    <p>
                    Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
                    Suspendisse [... ...].
                    </p>
            </div>
                    <div id="block3">
                    <h2>Lorem Ipsum section 3</h2>
                    <ul>
                          <li>Curabitur ultrices tristique purus, sed pellentesque
                                magna scelerisque ut.</li>
                            <li>[... ...] </li>
                    </ul>
            </div>
    </div>

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

Рисунок 7. Размещение блоков контента.

@media only screen and (max-width : 480px) {
    #mygrid {
        display: -ms-grid;
        margin: 3px;
        -ms-grid-columns: 100%; /*one column taking full width */
        -ms-grid-rows: 70px auto auto auto; /*4 rows */
    }
    #myheader {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
    }
    #block1 {
            -ms-grid-row: 2; /*place into row 2 / column 1*/
            -ms-grid-column: 1;
    }
    #block2 {
            -ms-grid-row: 3;
            -ms-grid-column: 1;
    }
    #block3 {
            -ms-grid-row: 4;
            -ms-grid-column: 1;
    }
}

Рисунок 8. Блоки содержимого с фоновыми цветами

Во втором примере медиазапрос применяет стили, определенные для экранов с размерами, превышающими 481 пиксель — что угодно шире, чем у обычного смартфона. Вы можете использовать Grid для определения двух столбцов и перемещения блоков в желаемые позиции (см. Рисунок 9 ). Результаты показаны на рисунке 10 .

Рисунок 9. Определение нового макета для увеличенного экрана.

@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
        -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction
                                          of available space*/
        margin: 5px;
    }
    #myheader {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
            background-color: #EEB215;
    }
    #block1 {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            background-color: #B2B0B0;
    }
    #block2 {
       -ms-grid-row: 3;
       -ms-grid-column: 2;
       background-color: #726E6E;
    }
    #block3 {
       -ms-grid-row: 2; /*block 3 can go into row 2*/
       -ms-grid-column: 4;
       background-color: #515050;
    }
}

Рисунок 10. Новый макет с двумя соседними столбцами.

Третий образец сетки отображается на экранах шириной более 1220 пикселей. Вы определяете сетку с широким заголовком, который охватывает несколько столбцов, а затем определяете три столбца, каждый из которых занимает одну долю доступного пространства, с несколькими 10-пиксельными столбцами между ними (см. Рисунок 11 ). Результаты показаны на рисунке 12 .

Рисунок 11 Определение макета для более широких экранов

@media only screen and (min-width: 1220px) {
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 100px 1fr;
        margin: 5px;
    }
    #myheader {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
            background-color: #EEB215;
    }
    #block1 {
            -ms-grid-row: 2;
            -ms-grid-column: 1;
            background-color: #B2B0B0;
    }
    #block2 {
            -ms-grid-row: 2;
            -ms-grid-column: 3;
            background-color: #726E6E;
            }
    #block3 {
            -ms-grid-row: 2;
            -ms-grid-column: 5;
            background-color: #515050;
    }
}

Рисунок 12. Три параллельных колонны с остовным заголовком.

Спецификация Grid — желанное дополнение для реализации адаптивных веб-дизайнов.

Стоит также упомянуть о двух других новых спецификациях CSS: модуль разметки гибких блоков (Flexbox) и модуль разметки с несколькими столбцами . Оба показывают многообещающие возможности для разработки адаптивных веб-сайтов.

Flexbox, в настоящее время рабочий проект на W3C, добавляет поддержку четырех новых режимов макета: блочный, встроенный, табличный и позиционированный. Это позволяет вам размещать сложные страницы с относительным положением и постоянным размером, даже при изменении размеров экрана.

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

Гибкие изображения и медиа

Последний аспект адаптивного веб-дизайна — это гибкие изображения и медиа. По сути, эта функция позволяет вам по-разному адаптировать ваши изображения или другие медиафайлы в зависимости от устройства, либо масштабируя, либо используя свойство переполнения CSS.

Масштабирование в CSS довольно просто реализовать как для изображений, так и для видео. Вы можете установить максимальную ширину медиа-элемента на 100 процентов, и браузер будет уменьшать и расширять изображение в зависимости от его контейнера. Вы должны предоставить изображение в наилучшем возможном качестве и размере, а затем позволить CSS адаптировать изображение к нужному размеру.

img, object {
     max-width: 100%;
}

Альтернативой масштабированию изображений является их обрезка с помощью CSS. Например, применение overflow: hidden позволяет динамически обрезать изображения, чтобы они помещались в свои контейнеры по мере изменения размеров контейнеров в соответствии с новой экранной средой.

Наличие нескольких параметров для масштабирования и обрезки изображений в CSS может быть недостаточно. Вы действительно должны использовать всю мобильную пропускную способность посетителя, потому что у вас нет уменьшенной версии изображения? Чтобы лучше обслуживать пользователей, гибкие изображения могут означать использование альтернативного изображения или вообще никакого изображения. Люди из сообщества веб-дизайнеров предлагают решения на основе JavaScript и файлов cookie, и вы можете ожидать большего от этого, поскольку адаптивный веб-дизайн развивается и становится основой для многих качественных веб-сайтов.

Устаревшие браузеры

А как насчет старых браузеров, которые не поддерживают медиа-запросы? А как насчет Internet Explorer до версии 8, которая имеет проблемы с масштабированием изображений? Решения в виде полифилов могут помочь. Вот несколько полезных примеров.

• css3-mediaqueries.js, автор Ваутер ван дер Грааф: code.google.com/p/css3-mediaqueries-js/
• Response.js: github.com/scottjehl/Respond
• Жидкие изображения: unstoppablerobotninja.com/entry/fluid-images/

В заключение

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

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

Стандарты HTML и CSS развиваются, чтобы помочь веб-дизайнерам справиться с этими проблемами. Ясно, что для решения задач будет использоваться некая форма адаптивного веб-дизайна, и в равной степени ясно, что стандарты будут продолжать развиваться по мере того, как будут открываться лучшие способы обработки изменяющегося мира устройств и браузеров.