img,
embed,
object,
video {
max-width: 100 %;
}
Это может быть небольшое флеш-видео (рис. 3.5), встроенный медиафайл или скромное изображение – браузеры все сделают сами и поменяют размеры соответственно макету. И все благодаря этому чудесному ограничению max-width.
Так что же получается, мы действительно решили проблему гибких изображений? Одно правило – и все готово?
Рис. 3.5. С параметром max-width: 100 % гибкими становятся и другие элементы медиа. Я уже говорил, что люблю max-width: 100 %?
Если бы все было так просто…
Теперь займемся неприятными вещами и поговорим о некоторых особенностях браузеров по отношению к гибким изображениям.
Max-width в Internet Explorer
Суровая правда заключается в том, что Internet Explorer 6 и ниже не поддерживают свойство max-width. Что касается IE7 и выше, тут все в порядке. Но если вы, к моему глубочайшему сожалению, застряли в достопочтенном IE6 или более старой версии браузера, то придется кое-что доработать.
Существует несколько путей заставить свойство max-width работать в IE6. Большинство из них основано на JavaScript, обычно на базе проприетарного фильтра expression компании Microsoft, для динамической оценки ширины элемента и ручного изменения размеров в случае превышения установленного лимита. В качестве примера такого нестандартного подхода я могу порекомендовать статью Свенда Тофте (http://bkaprt.com/rwd/12/).
Что касается меня, я все-таки предпочитаю более простой CSS-подход. Все современные браузеры поддерживают свойство max-width:
img,
embed,
object,
video {
max-width: 100 %;
}
Но в отдельной таблице стилей для IE6 я бы сделал так:
img,
embed,
object,
video {
width: 100 %;
}
Заметили разницу? В IE6 и ниже правило width: 100 % оказывается важнее max-width: 100 %.
Вот здесь внимание: это совершенно разные правила. Если max-width: 100 % запрещает изображению превышать ширину контейнера, то width: 100 % делает его ширину равнозначной ширине содержащего его элемента.
В большинстве случаев этот прием работает отлично. Например, наша чрезмерно большая картинка robot.jpg будет всегда больше содержащего ее контейнера, поэтому правило width: 100 % в этом случае можно применять смело.
Что касается более мелких изображений, например миниатюр или большинства встроенных роликов, их не всегда можно слепо масштабировать при помощи CSS. В этом случае для IE лучше сделать так:
img.full,
object.full,
.main img,
.main object {
width: 100 %;
}
Если вы не хотите на вашей странице применять правило width: 100 % ко всем медиафайлам с фиксированной шириной, то можете написать список селекторов, которые будут размечать определенные виды изображений или видео (img.full) или определенные области документа, в которые вы будете вставлять файлы большого размера (.main img, main object). Если изображения или другие медиафайлы появятся в этом списке, они станут гибкими, в противном случае – останутся в своем отсталом пиксельном состоянии.
Таким образом, если вы все еще работаете с морально устаревшими версиями Internet Explorer, внимательно применяйте это правило, и все получится. Эту проблему мы решили, переходим к следующей.
И это что-то.
…И здесь становится понятно, что Windows нас ненавидит
Если вы посмотрите на модуль блога в каком-нибудь браузере на базе Windows, наша картинка robot.jpg превратится из впечатляющей в нечто непонятное (рис. 3.6).
Рис. 3.6. При просмотре в IE6 можно заметить, что наше изображение робота содержит некоторые нежелательные артефакты. Судя по всему, Windows не особенно пригоден для гибких изображений
И это проблема не браузера, а платформы: Windows не очень правильно определяет масштаб изображений. В Windows изображения, размеры которых изменены средствами CSS, быстро «обрастают» различными артефактами, что крайне плохо сказывается на их качестве.
Для проверки я забросил картинку с текстом в гибкий контейнер и изменил размер изображения при помощи правила max-width: 100 % во всех браузерах, а в IE6 и ниже при помощи width: 100 %. Ясное дело, что никто не поместит такой объем текста в изображение, но этот пример прекрасно демонстрирует то, насколько все плохо с картинками в IE7 и более старых версиях. Как видите, картинка выглядит просто тошнотворно, прошу прощения за мой французский (рис. 3.7).
Рис. 3.7. В некоторых браузерах для Windows изображение «обрастает» большим количеством артефактов, что реально мешает восприятию
Но прежде чем опускать руки, обратите внимание на то, что этот баг появляется не во всех браузерах на базе Windows. На самом деле от этой проблемы страдают только Internet Explorer 7 и ниже и Firefox 2 и ниже. Более современные браузеры, такие как Safari, Firefox 3+ и IE8+, не возражают против гибких изображений. Плюс ко всему в Windows 7, кажется, починили этот баг, – еще одна хорошая новость.
Может быть, теперь, когда мы выяснили, в чем проблема, мы сможем использовать какой-нибудь патч? Да, сможем (правда, за исключением Firefox 2).
Эта почтенная старая версия выпущена в 2006 году, поэтому я не думаю, что ею пользуется сколько-нибудь значительное число посетителей вашего сайта. Так или иначе, патч для Firefox 2 потребует анализа браузера для выявления определенных версий на определенной платформе, а такой анализ, мягко говоря, ненадежен. Но даже если мы решим его выполнить, в старых версиях Firefox нет возможности исправить такие изображения.
В Internet Explorer же такая возможность есть. (Придется поступиться своим самолюбием ради названия следующего раздела.)
Да здравствует герой-победитель AlphaImageLoader!
Вы когда-нибудь пытались сделать изображения в формате PNG прозрачными в IE6 и ниже? Если да, то вы наверняка использовали AlphaImageLoader, проприетарный CSS-фильтр компании Microsoft (http://bkaprt.com/rwd/13/). Чтобы обеспечить поддержку PNG с альфа-каналом в IE, создано достаточно много патчей (библиотека Дрю Диллера DD_belatedPNG – моя самая любимая: http://bkaprt.com/rwd/14/), но так уж исторически сложилось, что, когда нужно прикрепить PNG к фону элемента, в таблицу стилей для IE нужно написать следующее правило:
.logo {
background: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png", sizingMethod="scale");
}
Этот патч делает несколько вещей. Сначала он удаляет фоновое изображение из элемента, затем вставляет его в объект AlphaImageLoader, который расположен между настоящим фоновым слоем и контентом элемента. Однако умное свойство sizingMethod (http://bkaprt.com/rwd/15/), которое говорит объекту AlphaImageLoader, что ему нужно обрезать (crop) какие-либо части изображения, вылезающие за контейнер, видит в нем обычное изображение (image) либо адаптирует его размер (scale) под содержащий его элемент.
Я так и вижу, как вы пытаетесь подавить зевок: в конце концов, какое отношение PNG-патчинг в IE имеет к нашим испорченным картинкам?
Как оказалось, самое непосредственное. В какой-то момент я обнаружил, что, если к изображению применить AlphaImageLoader, это существенно улучшает качество его отображения в IE, что ставит этот браузер на одну ступеньку с любым другим браузером. Кроме того, задав свойство sizingMethod для масштабирования (scale), мы сможем использовать объект AlphaImageLoader для создания иллюзии гибкого изображения.
Я сварганил небольшой JavaScript, чтобы автоматизировать этот процесс. Просто скачайте скрипт (http://bkaprt.com/rwd/16/) и вставьте его в любую страницу с гибкими изображениями; он подготовит ваш документ для создания гибких, высококачественных объектов AlphaImageLoader.
Разницу можно заметить невооруженным глазом (рис. 3.8) – из почти полностью искаженного наше изображение превратилось в безупречное. То же можно сделать и с гибким контекстом.
Рис. 3.8. Теперь наше изображение отлично читается и великолепно масштабируется. Скажем же спасибо AlphaImageLoader!
(Стоит упомянуть тот факт, что проприетарные фильтры Microsoft, и в частности AlphaImageLoader, снижают производительность – более подробно все подводные камни этого метода описывает Стоян Стефанов в блоге YUI (http://bkaprt.com/rwd/17/). Поэтому тщательно протестируйте это правило, проверьте результаты на своих пользователях и решите для себя, стоит ли улучшенное отображение таких издержек.)
При применении правила max-width: 100 % (а также правила width: 100 % и патча AlphaImageLoader) вложенные картинки прекрасно меняют свой размер наряду со всей гибкой сеткой во всех браузерах в зависимости от размера окна браузера.
Но что делать с изображениями, которые отсутствуют в нашей верстке?
Гибкие повторяющиеся фоновые изображения
Представим, что наш уважаемый дизайнер прислал исправленный макет модуля блога. Заметили, что изменилось (рис. 3.9)?
Рис. 3.9. Теперь у нас появилась фоновая графика. Это круто!
До этого момента содержание нашего блога располагалось на непонятном, практически белом фоне. Но теперь дизайн немного изменился, фон левой колонки стал серым для большей контрастности между колонками. Кроме того, в фоне появились еле заметные искажения, которые добавляют к нашему дизайну еще один слой текстуры (рис. 3.10).
Рис. 3.10. Детальный взгляд на новый фон
Но как нам добавить этот новый фон к уже существующему шаблону?
Еще в 2004 году Дэн Седерхольм написал прекрасную статью о том, как использовать вертикально повторяющуюся фоновую графику для создания эффекта «фальшивой колонки» (http://bkaprt.com/rwd/18/). Гениальность технологии в ее простоте: повторяя цветное фоновое изображение по вертикали позади нашего контента, мы создаем иллюзию колонок одной высоты.
В оригинальной версии Дэна фоновая графика располагалась по центру вверху области с контентом и повторялась по вертикали:
.blog {
background: #F8F5F2 url("blog-bg.png") repeat-y 50 % 0;
}
И этот прием работал великолепно. Однако он был рассчитан на макет с фиксированной шириной, то есть создавал графику, которая совпадала с ним по ширине. Как же, интересно, мы будем работать с фоновым изображением, которое покрывает две гибкие колонки?
Благодаря некоторым исследованиям дизайнера Дага Баумана (http://bkaprt.com/rwd/19/) мы все еще можем применять технологию «фальшивой колонки». Просто нужно уделить немного больше внимания планированию и вытащить на свет нашу любимую формулу target ÷ context = result.
Сперва нужно снова глянуть на наш первоначальный макет, чтобы найти точку перехода на фоновой графике, точный пиксель, на котором белая колонка переходит в серую. Судя по всему, это происходит на 568 пикселе (рис. 3.11).
Рис. 3.11. Белая колонка переходит в серую на отметке 568px. Это и есть наша точка перехода
Вооружившись этой информацией, мы можем адаптировать подход «фальшивой колонки» к нашей «резиновой» сетке. Сначала нам нужно конвертировать точку перехода в процентное значение, соответствующее ширине модуля нашего блога. Чтобы это сделать, снова воспользуемся формулой target ÷ context = result. Целевое значение – 568px, ширина макета (контекста) – 900px. Подставляем эти цифры в формулу:
568 ÷ 900 = 0.631111111111111
И снова получаем какое-то невероятно длинное число, которое превращаем в проценты – 63,1111111111111 %
Запомните его. Затем откройте ваш любимый редактор изображений и создайте какой-нибудь огромный документ, шириной, скажем, 3000 пикселей (рис. 3.12). А поскольку мы собираемся повторять его по вертикали, высоту сделайте 160px.
Рис. 3.12. Невероятно большой холст, который мы совсем скоро превратим в фоновую графику
Именно из этого документа мы сделаем нашу фоновую графику. Вы можете спросить: зачем такой большой? Я отвечу: изображение должно быть больше, чем любое окно браузера. Полагаю, что, если только вы не читаете этот текст из XXV века с какого-нибудь экрана шириной на всю стену, сделанного из голограмм или чего-то не менее мудреного, ваш монитор не будет шире этого изображения.
Чтобы сделать сами колонки, нам нужно применить процентное значение точки перехода (63,1111111111111 %) к новому широкому холсту. То есть, если ширина графики 3000 пикселей, мы перемножаем эти два числа:
3000 x 0.631111111111111 = 1893.333333333333
и в результате получаем 1893,333333333333. А поскольку Photoshop не хочет иметь дело с десятичными долями, давайте округлим это число до 1893 пикселей. Нам осталось только создать нашу текстуру из нового файла, сделав переход от белого цвета к серому на 1893-м пикселе (рис. 3.13).
Рис. 3.13. Мы применили к широкому фоновому изображению проценты, что привело к созданию колонок
Что это нам дает? Только что мы пропорционально определили точку перехода на новом широком холсте. При помощи нового пиксельного значения мы можем сделать нужные нам колонки: белая будет шириной в 1893px, а серая займет всю остальную часть изображения.
Осталось сделать одно: вписать новую графику в таблицу стилей:
.blog {
background: #F8F5F2 url("blog-bg.png") repeat-y63.1111111111111 % 0; /* 568px / 900px */
}
Следуя оригинальной технологии Дэна, мы располагаем графику в самом верху нашего блога и повторяем ее по вертикали (repeat-y). Благодаря постоянному повторению процентного значения точки перехода (63,1111111111111 % 0) колонки остаются неизменными по отношению друг к другу, независимо от того, какого размера становится сам макет.
В результате мы получили прекрасные фальшивые колонки в «резиновом» макете (рис. 3.14). Все благодаря оригинальному подходу Дэна Седерхольма, приправленному небольшими пропорциональными размышлениями.
Рис. 3.14. Идеально гибкие колонки
Полностью гибкие фоновые изображения?
Конечно, наши гибкие фальшивые колонки, вообще-то, совсем не гибкие: мы просто использовали процентное значение в размещении фонового изображения так, чтобы колонки меняли свои размеры в зависимости от размеров контейнера. Размеры изображения при этом остаются неизменными.
Но что делать, если нам нужно, чтобы фоновое изображение тоже меняло свои размеры вместе с макетом? Например, вы разместили логотип на фоне элемента h1 или используете спрайты[2] для создания ролловер-эффекта в навигации сайта. Сможем ли мы изменить размеры картинок, изображенных на фоне?
Сможем. Существует CSS3-свойство под названием background-size (http://bkaprt.com/rwd/20/), которое позволяет создать действительно гибкие фоновые изображения, однако, как вы, наверное, уже догадались, не все браузеры обеспечивают его поддержку.
Но существует несколько отличных решений на базе JavaScript: например, jQuery-плагин Backstretch Скотта Робина (http://bkaprt.com/rwd/21/), который позволяет добавлять масштабируемые фоновые изображения для элемента body. Как вы узнаете из следующей главы, медиазапросы CSS3 также можно использовать для адаптации различных фоновых изображений к различным диапазонам разрешений. Так что если нет возможности использовать background-size, вполне возможно найти другое решение. Для пытливого ума нет преград – гласит народная мудрость.
Как научиться любить Overflow
Существует еще несколько способов адаптации изображений с фиксированной шириной к «резиновому» контексту. Посмотрите эксперименты Ричарда Раттера с широкими изображениями в гибких макетах (http://bkaprt.com/rwd/11/). Раз уж вы решили заняться отзывчивым дизайном, изучите эти способы, некоторые из них могут оказаться весьма полезными.
Лично я несколько раз использовал свойство overflow. Как мы узнали из предыдущей главы, широкие изображения могут попросту вылезать за пределы своих контейнеров. И в большинстве случаев для их ограничения лучше всего использовать правило max-width: 100 %. Но можно и обрезать эти лишние данные, применив свойство overflow: hidden. То есть вместо того, чтобы позволить изображению изменить свои размеры автоматически:
.feature img {
max-width: 100 %;
}
мы можем попросту отрезать лишние данные:
.feature {
overflow: hidden;
}
.feature img {
display: block;
max-width: auto;
}
В результате получаем изображение, обрезанное под свой контейнер (рис. 3.15). Оно никуда не делось, просто его лишние элементы не видны.
Однако это не лучшее решение. На самом деле я считаю, что в большинстве случаев overflow проигрывает max-width. Но этот метод имеет право на существование и в некоторых случаях даже может быть полезным.
Рис. 3.15. Применив overflow: hidden к контейнеру нашего изображения, мы получили обрезанное изображение. Можно крикнуть «ура»
Проблемы с контентом
В большинстве случаев и свойство overflow, и правило max-width: 100 % довольно функциональны и работают для большинства медиа-файлов. Лично я успешно применял их в различных «резиновых» сетках.
Но при этом оба подхода абсолютно нечувствительны к содержанию. Каждый из них устанавливает некоторые основные правила, которым следуют изображения по отношению к своим контейнерам: max-width: 100 % масштабирует картинку в соответствии с размерами контейнера, а overflow позволяет убрать лишние данные, выходящие за его пределы.