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

Правило, открытое дизайнером Ричардом Раттером (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 %;

}

Это может быть небольшое флеш-видео (рис. 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). Если изображения или другие медиафайлы появятся в этом списке, они станут гибкими, в противном случае – останутся в своем отсталом пиксельном состоянии.