Отзывчивый веб-дизайн

Маркотт Итан

^{Рис. 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 . Чтобы обеспечить поддержку PNG с альфа-каналом в IE, создано достаточно много патчей (библиотека Дрю Диллера DD_belatedPNG – моя самая любимая:, но так уж исторически сложилось, что, когда нужно прикрепить PNG к фону элемента, в таблицу стилей для IE нужно написать следующее правило:

.logo {

background: none;

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png", sizingMethod="scale");

}

Этот патч делает несколько вещей. Сначала он удаляет фоновое изображение из элемента, затем вставляет его в объект

AlphaImageLoader

, который расположен между настоящим фоновым слоем и контентом элемента. Однако умное свойство sizingMethod , которое говорит объекту

AlphaImageLoader

, что ему нужно обрезать (

crop

) какие-либо части изображения, вылезающие за контейнер, видит в нем обычное изображение (

image

) либо адаптирует его размер (scale) под содержащий его элемент.

Я так и вижу, как вы пытаетесь подавить зевок: в конце концов, какое отношение PNG-патчинг в IE имеет к нашим испорченным картинкам?

Как оказалось, самое непосредственное. В какой-то момент я обнаружил, что, если к изображению применить

AlphaImageLoader

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

sizingMethod

для масштабирования (

scale

), мы сможем использовать объект

AlphaImageLoader

для создания иллюзии гибкого изображения.

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

AlphaImageLoader

.

Разницу

можно заметить невооруженным глазом (рис. 3.8) – из почти полностью искаженного наше изображение превратилось в безупречное. То же можно сделать и с гибким контекстом.

^{Рис. 3.8. Теперь наше изображение отлично читается и великолепно масштабируется. Скажем же спасибо AlphaImageLoader!}

(Стоит упомянуть тот факт, что проприетарные фильтры Microsoft, и в частности

AlphaImageLoader

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

При применении правила

max-width: 100 %

(а также правила

width: 100 %

и патча

AlphaImageLoader

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

Но что делать с изображениями, которые отсутствуют в нашей верстке?

Гибкие повторяющиеся фоновые изображения

Представим, что наш уважаемый дизайнер прислал исправленный макет модуля блога. Заметили, что изменилось (рис. 3.9)?

^{Рис. 3.9. Теперь у нас появилась фоновая графика. Это круто!}

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

^{Рис. 3.10. Детальный взгляд на новый фон}

Но как нам добавить этот новый фон к уже существующему шаблону?

Еще в 2004 году Дэн Седерхольм написал прекрасную статью о том, как использовать вертикально повторяющуюся фоновую графику для создания эффекта «фальшивой колонки» . Гениальность технологии в ее простоте: повторяя цветное фоновое изображение по вертикали позади нашего контента, мы создаем иллюзию колонок одной высоты.

В оригинальной версии Дэна фоновая графика располагалась по центру вверху области с контентом и повторялась по вертикали:

.blog {

background: #F8F5F2 url("blog-bg.png") repeat-y 50 % 0;

}

И этот прием работал великолепно. Однако он был рассчитан на макет с фиксированной шириной, то есть создавал графику, которая совпадала с ним по ширине. Как же, интересно, мы будем работать с фоновым изображением, которое покрывает две гибкие колонки?