В качестве первого шага создадим CSS-файл с основными стилями, в котором будут использоваться относительные размеры шрифтов в сочетании с размером шрифта, установленном на машине пользователя по-умолчанию. Для этого размеры мы будем задавать в процентах или в em-ах.
/* размер шрифта по-умолчанию */ @import url(small.css);
Теперь создадим пять альтернативных стилей, где используются определенные в спецификации CSS абсолютные размеры: "xx-small", "x-small", "small", "medium", и "large". В любом браузере коэффициент масштабирования между ними должен быть 1.2, как это рекомендует стандарт CSS2. Также следует учесть и обойти проблемы масштабирования в IE5 и Opera.
/* пример файла xx-small.css */ body, body div, body p, body th, body td, body li, body dd { font-size: xx-small; voice-family: "\"}\""; voice-family: inherit; font-size: x-small }
Получившиеся файлы можно посмотреть по данным ссылкам: xx-small.css, x-small.css, small.css, medium.css,large.css.
HTML
Теперь давайте создадим HTML-документ и подключим к нему основной и альтернативный CSS-файлы, присвоив альтернативным файлам имена "A--", "A-", "A", "A+" и "A++" в порядке возрастания.
JavaScript
Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи "Alternative Style: Working With Alternate Style Sheets".