JavaScript переключатель между файлами CSS

Здравствуйте дорогие читатели! Сегодня я решил рассказать о JаvaScript переключателе между файлами CSS. Где это может пригодится? Ну, предположим, в данный момент Ваш сайт сделан в одном цветовом тоне, например в синем, как данный блог. Посетителям Вашего сайта, к примеру, не нравится данный цветовой тон. Значит необходимо добавить несколько других цветовых схем, между которыми пользователь Вашего сайта сможет переключаться с помощью специальных кнопочек или ссылок.
Делается всё это с помощью дополнительных файлов стилей и JаvaScript файла, который необходим для переключения между таблицами стилей. Под цветовой схемой в данном посте можно также понимать отдельный CSS файл, Вы это поймёте немного позже.

В некоторых браузерах, например Mozilla FireFox, цветовую схему(альтернативный CSS файл), если она(он) есть, можно выбрать в настройках. К примеру, в FireFox Вид -> Стиль страницы. А вот в некоторых браузерах такой функции нет, например в InternetExplorer, поэтому и приходится использовать JаvaScript.

Весь процесс создания дополнительных цветовых схем, альтернативных таблиц стилей, я решил разделить на 2 шага.

Шаг 1. Создание альтернативных CSS файлов.

Для начала работы с CSS приведу немного теории. Как известно, файлы стилей подключаются к HTML документу с помощью тега <link>, который поддерживает следующие параметры:

1. href - Путь к связываемому файлу.
2. media - Определяет устройство, для которого следует применять стилевое оформление.
3. type - MIME-тип данных подключаемого файла.
4. rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

Нам сейчас необходимо более подробно изучить параметр rel, остальные параметры нас не интерисуют. Параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ. Существует 3 вида взаимоотношений таблицы стилей с HTML документом:

1. Фиксированный (persistent) - в этом случае таблица стилей всегда связана с документом и ее стили всегда включены и комбинируются со стилями активной таблицы. Чтобы сделать таблицу стилей фиксированой, нужно в атрибуте rel указать свойство stylesheet и не указывать атрибут title.
Например:

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

2. Предпочтительный (preferred) - случай, когда таблица стилей загружается по умолчанию и не является обязательной. Пользователь может отключить её воспользовавшись альтернативной таблицей стилей. Чтобы сделать CSS таблицу стилей предпочтительной необходимо в атрибуте rel указать свойство stylesheet, а также указать атрибут title - уникальный заголовок. Например:

<link rel="stylesheet" type="text/css" href="css/style.css" title=”default” />

Можно сгрупировать несколько предпочтительных таблиц стилей, у каждой из которых будет свой заголовок, они будут “включаться” и “выключаться” одновременно. Если в HTML документе объявленно несколько групп предпочтительных таблиц стилей, то первая из них будет иметь превосходство над остальными.

3. Альтернативный (alternate) - вид взаимоотношений таблицы стилей с HTML документом, при котором таблица стилей может быть выбрана пользователем, как альтернативный вариант предпочтительной таблице. С ее помощью посетитель может настроить сайт под себя, выбрав подходящую для него цветовую схему, шрифт и т.д.
Чтобы сделать таблицу стилей предпочтительной, нужно в атрибуте rel указать свойство alternate stylesheet и указывать уникальный заголовок в атрибуте title. Например:

<link rel="alternate stylesheet" type="text/css" href="css/green.css" title=”green” />

Из всего выше прочитанного можно догадаться что помимо основной таблицы стилей, понадобится ещё и альтернативная, которая будет “включаться” по желанию пользователя.

Чтобы создать альтернативную таблицу стилей, нужно сделать копию основной таблицы стилей, и изменить имя копии на, к примеру, green.css. Из названия файла будет понятно что с помощью данной таблицы стилей можно будет "включить" на сайте зелёную цветовую схему.

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

Например, в файле основной таблицы стилей, которая является фиксированной, для тега body прописаны следующие правила:

body{
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight:bold;
    background:#0066FF;
}

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

body{
    background:#009900;
}

Все остальные параметры(отступы, размер шрифта и т.д.) автоматически будут учитываться из основной таблицы стилей, но, обратите внимание, это только в том случае, если основная таблица стилей фиксированая. Если же основная таблица стилей у Вас является предпочтительной, то в альтернативной таблице стилей необходимо будет указывать все параметры, пусть даже некоторые из них такие же как и в основной таблице стилей. Поэтому рекомендую использовать основную таблицу стилей фиксированной, чтобы в альтернативных таблицах стилей указывать меньше параметров, тем самым cэкономить размер CSS файлов.

После создания альтернативных таблиц стилей, их нужно правильно прикрепить к HTML документу. Сначала прикрепляем основную таблицу стилей, которая должна быть фиксированой. Между тегами <head></head> вставляем:

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

Где css - папка, в которой лежат все CSS файлы.
Далее необходимо прикрепить дополнительные таблицы стилей. После предыдущей записи вставляем:

<link rel="alternate stylesheet" type="text/css" href="css/green.css" title=”green” />
<link rel="alternate stylesheet" type="text/css" href="css/black.css" title=”black” />

Где green.css и black.css являются дополнительными таблицами стилей. Из названия файлов видно, что это будут зелёная и чёрная цветовые схемы.
После того как альтернативные таблицы стилей готовы и прикреплены к странице, в некоторых браузерах, например в FireFox, уже можно "включать" дополнительные таблицы стилей в настройках. А чтобы сделать поддержку всех браузеров, на страницу нужно добавить дополнительные кнопочки или ссылки, необходимые для переключения между таблицами стилей(цветовыми схемами), а также помощь JаvaScript.

Шаг 2. Создание JS файла для переключения между таблицами стилей.

В любом текстовом редакторе создайте js файл с именем styleswitcher.js, и со следующим содержимым:

function setActiveStyleSheet(title) {  
    var i, a, main;  
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {    
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) 
        {      
            a.disabled = true;      
            if(a.getAttribute("title") == title) a.disabled = false;   
        }  
    }
}
 
function getActiveStyleSheet(){
    var i, a;  
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    {    
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) 
        return a.getAttribute("title");  
    } 
    return null;
}

function getPreferredStyleSheet() 
{  
    var i, a;  
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    {    
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) 
        return a.getAttribute("title");  
    }  
    return null;
}

function createCookie(name,value,days) 
{  
    if (days) 
    {    
    var date = new Date();    
    date.setTime(date.getTime()+(days*24*60*60*1000));    
    var expires = "; expires="+date.toGMTString();  
    }  
    else expires = "";  
    document.cookie = name+"="+value+expires+"; path=/";}

function readCookie(name) 
{  
    var nameEQ = name + "=";  
    var ca = document.cookie.split(';');  
    for(var i=0;i < ca.length;i++) 
    {    
        var c = ca[i];    
        while (c.charAt(0)==' ') c = c.substring(1,c.length);    
        if (c.indexOf(nameEQ) == 0) 
        return c.substring(nameEQ.length,c.length);  
    }  
    return null;
}

window.onload = function(e) {  
var cookie = readCookie("style");  
var title = cookie ? cookie : getPreferredStyleSheet();  
setActiveStyleSheet(title);
}
window.onunload = function(e) {  
var title = getActiveStyleSheet();  
createCookie("style", title, 365);
}
var cookie = readCookie("style"); 
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

В JаvaScript я не силён, поэтому весь код объяснить не смогу. Суть в том, что скрипт "включает" дополнительные таблицы стилей и записывает в cookies информацию о том, какая таблица стилей "включена", а при следующей загрузке страницы он проверяет cookies на наличие "включенной" таблицы стилей, и если такая имеется, то она становится активной.

После того как JS файл создан, его нужно прикрутить к HTML странице, к которой уже подключены дополнительные файлы каскадных таблиц стилей. Между <head></head>, а ещё лучше перед </body> необходимо вставить:

<script type="text/javascript" src="js/styleswitcher.js"></script>

Где js - это папка, в которой лежит недавно созданный файл styleswitcher.js.
Это ещё не всё, т.к. в HTML страницу, в нужное место, необходимо вставить блок с ссылками или кнопочками для переключения между таблицами стилей:

<h2 align="center">Выберите стиль для данной страницы</h2>
<p align="center">
        <a href="#" onclick="setActiveStyleSheet('style'); return false;">Стиль 1(по умолчанию)</a> 
        <a href="#" onclick="setActiveStyleSheet('green'); return false;">Стиль 2(зелёный)</a>
        <a href="#" onclick="setActiveStyleSheet('black'); return false;">Стиль 2(черный)</a>
</p>

В данном примере переключателями являются ссылки, до кнопочек я думаю сами как-нибудь додумаетесь, если HTML знаете.
JаvaScript, а именно функция setActiveStyleSheet('style'), запускается по нажатию на любую из ссылок, и "включает" нужную нам таблицу стилей(цветовую схему) и записывает информацию об этом в cookies. Функции setActiveStyleSheet('style') на вход подается параметр - имя альтернативной таблицы стилей, которую необходимо "включить". Обратите внимание, то имя, которое мы указывали в атрибуте title при подключении таблиц стилей.

Как многие из Вас наверное уже заметили, первая ссылка делает активной CSS файл, при подключении которого в атрибуте title указано имя style. Но у нас нигде такого не указано... что же происходит? Всё элементарно. Данная ссылка делает активной основную таблицу стилей. Функция setActiveStyleSheet('style') видит, что таблицы стилей с атрибутом title="style" нет, и "отключает" все дополнительные таблицы стилей, а основная таблица стилей то фиксированая, значит всегда "включена". То есть вместо style мы можем указать любое другое имя, которое не совпадает с именами существующих таблиц стилей.