Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Переключатель стилей на PHP


Информационный Канал Subscribe.Ru

Веб-журнал (блог) Григория Ситнина


Переключатель стилей на PHP

Этой статьёй я начинаю цикл переводов сайта A List Apart, одного из самых ярких, на мой взгляд, проектов посвященных сайтостроению.

Для удобного переключения таблиц стилей, A List Apart предлагает Switcher, JavaScript-программу, которая динамически меняет стили страницы. К сожалению, эта программа, при всей своей функциональности, требует, чтобы у пользователя были включены и куки (cookies) и JavaScript. С куками сделать можно немного, но переключение стилей можно возложить на сервер (с небольшой помощью PHP).

PHP является языком сценариев, доступным на многих, многих серверах. Он быстр, бесплатен, распространяется с исходными текстами и делает свою работу на сервере, поэтому мы можем не беспокоиться, включен ли JavaScript в браузере у пользователя. Если вы не знаете, установлен на ваш сервер PHP - просто спросите его!

Этап 1: Установка стилей

Для начала, создайте пустой файл на сервере, назвав его switcher.php и вставьте в него код, представленный ниже:

<?php
        setcookie('sitestyle', $set, time()+31536000, '/',
                 'yourdomain.com', '0');
        header("Location: $HTTP_REFERER");
?>

Кода этот сценарий будет запрошен, он запишет куку, в которой укажет стиль, используемый пользователем сайта. Время истечения куки устанавливается в один год, после чего сценарий отсылает пользователя обратно к странице, с которой он пришёл. Вс1 это происходит незаметно для пользователя, который видит только то, что страница обновилась. Не забудьте изменить строку "yourdomain.com" на название своего домена, иначе кука не будет работать для вашего сайта.

Указание сценарию switcher.php стиля, который следует установить чрезвычайно лёгкое дело. Вы можете запросить этот сценарий с помощью обычной ссылки в тексте, на изображении или даже из flash-ролика. Всё, что вам надо сделать для этого: указать необходимый стиль в get-параметре "set".

<a href="./switcher.php?set=red">нажмите сюда, чтобы переключиться
на стиль "RED"</a>

В приведённом выше коде "red" является именем стиля, который вы хотите использовать. Нет никакой необходимости указывать расширение .css здесь, мы разберёмся с этим позже.

Как альтернативу обычным ссылкам вы можете использовать html-формы. Например, попробуйте вот такое выпадающее меню:

<form action="switcher.php" method="get">
  <select name="set">
    <option value="default">По умолчанию</option>
    <option value="red">Безумный красный</option>
    <option value="experiment">Экспериментальный</option>
  </select>
  <input type="submit" value="Сменить стиль">
</form>

Этап 2: Распознавание стилей

Это здорово, что пользователь может выбрать стиль и запомнить его в Куке, но без распознавания этой куки всё, что сделано - бессмысленно. Таким образом, в каждую страницу вашего сайта, на которой вы хотите применить стиль, выбранный пользователем, нужно вставить следующий код в раздел :

<link rel="stylesheet" type="text/css"
  media="screen" title="User defined style"
  href="<?php echo (!$sitestyle) ? 'defaultstyle' : $sitestyle; ?>.css" />

Наверняка вы заметили, что это обычный элемент , который используется для подключение любых css-файлов, но есть очень одно очень важное различие. Там, где вы просто написали бы имя файла таблицы стилей, мы использовали конструкцию:

<?php echo (!$sitestyle) ? 'defaultstyle' : $sitestyle; ?>

Этот коротенький сценарий проверяет, какой стиль установлен пользователем в куках и печатает результат. Если куки в браузере отключены, или пользователь пока не выбрал ни один из стилей, он печатает "defaultstyle", чтобы вызвать css-таблицу по умолчанию.

Итак, у вас он есть. Кросс-браузерный, обратно совместимый, совместимый в будущем, созданный по стандартам переключатель стилей, состоящий всего из пяти строк кода. Он быстрый, прямой и универсально-доступный, потому что на стороне клиента нет никакой обработки.

Как настоящий Gecko-фил (любитель браузеров на ядре Gecko), вы также должны сослаться на альтернативные таблицы стилей в вашем элементе документа:

<link rel="alternate stylesheet"
  type="text/css" media="screen"
  title="Fire Engine Red" href="./redstyle.css" />
<link rel="alternate stylesheet"
  type="text/css" media="screen"
  title="Grape" href="./purple.css" />
<link rel="alternate stylesheet"
  type="text/css" media="screen"
  title="Scary" href="./blackout.css" />

Хотя это и не обязательно, такое перечисление альтернативных стилевых таблиц позволяет пользователям Gecko-браузеров (Netscape 6+, Mozilla 1+) изменять таблицы стилей прямо из интерфейса браузера. Всё, что для этого надо -- зайти в меню "View > Use stylesheets" и выбрать стиль, который они хотят применить.

Это всё. Убирайся отсюда и будь стильным!

Автор: Крис Кларк
Перевод: Григорий Ситнин
Оригинал (на английском): http://www.alistapart.com/articles/phpswitch/

От переводчика

Хорошая статья, правильная. Однако, следует помнить, что код, показанный в ней будет работать только в том случае, если php-интерпретатор у вас самостоятельно создаёт переменные из данных, полученных в запросе. Также, в статье используются "длинные" массивы $HTTP_GET_VARS, которые по умолчанию в php последних версий, так же, как и предыдущая возможность, являются выключенными. Такие массивы следует заменить на массивы типа $_GET.

Также я столкнулся с тем, что, если у вас тестовый веб-сервер настроен на локальной машине так, что его URL является "доменом первого уровня" (например: http://mytest/), то кука может быть не установлена, даже, если вы передаёте имя домена правильно (во всяком случае, в Explorer 6).


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



RB1

http://subscribe.ru/
http://subscribe.ru/feedback/
Подписан адрес:
Код этой рассылки: comp.soft.prog.devbook
Отписаться

В избранное