Рис. 2.15. Дизайн выглядит отлично, но он совсем негибкий. Давайте это исправим
От пикселей к процентам
Вместо того чтобы переносить значения в пикселях из оригинал-макета в CSS, мы должны перевести эти размеры в относительные, пропорциональные значения. В результате мы получим сетку, которая будет трансформироваться в зависимости от области просмотра, причем оригинальные пропорции дизайна останутся неизменными.
Давайте начнем с первого элемента #page, который содержит наш макет, и попробуем что-нибудь с ним сделать:
#page {
margin: 36px auto;
width: 960px;
}
Противные, гадкие пиксели. Терпеть их не можем!
Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтому давайте попробуем перевести эти 960 пикселей в проценты.
#page {
margin: 36px auto;
width: 90 %;
}
Должен признаться, что я пришел к этим 90 % без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента #page в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра (рис. 2.16). И поскольку он отцентрирован по горизонтали, справа и слева останутся отступы по 5 %.
Рис. 2.16. Наш контейнер изменяется в размерах при любом изменении размера окна браузера
Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль .blog. Чуть ранее, когда мы играли с пикселями, то установили следующее правило:
.blog {
margin: 0 auto 53px;
width: 900px;
}
Теперь вместо величины в пикселях мы должны выразить ширину элемента .blog в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула target ÷ context = result.
Из оригинал-макета мы знаем, что ширина нашего блога должна составлять 900px. Теперь нам нужно представить эту ширину в относительных единицах, процентах ширины родительского элемента для элемента .blog. Поскольку блок .blog вложен в элемент #page, ширина которого в соответствии с оригинал-макетом составляет 960 пикселей, это и есть наш контекст.
Давайте разделим ширину .blog (900) на его контекст (960):
900 / 960 = 0,9375
У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем 93,75 % и заносим их прямо в CSS:
.blog {
margin: 0 auto 53px;
width: 93,75 %; /* 900px / 960px */
}
(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины (width). Это, разумеется, дело вкуса, но я нахожу это очень полезным.)
Итак, с двумя элементами мы разобрались. Но что делать с колонками?
.blog.main {
float: left;
width: 566px;
}
.blog.other {
float: right;
width: 331px;
}
Ширина основной колонки, которая расположена слева, составляет 566px, ширина же левой колонки равна 331px. Эти цифры нам тоже придется перевести в проценты. Но прежде чем подставить их в формулу, обратите внимание на то, что контекст изменился. Последний раз мы делили ширину модуля .blog на 960, ширину его контейнера (#page). Но поскольку эти блоки вложены в .blog, нам нужно делить целевую ширину колонок (566 и 331) на ширину их нового контекста, то есть ширину .blog (900). В результате мы получаем:
566 / 900 = 0,628888889
331 / 900 = 0,367777778
Передвинув запятую на два знака, мы получаем в итоге 62,8888889 % для блока .main и 36,7777778 % для блока .other:
.blog.main {
float: left;
width: 62.8888889 %; /* 566px / 900px */
}
.blog.other {
float: right;
width: 36.7777778 %; /* 331px / 900px */
}
Вот мы и получили гибкий макет (рис. 2.17). При помощи небольших расчетов мы создали контейнер, выраженный в процентах, и две гибкие колонки, что дает нам макет, меняющий свои размеры в соответствии с размерами окна браузера. При этом ширина в пикселях тоже меняется, а пропорции дизайна остаются исходными.
Рис. 2.17. Наша гибкая сетка готова
Гибкие поля и отступы
Теперь, когда две колонки стоят на своих местах, можно сказать, что мы закончили с основными компонентами нашей гибкой сетки. Изумительно. Замечательно. Великолепно. И все же этого недостаточно: нас ждет работа над деталями.
Не продохнуть…
Наш дизайн уже достаточно гибок, однако он требует серьезного внимания к двум основным деталям. Название блога уехало далеко влево (рис. 2.18), а две колонки примыкают друг к другу без каких-либо отступов или промежутков (рис. 2.19). Определенно, нам нужно еще поработать.
(Конечно, на самом деле мы без них страдаем.)
Рис. 2.18. Наш заголовок отчаянно нуждается в полях
Рис. 2.19. Отступы? Мы не признаем никаких отступов!
Рис. 2.20. Согласно параметрам эскиза, нам нужно задать горизонтальное поле в 48 пикселей с левой стороны заголовка
Ну что ж, давайте начнем с заголовка. В оригинальном макете между началом заголовка и левым краем контейнера есть промежуток в 48 пикселей (рис. 2.20). Мы, конечно, могли бы задать поле (padding-left) в пикселях или em:
.lede {
padding: 0.8em 48px;
}
Это хорошее решение. Но это фиксированное значение левого поля (padding-left) создаст промежуток, который не будет сочетаться со всей «резиновой» сеткой. И когда гибкие колонки будут становиться у́же или шире, это поле проигнорирует остальные пропорции дизайна, и ширина его всегда окажется 48 пикселей (48px), независимо от того, насколько уменьшился или увеличился весь макет.
Так что мы не пойдем этим путем – мы создадим гибкий отступ. Пока что мы использовали относительные единицы измерения только в отношении ширины различных элементов, но мы можем это сделать и с полями и отступами. И воспользуемся для этого нашей проверенной формулой:
target ÷ context = result
Прежде чем мы снова займемся вычислениями, хочу обратить ваше внимание на то, что контексты для гибких полей и для гибких отступов немного отличаются.
1. Задавая гибкие отступы для элемента, принимайте за контекст ширину контейнера элемента.
2. Задавая гибкое поле для элемента, принимайте за контекст ширину самого элемента. Подумайте о «боксовой» модели, и эти предложения обретут смысл: мы описываем поле в отношении к ширине самого элемента.
Поскольку мы хотим определить поле заголовка, в качестве контекста мы возьмем ширину самого элемента .lede. Ширина заголовка нам неизвестна, поэтому мы берем ширину модуля блога, то есть 900 пикселей. Снова открываем калькулятор и получаем:
48 / 900 = 0,0533333333
и переводим результат в:
.lede {
padding: 0.8em 5.33333333 %; /* 48px / 900px */
}
Наши 48 пикселей поля теперь выражены в относительных единицах измерения, как доля ширины заголовка.
С этим расправились, идем дальше. Давайте введем понятие пробела в наш контент. Но сначала вспомним, что каждая колонка фактически содержит меньший модуль: левая колонка .blog содержит модуль. article, а правая .other – список .recent-entries (рис. 2.21).
Рис. 2.21. Взглянув на колонки, мы можем достаточно быстро определить их ширину
Начнем с последнего. К счастью для нас, тут и делать нечего. Мы знаем ширину элемента (231px) и ширину содержащей ее колонки (331px), поэтому можем просто отцентрировать модуль по горизонтали:
.recent-entries {
margin: 0 auto;
width: 69.7885196 %; /* 231px / 331px */
}
Со статьей (модуль .article) мы можем поступить так же. Но давайте-ка попробуем кое-что другое.
Помните поле шириной 48px, которое мы задали в заголовке? Наша статья находится в той же колонке (рис. 2.22), поэтому вместо того, чтобы размещать ее по центру контейнера, создадим еще один пропорциональный промежуток.
Рис. 2.22. У заголовка и статьи одинаковые поля
Целевое значение – 48px. А поскольку мы работаем с относительным полем, в качестве контекста берем ширину самой статьи. Но, опять же, мы не знаем точной ширины модуля .article, поэтому используем ширину блока .blog, то есть 566px:
.article {
padding: 40px 8.48056537 %; /* 48px / 566px */
}
Вуаля! Гибкая сетка закончена (рис. 2.23).
Рис. 2.23. Гибкие поля и отступы! Ура!
Немного отрицательных значений
Давайте обратим внимание на заголовок даты записи в блоге.
Пока он занимает всю ширину записи, а так быть не должно. К этому времени мы уже много чему научились, поэтому особых затруднений не возникнет. На первоначальном дизайне мы видим, что дата расположена слева и занимает одну колонку шириной 69px (вернемся к рис. 2.12). А поскольку дата входит в блок статьи шириной 474px, мы уже знаем и контекст.
Вооружившись этой информацией, напишем небольшой CSS:
.date {
float: left;
width: 14.556962 %; /* 69px / 474px */
}
Пока все хорошо и гибко. Но мы упустили один ключевой элемент: на данный момент дата расположена вплотную к левому краю статьи и окружена заголовком и текстом (рис. 2.24). А нам нужно вынести ее за пределы контейнера к левому краю целого модуля.
Рис. 2.24. Прогнило что-то в датском королевстве. (Под «датским королевством» я имею в виду дату записи, а когда я говорю «прогнило», то это значит, что она находится слишком близко к тексту.)
Мы сможем сделать это при помощи отрицательных отступов, причем нам даже не придется менять принцип действий. Как и прежде, все, что нам нужно, – это определить ширину отступа по отношению к ширине контейнера элемента.
На первоначальном дизайне расстояние от левого края даты до левого края статьи составляет 81 пиксель (рис. 2.25). Если бы это был дизайн с фиксированной шириной, эта величина стала бы нашим отрицательным отступом:
.date {
float: left;
margin-left: -81px;
width: 69 px;
}
Рис. 2.25. Необходимо сдвинуть дату влево на 81px (или соответствующий относительный эквивалент)
Но мы ведь пока еще ни разу не использовали пиксели, так давайте не будем и начинать. И хотя отступ должен быть отрицательным, это не меняет нашу формулу. Мы все еще хотим выразить целевое значение, то есть отступ шириной в 81px, как процентное отношение от ширины содержащего дату элемента в 474px. Переставьте запятую, поставьте минус перед числом – и вы получите пропорциональное отрицательное поле:
81 ÷ 474 =.170886076
А теперь откиньтесь на спинку кресла, расслабьтесь и целиком насладитесь моментом: вы впервые создали полностью гибкую сетку (рис. 2.26). Мне хочется пожать вам руку.
Рис. 2.26. Наша гибкая сетка готова. В основе ее вовсе не пиксели, и при этом – никаких компромиссов с эстетической точки зрения
Гибко двигаемся дальше
Я понимаю, что из-за меня вам пришлось заниматься расчетами больше, чем хотелось бы. Я сам всего этого на дух не переношу и потому – поверьте! – искренне вам сочувствую.
Но создание гибкой сетки – это не только математика. Конечно, формула target ÷ context = result помогает превратить размеры в процентные отношения, но вообще-то мы должны сломать нашу привычку переносить пиксели из Photoshop напрямую в CSS и сосредоточить наше внимание на пропорциях, заданных в дизайне. Мы должны научиться лучше видеть контекст, в первую очередь пропорциональное отношение между элементом и контейнером.
«Резиновая» сетка – это всего лишь основа, первый слой отзывчивого дизайна. Давайте двигаться дальше.
3. Гибкие изображения
Ну что ж, ПОКА ДЕЛА идут неплохо. У нас есть готовая сетка, сложностью которой мы в угоду гибкости не пожертвовали. Должен признаться: когда я в первый раз создал гибкую сетку, я невероятно гордился собой.
Но потом, как это часто случается с веб-дизайнерами, на меня накатило отчаяние. На нашей странице прекрасно смотрятся слова, сам текст без усилий подстраивается под гибкий контейнер. Но и все! Я не знаю, заметили ли вы, но в Интернете встречаются еще и картинки. А в нашей гибкой сетке их пока нет.
Что же произойдет, если мы вставим изображение с фиксированной шириной в гибкий дизайн?
Назад к разметке
Чтобы ответить на этот вопрос, давайте проведем небольшой эксперимент: вставим картинку прямо в модуль блога и посмотрим, как на это отреагирует макет. Но сначала нужно освободить место в разметке.
Помните тот маленький блок для цитаты blockquote, так удобно вписавшийся в нашу статью? У нас и так уже слишком много текста, давайте заменим его на изображение:
<div class="figure">
<p>
<img src="robot.jpg" alt="" />
<b class="figcaption">Lo, the robot walks</b>
</p>
</div>
Ничего особенного: элемент img, за которым следует короткая, но информативная надпись, заключенная в элемент b. Фактически в этом отрезке я использовал теги figure/figcaption из HTML5 в качестве названий классов, что способствует созданию крепкой семантической основы.
(Внимательные читатели могут заметить, что я использовал элемент b, а это несемантический прием. Некоторые дизайнеры в этом случае используют текстовый элемент span. Что касается меня, то в несемантической разметке мне импонирует лаконичность таких коротких тегов, как b и i.)
С HTML закончили, давайте перейдем к CSS:
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557 %; /* 12px / 474px */
width: 48.7341772 %; /* 231px / 474px */
}
У нас получилось прекрасное удобное местечко для картинки. Она будет располагаться справа и занимать половину ширины статьи, или четыре колонки гибкой сетки. Разметку и стиль проверили. Понятное дело, что все эти HTML и CSS не нужны, если нет никакой реальной картинки под рукой.
Поскольку я очень хорошо к вам отношусь (почти так же, как к роботам), я потратил некоторое время в Сети, выбирая подходящую картинку, и нашел фантастического робота (рис. 3.1). Преимущество этого изображения, помимо самого робота, конечно, еще и в том, что оно просто огромное. Я его немного обрезал, но не уменьшал, а оставил первоначальное разрешение 655 х 655. Он явно намного больше, чем гибкий контейнер, который будет его содержать. А значит, у нас есть прекрасная возможность посмотреть, как будет вести себя наш гибкий макет.
Загружаем эту огромную картинку на сервер, обновляем страницу – и что мы видим? Отвратительно. Хуже не придумаешь (рис. 3.2).
Рис. 3.1. Вполне подходящее изображение робота, использованное с любезного согласия Джереми Ноубла
Рис. 3.2. Огромное изображение – огромные проблемы
Вообще-то удивляться тут нечему. Макет в принципе в порядке – гибкий контейнер работает как надо, а пропорции колонок остались неизменными. Но из-за того, что изображение шире, чем модуль. figure, то, что не поместилось, попросту вылезло за его пределы. Мы не применили к изображению никаких ограничений, которые бы сочетали его с гибким окружением.
Гибкие изображения
А что если ввести такое ограничение: написать правило, которое не позволит картинкам выходить за ширину их контейнера?
У меня для вас хорошие новости: сделать это проще простого:
img {
max-width: 100 %;
}
Правило, открытое дизайнером Ричардом Раттером (http://bkaprt.com/rwd/11/), накладывает на любое изображение в документе одно невероятно удобное ограничение. Теперь ширина элемента img может быть какой угодно, при условии, что она не превышает ширину содержащего его контейнера. В противном случае свойство max-width: 100 % заставит изображение ограничиться шириной контейнера. И как вы видите, наша картинка прекрасно стала на место (рис. 3.3).
Рис. 3.3. За счет добавления max-width: 100 % мы смогли удержать наше изображение в рамках контейнера. Вот за что я люблю max-width: 100 %
Рис. 3.4. Вне зависимости от изменения размеров гибкого контейнера изображение остается пропорциональным. Волшебство? Кто знает…
Более того, современные браузеры умеют пропорционально менять размеры картинок. Если гибкий контейнер будет менять свои размеры, уменьшая или увеличивая изображение, соотношение сторон картинки останется неизменным (рис. 3.4).
Я надеюсь, вы еще не устали от хороших новостей, поскольку, как оказалось, правило max-width: 100 % можно применять к большинству элементов с фиксированной шириной, таким как видео– и другие медиафайлы. Фактически мы можем добавить в селектор еще и другие медиаэлементы:
img,
embed,
object,
video {
max-width: 100 %;
}