Серверный динамический стилевой свитчер

Краткое содержание

Во время недавней дискуссии с Джимом Берном о Блоке Создания связей, мы задумались над полезностью скриптов, которые позволяют посетителям изменить свои предпочтения. Мы договорились про оговорки об их использовании по следующим причинам.

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

·       Большинство скриптов пишутся на JavaScript, и потому рассчитывается на то, что клиент имеет возможности создания скриптов.

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

·       Они, как правило, реализованы в качестве основных единиц, например, 9px или 12px, что фактически препятствует тем, которые знают, как использовать свои ПА, и, как правило, слишком ограничены в выборе, которые они предоставляют.

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

Содержание

·       О переключении стилей

·       Постоянные таблицы стилей

·       Предпочтительные таблицы стилей

·       Альтернативные таблицы стилей

·       Предложенная методика

·       Документ ASP

·       Документы CSS

·       Лимиты

О переключении стилей

Переключение стилей представляет собой механизм, предусмотренный современными браузерами, которые позволяют пользователю выбирать между таблицами стилей, предусмотренных автором. Браузеры, такие как браузеры, основанные на Gecko позволяют пользователю выбрать, какой стиль они хотят использовать в рамках системы меню. Internet Explorer, часто позиционируется как такой, который используется более 95% серферов, не обеспечивает механизм для переключения стилей. Поскольку не все браузеры поддерживают переключение стилей, некоторые разработчики контента обеспечивают собственный механизм для таблицы стилей, которые могут быть изменены. В идеальном мире, мы не должны прибегать к этим мерам. Так как мы, вероятно, застряли с текущей версией Internet Explorer как наиболее общим браузером, по крайней мере в ближайшие три года, мы можем повысить юзабилити, предоставляя механизм для наших посетителей, чтобы настроить их опыт.

Есть несколько опубликованных скриптов для работы с переключением стилей. Список Apart имеет два отличных скрипта, иллюстрирующих  переключением стилей в JavaScript, автор Пол Соуден, и переключение стилей в PHP, автор Крис Кларк. Мы решили включить идеи Джима в переключаемые таблицы стилей, для максимальной гибкости. Прежде, чем мы рассмотрим код, мы рассмотрим, как таблицы стилей связаны с документом, как стойкие, предпочтительные и альтернативные таблицы стилей.

[Вернуться к содержанию]

Постоянные таблицы стилей

Постоянная таблица стилей всегда включена. Если правила для документа содержатся в одной таблице стилей, то это и есть то, как вы будете ссылаться на таблицу стилей. Если документ имеет более одной таблицы стилей, связанной с ним, основные правила могут быть помещены в этой таблице стилей. Зависимость определяется значением атрибута rel"stylesheet", и предусмотрен атрибут notitle.

<link href="persistent.css" rel="stylesheet" type="text/css"/>

[Вернуться к содержанию]

Предпочтительные таблицы стилей

Предпочтительная таблица стилей включена по умолчанию, но может быть переключена пользователем для альтернативной таблицы стилей. Предпочтительные отношения задаются со значением атрибута rel, от "stylesheet", и атрибут title так же обеспечивается. Вы можете указать более предпочтительную таблицу стилей, указав тот же заголовок для каждой. Предпочтительные таблицы стилей будут сгруппированы, и включаться и отключаться вместе. Если более чем одна группа предпочтительных таблиц стилей указана, первая группа будет иметь приоритет над другими группами.

[Вернуться к содержанию]

Альтернативные таблицы стилей

Альтернативой таблицей стилей является та, которая может быть выбрана посетителем в качестве альтернативы предпочтительной таблицы стилей. Альтернативные отношения задаются со значением атрибута rel"alternate stylesheet", и также предоставляется атрибут title. Как предпочтительные таблицы стилей, альтернативные таблицы стилей могут быть сгруппированы, предоставляя им то же самое название.

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

<link href="persistent.css" rel="stylesheet" type="text/css"/>
<link href="preferred.css" rel="stylesheet" title="Olive" type="text/css"/>
<link href="alternate.css" rel="alternate stylesheet" title="Yellow" type="text/css"/>

 

Предложенная методика

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

В следующих разделах показано, как файлы организованы в целях осуществления этой техники.

[Вернуться к содержанию]

Документ ASP

В этом примере документ представлен в качестве документа ASP, но принципы могут быть применены относительно любого серверного скриптового языка, как показано в примере PHP Джима Берна.

Значения для цветового контраста и компоновки загружаются из двумерного массива. Это позволяет скрипту быть легко настроенным, поскольку требуемые значения нужно только изменить в самом массиве. Скрипт проверяет, была ли форма отправлена, и ставит какие-либо необходимые куки. Документ, связанный с тремя стилями таблиц, постоянными, предпочтительными и альтернативными. Предпочтительные и альтернативные расположены в соответствии со значениями куков. Если нет куков, таблицы стилей расположены в порядке по умолчанию. Это позволяет таблицам стилей быть переключаемыми с помощью формы, или через браузер, если браузер поддерживает переключение таблиц стилей.

Ниже приводится полный текст документа ASP.

<% @ language="vbscript" %>
<% Option Explicit %>
<% Response.Buffer=True %>
<%
    Dim arContrast(2, 1), arLayout(1, 1), iCounter
    Dim strTextSize, strColourContrast, strLayout
 
    ' Варианты нагрузки контраста в массив
    arContrast(0, 0) = "value=""default"""
    arContrast(0, 1) = "Default Contrast"
    arContrast(1, 0) = "value=""lowcontrast"""
    arContrast(1, 1) = "Low Contrast"
    arContrast(2, 0) = "value=""highcontrast"""
    arContrast(2, 1) = "High Contrast"
 
    ' Параметры макета нагрузки в массив
    arLayout(0, 0) = "value=""default"""
    arLayout(0, 1) = "Default Layout"
    arLayout(1, 0) = "value=""floatleft"""
    arLayout(1, 1) = "Left Navigation"
 
    ' Получение каких-либо значений, которые уже установлены
    strTextSize = Request.Cookies("style")("size")
    strColourContrast = Request.Cookies("style")("colour")
    strLayout = Request.Cookies("style")("layout")
 
    ' Проверьте, если какие-либо значения были обновлены
    If UCase(Request.ServerVariables("REQUEST_METHOD")) = "POST" Then
        strTextSize = validateRange(Request.Form("textsize"), 80, 250, "100")
        strColourContrast = Request.Form("colourcontrast")
        strLayout = Request.Form("layout")
 
        ' Хранилище куки
        Response.Cookies("style")("size") = strTextSize
        Response.Cookies("style")("colour") = strColourContrast
        Response.Cookies("style")("layout") = strLayout
        Response.Cookies("style").Expires = DateAdd("yyyy", 1, Now)
    End If
 
    ' Значения по умолчанию, если не установлены
    If strColourContrast = "" Then
        strColourContrast = "default"
    End If
 
    If strLayout = "" Then
        strLayout = "default"
    End If
 
    ' Подтвердите диапазон для размера текста,
    ' со значением по умолчанию 100
    strTextSize = ValidateRange(strTextSize, 80, 250, "100")
 
    ' Добавить выбранное в выбранный цветовой контраст
    addSelected arContrast, strColourContrast
    ' Добавить выбранное в выбранную планировку
    addSelected arLayout, strLayout
%>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Colour Switcher</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"/>
<link href="main.css" rel="stylesheet" type="text/css"/>
<% If strLayout = "default" Then %>
<link href="nofloat.asp" rel="stylesheet" title="Basic" type="text/css"/>
<link href="leftstyle.asp" rel="alternate stylesheet" title="Float Left" type="text/css"/>
<% Else %>
<link href="leftstyle.asp" rel="stylesheet" title="Float Left" type="text/css"/>
<link href="nofloat.asp" rel="alternate stylesheet" title="Basic" type="text/css"/>
<% End If %>
</head>
<body>
<div id="header">
<h1>Style Sheet Switcher</h1>
<p>
Если вы не видите изменения в стиле, после отправки формы, пожалуйста, обновите ваш браузер в виде того, что предыдущие значения были достигнуты.
</p>
<form action="<%= Request.ServerVariables("SCRIPT_NAME") %>" method="post">
<fieldset>
<legend>Customise This Page</legend>
<label for="textsize">
Text size (%):
<input id="textsize" type="text" name="textsize" value="<%= strTextSize %>"
                     size="4" maxlength="4" tabindex="1"/>
</label>
<label for="colourcontrast">Colour Contrast 
<select name="colourcontrast" id="colourcontrast" tabindex="2">
<optgroup label="Colour Contrast">
<% For iCounter = 0 To UBound(arContrast) %>
<option <%= arContrast(iCounter, 0) %>><%= arContrast(iCounter, 1) %></option>
<% Next %>
</optgroup>
</select>
</label>
<label for="layout">Layout 
<select name="layout" id="layout" tabindex="3">
<optgroup label="Layout">
<% For iCounter = 0 To UBound(arLayout) %>
<option <%= arLayout(iCounter, 0) %>><%= arLayout(iCounter, 1) %></option>
<% Next %>
</optgroup>
</select>
</label>
<input type="submit" value="Change" tabindex="4"/>
</fieldset>
</form>
</div>
<div id="menu">
<h2 id="contents">Contents</h2>
<p>
Содержание для меню здесь.
</p>
</div>
<div id="maincontent">
<h2 id="intro">Introduction</h2>
<p>
Эта страница служит в качестве примера переключателя таблицы стилей на основе 
<a href="http://www.mcu.org.uk/articles/styleswitcher.php">an 
идеи Джима Берна </a> of the 
<a href="http://www.mcu.org.uk/">Making Connections Unit</a>. 
</p>
</div>
</body>
</html>
 
<%
' Обычно, чтобы добавить выбранный атрибут 
' к конкретному пункту в списке
Private Sub addSelected(ByRef arList, ByVal strValue)
    Dim iCounter
 
    For iCounter = 0 To UBound(arList)
        If InStr(arList(iCounter, 0), strValue) Then
            arList(iCounter, 0) = arList(iCounter, 0) & " selected=""selected"""
        End If
    Next
End Sub
 
' Обычно проверить диапазон для числового поля
' хранящийся в виде строки
Private Function validateRange(ByVal strSource, ByVal iLower, _
                               ByVal iUpper, ByVal strDefault)
 
    If strSource = "" Or Not IsNumeric(strSource) Then
        strSource = strDefault
    ElseIf CInt(strSource) < iLower Then
        strSource = CStr(iLower)
    ElseIf CInt(strSource) > iUpper Then
        strSource = CStr(iUpper)
    End If
 
    validateRange = strSource
End Function
%>

Все страницы, которые включает таблица стилей в данном примере потребуют следующее в головной части HTML документа.

 
<%
    ' Расположите листы стилей в головной части
    Dim strLayout
 
    strLayout = Request.Cookies("style")("layout")
    If strLayout = "" Then
        strLayout = "default"
    End If
%>
<link href="main.css" rel="stylesheet" type="text/css"/>
<% If strLayout = "default" Then %>
<link href="nofloat.asp" rel="stylesheet" title="Basic" type="text/css"/>
<link href="leftstyle.asp" rel="alternate stylesheet" title="Float Left" type="text/css"/>
<% Else %>
<link href="leftstyle.asp" rel="stylesheet" title="Float Left" type="text/css"/>
<link href="nofloat.asp" rel="alternate stylesheet" title="Basic" type="text/css"/>
<% End If %>

[Вернуться к содержанию]

Документы CSS

Есть три внешние таблицы стилей, используемые в этом примере.

·       main.css - постоянная таблица стилей.

·       nofloat.asp - таблицы стилей, предпочтительные по умолчанию.

·       leftstyle.asp – альтернативная таблица стилей по умолчанию.

main.css

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

#header
{
    padding-bottom: 0.5em;
}
 
fieldset
{
    padding: 1em;
}

nofloat.asp

Файл nofloat.asp является предпочтительной таблицей стилей по умолчанию. Другими словами, если никаких куки не было установлено, или пользователь выбирает эту таблицу стилей, будет использоваться она. Так как она имеет расширение .asp file, файл будет обработан на сервере. Это прекрасно работает с Internet Explorer, и Opera, но браузеры, основанные на Gecko не будут использовать файл, так как не имеют типа correctMIME. Настройка MIME типа на text/css в начале документа позволяет решить эту проблему. Этот файл используется на стороне сервера включая привлечение значений, установленных через форму. Эта методика избавляет от необходимости писать одинаковый код в каждой внешней таблице стилей, что делает его легче в обслуживании.

<% Response.ContentType = "text/css" %>
<!-- #include file="basicstyle.asp" -->
#maincontent
{
    padding: 0.5em;
}
 
#menu
{
    padding: 0.5em;
    border: #ccc 1px solid;
}

leftstyle.asp

Файл leftstyle.asp это по умолчанию альтернативная таблица стилей. Другими словами, если никаких куки не было установлено, этот стиль может быть выбран через браузеры, которые поддерживают переключение стилей таблицы, или с помощью формы. Как и в случае nofloat.asp этот файл требует тип MIME, который нужно установить, и использовать на стороне сервера включая привлечение значений, установленных в форме.

<% Response.ContentType = "text/css" %>
<!-- #include file="basicstyle.asp" -->
#maincontent
{
    margin-left: 20%;
    padding: 0.5em;
    border-left: #ccc 1px solid;
}
 
#menu
{
    float: left;
    width: 17%;
    padding: 0.5em;
}

basicstyle.asp

Файл basicstyle.asp является файлом, включенным в две альтернативные таблицы стилей выше. Его задача заключается в создании ценности в соответствии со значениями, которые были установлены через куки в таблицах стилей. Если никакие значения не были установлены, то вместо этого используются значения по умолчанию. Этот файл не требует типа содержимого, так как тип содержимого устанавливается в файлах, которые включают его.

<%
    Dim strTextSize, strColourContrast
 
    ' Get any values that are already set
    strTextSize = Request.Cookies("style")("size")
    strColourContrast = Request.Cookies("style")("colour")
 
    ' Give default values for values if not provided
    If strColourContrast = "" Then
        strColourContrast = "default"
    End If
 
    If strTextSize = "" Then
        strTextSize = "100"
    End If
%>
 
html, body
{
    font-size: <%= strTextSize %>%;
 
<%
Select Case strColourContrast
    Case "lowcontrast"
        Response.Write "color: #ccc;" & vbCrLf
        Response.Write "background-color: #fff;" & vbCrLf
    Case "highcontrast"
        Response.Write "color: #fff;" & vbCrLf
        Response.Write "background-color: #000;" & vbCrLf
    Case Else
        Response.Write "color: #000;" & vbCrLf
        Response.Write "background-color: #fff;" & vbCrLf
End Select
%>
}
 
a
{
<%
Select Case strColourContrast
    Case "lowcontrast"
        Response.Write "color: #99c;" & vbCrLf
    Case "highcontrast"
        Response.Write "color: #fc0;" & vbCrLf
    Case Else
        Response.Write "color: #00c;" & vbCrLf
End Select
%>
    background: transparent;
}

[Вернуться к содержанию]

Ограничения

Основным преимуществом включения CSS из внешней таблицы стилей является то, что таблица стилей будет храниться в кэше. Это позволяет сэкономить на времени загрузки с сервера, сохраняя HTML документы легче. К сожалению, кэширование может также означать, что значения не обновляются немедленно. Вы можете настроить страницы CSS, так что они не кэшируются, но это побеждает главную цель организации файлов таким образом. Мягкое напоминание обновить страницу сделав изменения помогает посетителю понять, что случилось.

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

Оригинал статьи находится здесь