Десять строчек на CSS, которые помогут отказаться от нативных приложений

Хокон Виум Ли (Håkon Wium Lie) является отцом CSS, главным инженером в Opera и одним из первых приверженцев веб-стандартов. Ранее в этом году мы публиковали его статью «CSS Regions, возможно, вредны для веба». Когда Хокон Виум говорит — мы слушаем, независимо от того согласны мы с ним или нет. Сегодня Хокон представляет CSS-врезки (CSS Figures) и приводит примеры их использования.

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

Перелистываемые страницы, плавающие врезки и многоколоночная разметка уже сегодня активно используются на мобильных устройствах. В качестве примеров можно привести журнал Flipboard, интерактивную книгу «Наш выбор» или приложение Paper от Facebook — все они являются нативными приложениями. Если мы хотим, чтобы веб победил на мобильных устройствах, (а мы этого хотим), жизненно важно предоставить веб-разработчикам возможность создавать страницы с таким же представлением, используя веб-стандарты. Если веб-стандарты не могут решить эту задачу, разработчикам ничего не остаётся, кроме как использовать возможности нативных приложений.

Последние несколько лет я работал над редакцией двух спецификаций, которые в сочетании друг с другом дают такие функциональные возможности: Многоколоночная разметка на CSS (CSS Multi-column Layout) и CSS-врезки (CSS Figures). Я верю, что они играют важную роль в том, чтобы веб оставался привлекательным для поставщиков контента.

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

Создание страницы

Для начала я возьму статью с заголовком, текстом и парой изображений. В обычных браузерах статья будет отображаться в виде одной колонки с полосой прокрутки с правой стороны. Используя CSS Multi-column Layout вы можете задать статье отображение в виде двух колонок вместо одной:

article { columns: 2 }

Это уже достаточно мощная строчка кода, однако мы можем сделать её ещё лучше; можно сделать так, чтобы количество колонок зависело от доступного пространства: чтобы на узком экране отображалась одна колонка, на более широком — две и т.д. Всё, что для этого нужно сделать — указать, что оптимальной длиной строки является 15em, тогда количество колонок будет рассчитываться само собой:

article { columns: 15em }

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

На скриншотах выше вы видите пролистываемое представление, а не прокручиваемое. Это легко делается с помощью:

article { overflow: paged-x }

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

Изображения

Добавление изображений в статью несколько повышает сложность задачи. Текстовые строки могут быть легко распределены между несколькими колонками, однако, если врезки идут вперемешку с текстом, результат может выглядеть неаккуратно. Так как изображение не делится на части, мы получим неиспользованное пустое пространство, если картинка окажется в месте перехода на следующую колонку. Чтобы этого избежать, в традиционной печатной раскладке изображения помещаются в нижнюю или верхнюю часть колонок, тем самым позволяя тексту заполнить пустое пространство. С помощью CSS это можно сделать добавив для свойства float значения top и bottom. Например:

img { float: bottom }

Синеватые картинки с гаванью на скриншотах выше «плавают» внизу страницы благодаря именно этой строчке кода. CSS используется для того, что не может быть сделано помощью HTML; невозможно знать заранее сколько текстового контента поместится на экране до того, как он будет отформатирован, следовательно, разработчик не может предугадать где нужно разместить изображение в исходном коде, чтобы в итоге оно оказалось внизу колонки. Возможность задавать размещение врезок по верхнему и нижнему краю через top и bottom (в дополнение к уже существующим left и right) — это естественное расширение значений свойства float.

Захват нескольких колонок

Ещё один трюк, одолженный у традиционной печатной разметки, — это когда врезка захватывает несколько колонок. Взгляните на эту вырезку из газеты:

Использовано с разрешения Bristol Observer

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

figure { float: bottom; column-span: 2 }

HTML5-элемент figure прекрасно подходит для размещения в нём изображения и подписи под ним:

<figure>
    <img src=cats.jpg>
    <figcaption>Isabel loves the fluffy felines</figcaption>
</figure>

В газетной статье также есть врезка, которая охватывает три колонки и располагается в верхнем правом углу. В предыдущей версии спецификации CSS-врезок это достигалось с помощью float: top-corner, однако после обсуждения с разработчиками стало ясно, что контент может располагаться не только по углам, поэтому в спецификацию были добавлены новые свойства, с помощью которых контент теперь может быть смещён до следующей колонки, страницы или строки.

Смещённые врезки

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

figure { float: top; float-defer-column: last; column-span: 3 }

Этот код, может быть, менее понятен (в сравнении с отвергнутым top-corner), однако он открывает ряд возможностей. Например, можно расположить элемент во второй колонке:

.byline { float: top; float-defer-column: 1 }

Код выше смещает строку с указанием автора, «By Collette Jackson», на одну колонку. Это означает, что если строка с именем автора в обычном случае должна располагаться в первой колонке, благодаря коду она окажется во второй (как в вырезке из газеты). Чтобы это заработало, в HTML-коде необходимо разместить строку с именем автора в начале статьи. Например вот так:

<article>
  <h1>New rescue center pampers Persians</h1>
  <p class=byline>By Collette Jackson</p>
  ...
</article>

Смещённые рекламные объявления

Рекламные объявления — это ещё один тип контента, который лучше всего прописывать в начале исходного кода и смещать для последующего вывода на страницу. Вот пример HTML-кода:

<article>
  <aside id=ad1 src=ad1.png>
  <aside id=ad2 src=ad2.png>
  <h1>New rescue center pampers Persians</h1>
</article>

А вот соответствующий CSS-код, по одной строчке для каждого рекламного объявления:

#ad1 { float-defer-page: 1 }
#ad2 { float-defer-page: 3 }

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

Думаю, и читателям, и рекламодателям понравится веб, более ориентированный на постраничное представление. В бумажных изданиях реклама никому особо не мешает. Точно так же, я думаю, что реклама на устройствах с пролистываемым представлением будет менее назойливой, чем на устройствах с прокруткой.

Смещённые цитаты

Последний пример контента, который может быть смещён — это цитаты. Цитата — это выдержка из статьи, набранная большим шрифтом и расположенная в каком-то определённом месте страницы. В этом примере цитата находится посередине второй колонки:

Вот код, которым это можно сделать в CSS:

.pullquote#first { float-defer-line: 50% }

Другие типы контента также можно позиционировать с помощью смещения: например, фотографию можно расположить над сгибом газеты, отступив несколько строк. Это будет полезно и для сгибаемых экранов будущего.

Цитаты — довольно интересное явление, которое заслуживает дополнительного обсуждения. У цитат есть две функции: во-первых, они представляют собой некий интересный отрывок текста для привлечения внимания; во-вторых, визуальное представление статьи становится более разнообразным, когда сплошной поток текста прерывается за счёт цитаты, набранной крупным шрифтом. Обычно размещают не более одной цитаты на страницу. На бумаге, когда известно сколько страниц займёт статья, легко предусмотреть нужное количество цитат, в вебе контент по-разному подстраивается под разные типы экранов: некоторые читатели увидят много маленьких страниц, другие — небольшое количество крупных. Чтобы убедиться, что цитат хватит на каждую страницу, разработчикам нужно заготовить их с избытком. Лишние цитаты не должны отображаться в конце статьи (что было бы естественным поведением для веб- браузера), они должны быть полностью скрыты, потому, что их содержимое в любом случае представлено в основном тексте статьи. Это можно сделать с помощью одной строки:

.pullquote { float-policy: drop-tail }

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

Упражнения для закрепления материала

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

Если вы хотите поиграть с CSS-врезками, проще всего будет скачать Opera 12.16 и открыть в нём этот документ, который использовался при создании скриншотов для первой иллюстрации. Исходя из моего опыта разработки, спецификации уже, скорее всего, изменены и не все примеры кода, представленные в этой статье, будут работать. Также Prince и AntennaHouse частично поддерживают CSS-врезки — это сервисы для массового форматирования PDF документов.

Я с удовольствием выслушаю как тех, кому понравился подход, описанный в этой статье, так и тех, кому он не понравился. Вы хотели бы, чтобы это было добавлено в браузеры? Сообщите мне ниже или обратитесь с соответствующей просьбой к разработчикам своего любимого браузера (Firefox, Chrome, Opera, IE). Если вам не нравятся представленные возможности, какой код вы бы использовали для решения описанных задач?

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