Следующим этапом после написания таблицы стилей для крупной печати является создание масштабируемого макета страницы. Данная концепция получила широкое распространение благодаря Джо Кларку (Joe Clark); она состоит в изменении структуры страницы путем расположения всех ее элементов в одну колонку с помощью CSS и использовании контрастных цветов.1 Это особенно важно для пользователей, использующих функцию увеличения масштаба страницы в современных браузерах (поскольку при этом крупнее становится не только текст, но и все остальные элементы страницы) или пользующихся специальными программами, подобными экранной лупе, для облегчения зрительного восприятия текста. При увеличении масштаба страницы таким
способом боковые панели смещаются за пределы поля зрения, в результате чего на странице остается только основной контент.

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

Рис. 8.7. Вид страницы с применением таблицы стилей для zoom layout (DEMO)

body, html {
  margin: 1em 2em 2em 2em;
  padding: 0;
  font-size: 140%;
  background-color: #333;
  color: #FFFFFF;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

#navigation li {
  float:left;
  width: 20%;
}

#navigation li a:link, #navigation li a:visited {
  color: #FFFF00;
}

#navigation li a:hover {
  text-decoration:none;
}

#content {
  padding: 1em 0 0 0;
  clear:left;
}

#content p, #content li {
  line-height: 1.6em;
}

#content h1, #content h2 {
  font: 140% Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
  background-color: transparent;
}

#content h2 {
  font: 120% Georgia, "Times New Roman", Times, serif;
}