С удобством от устройства к устройству. Часть 3

Артемий Ломов

После того, как в предыдущей части нашей серии статей мы обсудили детали спецификации CSS3 Media Queries, имеет смысл рассмотреть практический пример использования этой технологии. Вообще говоря, красивых примеров реализации того, что принято называть responsive web design, в Интернете предостаточно, особенно в западном его сегменте — можно упомянуть хотя бы специализированный проект mediaqueri.es или соответствующий раздел на сайте DesignModo. В то же время, начинающему веб-разработчику важно не только увидеть технологию в действии, но и услышать содержательные комментарии, касающиеся разнообразных нюансов ее применения. При этом желательно обсуждать все же относительно простой, учебный пример с тем, чтобы не распылять внимание на лишние и несущественные детали.

Собственно, именно такого рода пример я и предлагаю вашему вниманию. Его исходники доступны в архиве (в каталоге example) материалов к докладу, послужившего основой для этой серии статей. Пример можно открыть также и по прямой ссылке для просмотра в браузере «без отрыва от производства» (рекомендуем открывать эту ссылку в новой вкладке).

Ключевые особенности примера

Обозначим кратко основные отличительные черты нашего практического примера.

  • Код разметки использует синтаксис HTML5 — объявление <!DOCTYPE html>, новые структурные элементы и новый синтаксис некоторых старых элементов.
  • Для совместимости с морально устаревшими версиями IE (точнее, для того, чтобы к новым элементам HTML5 применялись назначенные им стили) используется специальный скрипт.
  • Графика не применяется как таковая. Для реализации различных декоративных визуальных эффектов (тени, градиенты, скругленные уголки и другое) безальтернативно используется CSS.
  • Предусматривается автоматически применяемая версия представления контента для распечатки на принтере. Текст выстраивается в одну колонку, меню навигации не выводится, используются только черный тон и градации серого без лишних визуальных изысков. Вместо рубленой (без засечек) гарнитуры, применяющейся для основного контента в экранной версии представления, используется антиква (шрифт с засечками), в печатном варианте являющаяся более удобочитаемой. Базовый кегль шрифта, в отличие от описания экранной версии представления, задается не в пикселях, а в пунктах.
  • При просмотре на экранах верстка страницы изменяется в зависимости от ширины области просмотра благодаря использованию Media Queries. Блоки могут располагаться в три, в две или в одну колонку, меняется также базовый размер шрифта и величины некоторых полей и отступов.
  • В устаревших браузерах, например, IE версий ниже девятой, возможности CSS3 не находят поддержки, но страница во вполне приемлемом виде отображается на экранах в соответствии с принципом graceful degradation. Используется верстка в варианте «по умолчанию» в три колонки, со средненьким размером шрифта. Контент полностью доступен пользователям. При распечатке документа исправно применяется специально адаптированная для данного типа среды версия представления контента, будучи реализованной при помощи инструментов, не выходящих за рамки CSS2.1.

В состав примера входят следующие файлы (перечисляю их с индивидуальными ссылками для тех, кто не собирается скачивать упомянутый выше архив для локальных экспериментов, принимая за базовый URL каталог, в котором располагается основной HTML-документ):

  • /index.html — HTML-файл веб-страницы;
  • /_styles/reset.css — CSS-файл, сбрасывающий стили, применяемые браузерами по умолчанию к различным элементам разметки (использование такого подхода предложено Эриком Мейером, весьма известным в мировом сообществе веб-технологов пропагандистом веб-стандартов);
  • /_styles/fonts.css — CSS-файл, использующийся для подключения шрифтов, представленных внешними файлами и, возможно, не установленных в системе у пользователя;
  • /_styles/all.css — основной CSS-файл, описывающий все аспекты представления нашей веб-страницы;
  • /_scripts/html5.js — JavaScript-код, использующийся для обеспечения возможности применения стилей к HTML5-элементам в IE морально устаревших версий (первоначальная версия разработана Реми Шарпом, еще одним заметным в мировом профессиональном сообществе популяризатором веб-стандартов, а ныне проект развивается коллективными усилиями уже нескольких разработчиков);
  • /_fonts/*.* — файлы используемых шрифтов, распространяемых на основе открытой лицензии, в различных форматах.

Несколько слов о разметке

Строго говоря, особенности кода разметки, задействованного в нашем примере, никак не связаны с использованием Media Queries, но мне показалось разумным кратко остановиться на них, как и на нескольких напрямую не связанных с аппаратно-зависимыми стилями аспектах применения CSS. Это позволит рассмотреть пример комплексно — что-то подсказывает мне, что пока еще не каждый веб-разработчик в России отваживается в полную силу использовать в повседневной практике возможности HTML5 и CSS3. Вероятно, эта статья в какой-то мере поможет расставить все по местам и преодолеть скованность перед лицом новых технологий.

Итак, в коде разметки нашего примера вместо SGML-ориентированного объявления типа документа мы используем краткую конструкцию <!DOCTYPE html>, преследующую единственную цель — переключение браузера в режим соответствия стандартам (standards mode). Особенности HTML5 с этой точки зрения мы уже обсуждали в заметке, опубликованной летом, поэтому здесь повторяться не станем. Скажу лишь следующее: даже если вы не собираетесь задействовать в коде разметки новые структурные элементы HTML5 наподобие <nav> или <article>, разумно все равно пользоваться новым коротким доктайпом. Эту тему исчерпывает доклад Вадима Макеева «Доктайп. Точка», прозвучавший на московской встрече Web Standards Days еще (вот видеозапись и презентация этого выступления).

Применяя доктайп HTML5, вы, в частности, сможете на законных основаниях воспользоваться удобным сокращенным синтаксисом некоторых уже давно привычных элементов. В нашем примере можно обратить внимание вот на эти конструкции:

<meta charset="utf-8">
<link rel="stylesheet" href="_styles/all.css">

Кодировку документа можно в рамках синтаксиса HTML5 указывать вот так просто, без использования эмуляции полей HTTP-заголовка при помощи атрибута http-equiv элемента <meta>. Элемент <link>, использующийся для подключения таблицы стилей, может применяться без атрибута type="text/css". Не нужны и замыкающие символы косой черты в описании пустых элементов (обязательные с точки зрения строгих синтаксических правил XHTML).

Что касается конструкции <meta name="viewport" content="width=device-width">, смотрите и слушайте другой доклад Вадима Макеева — «Прокрустовы окна» (вот вам, пожалуйста, видеозапись и презентация — получите-распишитесь). В двух словах: этот метатег, предложенный компанией Apple, — прообраз будущей спецификации CSS Device Adaptation, которая позволит веб-разработчикам управлять размерами, масштабированием и ориентацией области просмотра при первоначальной инициализации веб-страницы. Сие актуально, главным образом, для мобильных устройств. Использованная нами конструкция предписывает веб-странице занять при загрузке всю доступную ширину устройства, но в то же время не вылезать за ее пределы.

Персонально для IE версий ниже девятой (с использованием синтаксиса условных комментариев — conditional comments) мы подключаем скрипт html5.js, о котором уже кое-что говорилось выше:

<!--[if lt IE 9]><script src="_scripts/html5.js"></script><![endif]-->

Он создает в DOM новые структурные элементы HTML5, заставляя Internet Explorer с ними считаться, и производит еще некоторые действия. (Если ограничиться только лишь созданием HTML5-элементов в DOM — а для этого достаточно нехитрых конструкций наподобие document.createElement("article");, — IE откажется применять к таким элементам заданные стили при распечатке документа. Есть и разные другие, менее глобальные проблемы.) Как уже говорилось, проект продолжает развиваться, и, по идее, желательно подключать последнюю версию обсуждаемого скрипта, размещенную на Google Code. Но в рамках примера, который гипотетически может демонстрироваться локально, в отсутствии доступа к Интернету, мне все-таки спокойнее носить с собой собственный экземпляр скрипта.

Условные комментарии как таковые обрабатываются только браузерами семейства Internet Explorer. Более того, ожидается, что этот механизм будет упразднен в десятой версии IE — иными словами, IE10, как и любые альтернативные по отношению к IE браузеры, станет интерпретировать такие конструкции как обычные HTML-комментарии. Компания Microsoft отныне предлагает веб-разработчикам не зацикливаться на конкретных разновидности и номере версии браузера, а проверять его фактические возможности, что в идеологическом плане, конечно же, гораздо более правильно.

…До сего момента в этом разделе мы обсуждали, кажется, только конструкции, находящиеся внутри элемента <head> HTML-документа нашего примера. Вопреки соотношению объемов содержимого, разговор о внутренностях элемента <body> будет более коротким. В коде разметки тела документа мы используем такие новые структурные элементы HTML5, как <header>, <nav>, <article>, <aside> и <footer> (перечисляются в порядке употребления). Они позволяют более точно описать семантику, предназначение тех или иных структурных единиц контента.

Наверное, нет смысла останавливаться на каждом из этих элементов подробно — статья у нас все-таки немного о другом, да и сказано о новых структурных элементах HTML5 уже предостаточно даже в русскоязычном сегменте Сети. Остановлюсь, пожалуй, лишь на двух важных моментах. Во-первых, мы по-прежнему используем «стерильный» элемент <div> для «обертки». Применять с такой целью, скажем, элемент <section> неправомерно — он не является семантически нейтральным, его смысловая нагрузка четко описана в спецификации. Об этом, если помните, у нас тоже была опубликована заметка летом. Во-вторых, мы избегаем использовать в CSS-коде селекторы по типу элементов (то бишь «по тегу»), задавая вместо этого стили элементам с определенными классами и идентификаторами. Это позволяет минимизировать трудозатраты в том случае, например, если на каких-то страницах нам покажется более уместным с точки зрения семантики использовать, допустим, <section> вместо <article>, не трогая при этом визуальное оформление. Для решения такой задачи нам потребуется модифицировать лишь код разметки, не внося никаких изменений в CSS-код. На этом пути, впрочем, можно зайти слишком далеко, отказавшись от использования селекторов по типу даже в отношении таких базовых элементов, как <h1> или <p>, и автору знакомы персонажи, которые всегда так и поступают. Посоветовать можно лишь одно — не сто́ит ни в какой момент времени забывать о здравом смысле. Для каких-то задач и такой подход может оказаться уместным, но на роль универсальной религии и вселенского абсолюта он явно не претендует.

Сброс стилей по умолчанию, подключение шрифтов, декоративные эффекты с CSS3

Оставим, наконец, разметку и перейдем к обсуждению CSS-кода. Для начала пробежимся по некоторым конструкциям, не связанным с аппаратно-зависимыми стилями.

Основной CSS-файл примера начинается со строк, подключающих правила, описанные во внешних файлах reset.css и fonts.css:

/* Global rules: reset */
@import url('reset.css');

/* Global rules: fonts */
@import url('fonts.css');

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

Правила, определенные в файле reset.css, более деликатно, чем практикуемый некоторыми разработчиками «ластик» с использованием универсального селектора — «звездочки» (* {margin: 0; …}), сбрасывают стили, применяющиеся в браузерах по умолчанию для ряда HTML-элементов. Кроме того, код файла reset.css содержит правило, предписывающее отображать некоторые новые структурные элементы HTML5 как блочные. Оно актуально для устаревших версий браузеров, не имеющих правильного представления о том, как нужно обрабатывать нововведения HTML5.

В файле fonts.css при помощи нескольких конструкций @font-face (эта конструкция описывается в спецификации модуля CSS3 Fonts) определяется порядок действий браузера в отношении элементов, для которых связанные с ними CSS-правила предписывают применение тех или иных шрифтовых гарнитур. В случае, если требующаяся гарнитура не установлена в системе у пользователя — она может быть задействована при помощи подключения внешнего шрифтового файла в том или ином формате, с которым умеет работать данный конкретный браузер (EOT, WOFF, TrueType или SVG).

Наш пример использует гарнитуры PT Sans (рубленый шрифт, имеющий заметные черты современных гуманистических гротесков), PT Serif (переходная антиква с гуманистической отделкой) и PT Mono (моноширинный шрифт для разных служебных блоков текста наподобие фрагментов кода). Эти гарнитуры универсального назначения разработаны компанией ParaType в рамках поддерживаемого государством проекта по созданию общенациональных бесплатных шрифтов, распространяемых на основе открытой пользовательской лицензии.

Веб-разработчикам необязательно включать файлы шрифтов в состав своих проектов — вместо этого можно использовать сервис Google Web Fonts. Свободно распространяемые веб-шрифты в последние годы буквально преобразили западный сегмент Сети — посмотрите хотя бы примеры из галерей, упоминавшихся в самом начале нашей статьи. Дизайнерам доступны сотни и тысячи качественных гарнитур, но… только на базе латиницы. К сожалению, свободных кириллических шрифтов надлежащего качества исчезающе мало. Скажем, тот самый сервис Google Web Fonts на момент написания этой статьи предлагал выбор всего из 28 альтернатив. Негусто, прямо скажем. (Существует, конечно же, весьма заметное количество высококачественных кириллических гарнитур, распространяемых на коммерческой основе. Вероятно, какие-то из них можно использовать и на веб-сайтах теми или иными способами, оговариваемыми в лицензионных соглашениях. Но это все, увы, уже бесконечно далеко от свободного духа принципов, лежащих в основе идеологии открытых веб-стандартов.)

Код основного CSS-файла нашего примера довольно прост и понятен. В целом он почти не выходит за рамки CSS2.1, если не считать применения медиавыражений (о них позже) и ограниченного набора свойств и значений, определяемых в спецификациях таких модулей CSS3, как Backgrounds and Borders (свойства border-radius и box-shadow, описывающие соответственно скругления уголков и тени у блоков), Text (свойство text-shadow, реализующее тени у текстовых надписей) и Image Values (значения linear-gradient(…) и radial-gradient(…), позволяющие создавать соответственно линейные и радиальные градиенты). Свойства border-radius, box-shadow и text-shadow в нашем примере применяются уже без префиксов — свежие версии браузеров их прекрасно понимают. Image-значения пока что еще приходится дублировать в нотациях с использованием префиксов. Подробнее о браузерных префиксах рассказывается, в частности, в русскоязычном переводе статьи «Префикс или постхак» за авторством уже упоминавшегося сегодня Эрика Мейера.

Экранная версия «по умолчанию», печатная версия

Начинаем, наконец, обсуждать применение аппаратно-зависимых стилей. В силу распространенности устаревших браузеров, не поддерживающих Media Queries, необходимо в любом случае описать экранную и печатную версии представления контента, выразимся так, «по умолчанию».

В современных версиях браузеров уточняющие правила, основанные на использовании медиавыражений, будут использовать ранее определенные правила из блока «по умолчанию» в качестве основы, отправной точки. Переопределять заново, «с чистого листа», вообще все, что в них описано, по-видимому, не имеет особого смысла. Да, возможно, некоторые свойства будут претерпевать весьма существенные изменения в зависимости от характеристик среды одного и того же типа, но все же это окажутся в основном частные изменения, не носящие глобального характера.

В устаревших браузерах уточняющие правила работать не будут вовсе — стили «по умолчанию» станут одинаково применяться на всех устройствах заданного типа вне зависимости от их частных характеристик.

В то же самое время, описания стилевых правил, относящихся к разным типам сред и устройств (тут имеется в виду, главным образом, противопоставление экранной и печатной версий представления контента) получается выгоднее делать максимально независимыми — слишком уж много между ними принципиальных различий.

Все сказанное иллюстрируют избранные фрагменты кода нашего файла all.css:

/* Global rules for all media types by default (including old browsers) */
@media all {

	strong {
		font-weight: bold;
		}
	em {
		font-style: italic;
		}

	}

/* Rules for the 'screen' and the 'handheld' media types by default (including old browsers) */
@media screen, handheld {

	body {

		font-family: 'PT Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
		font-size: 16px;

		}

	a, a:link {
		color: #009;
		text-decoration: underline;
		}
	a:visited {
		color: #969;
		}

	#page-wrapper {
		width: 90%;
		min-width: 880px;
		max-width: 1400px;

		}

	}

/* Rules for the 'print' media type by default (including old browsers) */
@media print {

	body {

		font-family: 'PT Serif', Georgia, 'Times New Roman', Times, serif;
		font-size: 12pt;

		}

	a, a:link, a:visited {
		color: #000;
		text-decoration: underline;
		}

	#menu-wrapper {
		display: none;
		}

	}

На какие важные моменты тут сто́ит обратить внимание?

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

В отличие от подобных персонажей, лично я не вижу ничего плохого в том, чтобы определить некоторые глобальные правила для всех возможных типов сред и устройств, значений медиахарактеристик, функциональных областей веб-страницы и всего прочего. Ну, например, предписать элементу <strong> всегда и везде принимать полужирное начертание, а элементу <em> — курсивное (смотрите строки 02—11 вышеприведенного фрагмента кода). Собственно, браузеры ведь так и поступают, но мы ведь сбросили браузерные умолчания нашим волшебным reset.css.

Строки 14—38 рассматриваемого фрагмента кода относятся к описанию экранной (включая экраны мобильных устройств) версии представления контента «по умолчанию». В частности, в этом блоке полностью описывается раскладка (layout) для «среднего случая». В строках 41—59 цитируются некоторые конструкции, описывающие печатную версию представления контента. Обсуждаемые два блока CSS-кода («экранный» и «печатный») максимально независимы друг от друга. Тут как раз тот случай, когда менее накладно с точки зрения трудозатрат по дальнейшему сопровождению кода описать все характерные особенности, присущие экранной и печатной версиям, каждый раз почти «с нуля», даже если какие-то правила будут повторяться. Иногда «экранные» и «печатные» правила разносят вообще по разным CSS-файлам.

Наверное, сто́ит заикнуться, что по-хорошему, конечно, использованное нами объединение правил для устройств типов screen и handheld является не вполне правильным шагом. Дело в том, что в природе могут существовать какие-нибудь видавшие виды карманные компьютеры или коммуникаторы с древними мобильными браузерами, отродясь не слыхавшими ничего про CSS3 Media Queries. Их пользователям, очевидно, придется биться с нашей отправной экранной версией «по умолчанию», оптимизированной скорее для настольных или уж во всяком случае переносных, но никак не для мобильных устройств с их крошечными экранчиками. Решение проблемы — отдельное описание представления «по умолчанию» для устройств типа handheld, аналогичное по принципу организации тому, что реализовано у нас для типа среды print. Для простоты я не стал утяжелять код нашего учебного примера соответствующими конструкциями CSS, но обозначить сей тонкий момент хотя бы на словах вовсе даже не помешает.

Из приведенного выше фрагмента кода можно видеть, что в экранной версии нашего примера предполагается использование для основного содержания в приоритетном порядке рубленого шрифта PT Sans, и его базовый размер при этом задается в пикселях (16px), тогда как предпочтительная гарнитура для основного контента в печатной версии — антиква PT Serif, базовый кегль которой задается в типографских пунктах (12pt). В экранной и печатной версиях представления по-разному форматируются гиперссылки (в частности, в экранной различаются просмотренные и непросмотренные). CSS-правила печатной версии предписывают не отображать навигационный блок с идентификатором menu-wrapper, неактуальный в данном контексте.

Кстати говоря, все остальные размеры шрифтов (кроме базового, то есть определяемого на уровне элемента <body>) в нашем примере задаются в относительных единицах (em). Такой подход может быть раскритикован в пух и прах некоторыми фанатиками верстки независимыми блоками, но, на мой скромный взгляд, ведь вполне логично, когда размеры шрифтов в пределах веб-страницы, являющей собой целостную композицию, взаимосвязаны. Специфицировать кегль шрифта в абсолютных единицах измерения для каждого блока, конечно, можно и, вероятно, порой даже нужно, но такая тактика больше подходит для крупных проектов, сопровождаемых многочисленными коллективами разработчиков в условиях, когда в огромной команде, образно говоря, «правая рука не знает, что делает левая нога». В общем, еще раз: нужно всякий раз выбирать методы решения, адекватные специфике решаемых задач! Кажется, ведь банальнейшая истина, но почему-то для многих оказывающаяся неочевидной…

Responsive Design с использованием Media Queries

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

Процитируем некоторые фрагменты CSS-кода нашего практического примера, связанные с использованием Media Queries.

/* Bonus Track. Media Queries */

/* Rules for extra wide screens - 1280 pixels and more */
@media
	only screen
		and (min-width: 1280px) {

	body {
		font-size: 20px;
		}

	}

/* Rules for 801-1024 pixels wide screens */
@media
	only screen
		and (min-width: 801px)
		and (max-width: 1024px),
	only handheld
		and (min-width: 801px)
		and (max-width: 1024px) {

	#page-wrapper {
		min-width: 0;
		}

	}

/* Rules for narrow screens - less than 800 pixels */
@media
	only screen
		and (max-width: 800px),
	only handheld
		and (max-width: 800px) {

	body {
		font-size: 12px;
		}

	#page-wrapper {
		min-width: 0;

		}

	}

Общее замечание. Во всех медиавыражениях нашего примера используется ключевое слово only, предваряющее обозначение каждого типа среды, во избежание возможных попыток обрабатывать соответствующие CSS-правила устаревшими браузерами, не поддерживающими Media Queries, в ситуациях, когда делать этого ну совсем-совсем не следует.

Первый блок правил в вышеприведенном фрагменте кода (cтроки 04—12) относится к самым большим экранам, к ситуациям, когда ширина области просмотра составляет 1280 и более пикселей. Поскольку это вряд ли будут устройства типа handheld, в медиавыражении упоминается лишь тип среды screen. В данном случае никаких существенных изменений не происходит — устанавливается лишь более крупный базовый кегль шрифта (20 пикселей вместо 16 «по умолчанию»). В остальном применяются общие настройки.

Общие, отправные настройки «по умолчанию» совсем без каких бы то ни было уточнений применяются на устройствах типов screen и handheld при ширине области просмотра от 1025 до 1279 пикселей. Для этого диапазона ширин в нашем примере вообще не предусматривается каких-либо медиавыражений.

Ситуация в корне меняется при дальнейшем сужении области просмотра. В диапазоне от 801 до 1024 пикселей применяются CSS-правила, фигурирующие в строках 15—27 вышеприведенного фрагмента кода. Существенно преображается раскладка: отменяется ограничение min-width: 880px;, заданное в правилах «по умолчанию», верстка из трехколоночной становится двухколоночной за счет того, что врезка (представленная в разметке элементом <aside> с идентификатором incut) перестает быть правой боковой колонкой и смещается вниз с несколько другим визуальным оформлением.

Наконец, при еще большем сужении области просмотра (до 800 пикселей и еще менее; в вышеприведенном фрагменте кода такому случаю соответствуют строки 30—45) раскладка меняется еще более радикально. Весь контент выстраивается в одну последовательную вертикальную колонку. Базовый размер шрифта уменьшается с 16 до 12 пикселей. Уменьшаются поля, отступы, радиусы скруглений и прочее. В результате страницу становится комфортно (насколько это слово вообще подходит к подобной ситуации) просматривать на маленьких экранах шириной вплоть до примерно 200 пикселей — без необходимости горизонтальной прокрутки.

Все это можно потестировать в десктопном браузере, изменяя размер его окна. Приведем напоследок некоторые характерные скриншоты. Вот так изменяется внешний облик страницы в окошке браузера Mozilla Firefox свежей версии (размеры области просмотра — соответственно 1280×800, 1024×768, 800×600 и 480×640 пикселей без учета ширины линейки вертикальной прокрутки):

Firefox, 1280×800
Firefox, 1024×768
Firefox, 800×600
Firefox, 480×640

Все приведенные выше картинки имеют один и тот же масштаб, вдвое меньше реального. А вот как выглядит наша веб-страница в режиме предварительного просмотра перед печатью в том же Firefox:

Firefox, предварительный просмотр

Наконец, вот такой облик принимает наш пример в IE8. Никаких градиентов, теней, скругленных уголков и уж тем более «интеллектуальной» подстройки верстки под ширину окна, но, тем не менее, и никакого безобразия — все вполне прилично выглядит и без проблем читается:

IE8, 1024×768, graceful degradation

Последний скриншот сделан при размерах области просмотра (за вычетом ширины линейки вертикальной прокрутки, которая, согласно букве спецификаций, включается в ширину viewport) 1024×768 пикселей. Предполагается, что IE8 в большей степени распространен на устройствах с экранами как раз примерно таких размеров — речь идет в первую очередь о недорогих нетбуках под управлением Windows XP. В этой уже устаревшей морально операционной системе нельзя обновиться до более свежего IE9, а на более мощных ноутбуках и настольных компьютерах все чаще устанавливают Windows 7.

Продолжение следует.