Переключатель стилей был создан Паулом Совденом в 2001 году, с тех пор тысячи дизайнеров использовали его в своих проектах. Используя скрипт Паула во многих проектах, я задумался над тем как улучшить переключение стилей, а после того как я обратился к своему другу Brothercake, мои идеи стали реальностью.

Переключатель стилей Паула Совдена

Фантастически простой в реализации он не лишен недостатков.

Ссылки, которые вызывают функцию переключения стилей, всегда представлены на сайте, но если JavaScript недоступен, они не нужны и только раздражают.

<a href="#" onclick="setActiveStyleSheet('default');
return false;">Switcher</a>

Требуется подключения нескольких файлов стилей с использованием элемента link и параметров stylesheet или alternate stylesheet поэтому необходимы дополнительные запросы к серверу, но что гораздо более важно, это не позволяет выбирать настройки для каждого типа устройств независимо от остальных.

Было бы замечательно получить такую же функциональность, без дополнительной разметки используя только один файл JavaScript и CSS. Еще лучше, если при этом мы сможем независимо задавать настройки для каждого типа устройств, и предоставим пользователям простой интерфейс позволяющий устанавливать индивидуальные настройки, которые потом сохранялись бы в cookie.

Предлагаемый мной переключатель стилей легко расширяется, может обрабатывать любое число стилей и типов устройств, использует только один JavaScript и CSS файл. Он функционирует с помощью добавления одного или нескольких уникальных классов к тегу body.

Придется отказаться от использования параметров stylesheet и alternate stylesheet, но это меня не расстраивает, потому что многие браузеры не поддерживают такое переключение стилей, а те, что поддерживают, не запоминают какой стиль необходимо использовать.

Создание нового переключателя стилей

Прежде чем мы начнем, взгляните на пример.

Предлагаю вам сразу загрузить файлы, чтобы вы могли отслеживать все действия, которые я буду описывать.

XHTML

Сначала добавим пустые контейнеры, которые будем использовать как переключатели, я использую для этого элемент div.

<div id="screen-switcher"></div>
<div id="print-switcher"></div>
<div id="projector-switcher"></div>

Элементы управления создаются в этих контейнерах, только если включен JavaScript, в противном случае они остаются пустыми и не мешают пользователям.

Скрипт

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

var screenSwitcher =
    new bodySwitcher(
        'screen-switcher',
        'Screen styles'
    );

Потом вы можете добавить любые классы и их названия, которые будет переключать этот элемент управления.

screenSwitcher.defineClass('default','Normal contrast');
screenSwitcher.defineClass('high','High contrast');

Добавляем переключатели для других типов устройств

Чтобы дать пользователям возможность выбирать стили для печати независимо от стилей используемых для отображения на экране, создадим переключатель стилей печати.

var printSwitcher =
    new bodySwitcher(
        'print-switcher',
        'Print styles'
    );
  
printSwitcher.defineClass(
    'default','Default'
);

printSwitcher.defineClass(
    'small-sans','Small sans'
);

printSwitcher.defineClass(
    'large-serif','Large serif'
);

Дополнительные медиа типы можно использовать для портативных устройств или проекторов.

var projectionSwitcher =
    new bodySwitcher(
        'projection-switcher',
        'Projection styles'
    );
    etc.

var handheldSwitcher =
    new bodySwitcher(
        'handheld-switcher',
        'Handheld styles'
    );
    etc.

Есть только одно ограничение имя класса должно быть уникальным независимо от типа устройства, для которого оно используется.

Стили

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

Стили для экрана

@media screen
{
    body {
        background : #fff;
        color : #666;
    }

    body.high {
        color : #000;
    }

    body.highvisibility {
        background : #000;
        color : #ff0;
    }
}

Стили для печати

@media print
{
    body {
        font: 100% "Lucida Sans Unicode",verdana,sans-serif;
    }

    body.small-sans {
        font: 80% "Lucida Sans Unicode",verdana,sans-serif;
    }

    body.large-serif {
        font: 120% "Times New Roman",times,serif;
    }
}

При необходимости могут быть добавлены стили для других типов устройств.

@media projection {
    etc.
}

@media handheld {
    etc.
}

Оформление переключателей

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

<form action="">
<fieldset>
<label for="select-screen-switcher">
<span>Screen styles</span>

<select id="select-screen-switcher">
<option value="default">Normal contrast</option>
<option value="high">High contrast</option>
<option value="highvisibility">High visibility</option>
</select>
</label>

</fieldset>
</form>

Итог

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

Он практически неограниченно расширяем, с его помощью вы можете предоставить пользователям возможность выбора шрифта, цвета или разметки страницы.

Предостережение

Представленный переключатель стилей не работает в Mac/IE5.

Translated with the permission of A List Apart Magazine and the author[s].

Похожие статьи