Создание альтернативной таблицы стилей CSS — полезный способ удовлетворить множество различных потребностей ваших пользователей. Более того, интегрировать их на свою страницу так же просто, как добавить одно слово к уже знакомому тегу.
Предпочтительный, постоянный и альтернативный
Создание таблицы стилей может быть забавным упражнением в творчестве и дизайне. Что еще интереснее, когда вы создаете другую таблицу стилей для того же сайта и обнаруживаете, насколько легко создавать и изменять внешний вид вашей страницы. С помощью нескольких простых команд вы можете использовать эту гибкость в интересах своих посетителей.
Например, вы можете захотеть иметь особый вид вашего сайта в веб-браузере, но совершенно другой макет для пользователей iPhone, чтобы ваш контент был более удобочитаемым на маленьком экране. Иногда дизайнеры хотят, чтобы сайты выглядели по-разному в зависимости от страны, в которой просматривается сайт, или даже от времени суток или погоды. Вы можете просто захотеть использовать альтернативную таблицу стилей CSS, чтобы продемонстрировать свои дизайнерские таланты, например, тысячи версий веб-сайта CSS Zen Garden .
Если вы собираетесь добавить альтернативу к таблице стилей CSS, поставляемой с вашим сайтом, следует помнить три слова, как описано в удивительно информативном блоге о дизайне AListApart :
Постоянный: эти стили — это те, которые вам нужны на вашем сайте, несмотря ни на что. Это могут быть изображения логотипов, водяные знаки и информация об авторских правах или даже определенный шрифт, который вам нравится. Часто поля и другие элементы макета поддерживаются согласованными за счет добавления «постоянных» стилей. Код для «постоянной» таблицы стилей предельно прост: он используется по умолчанию для любой ссылки на таблицу стилей CSS:
<link rel="stylesheet"type="text/css" href="persistent.css" />
Preferred: предпочтительная таблица стилей — ваш лучший выбор, как следует из названия. Если какой-либо внешний фактор, такой как платформа, тип браузера или выбор зрителя, не изменяет CSS, это тот, который используется браузером.
Код для обозначения «предпочтительного» не совсем интуитивен. То же, что и обычно, с добавлением атрибута title:
<link rel="stylesheet"type="text/css" href="preferred.css"title="MyPrefSheet" />
Обратите внимание, что слово «предпочтительный» включено только в название листа — оно не является частью кода. Обозначая «отношение ссылки» как «таблицу стилей», это становится предпочтительным кодом, а присваивая ему «заголовок», вы позволяете браузеру отличить его от других вариантов таблицы стилей, которые вы собираетесь добавить.
Альтернативный: вы можете добавить столько альтернативных таблиц стилей, сколько захотите. Чтобы обозначить один, код немного меняется:
<link rel="альтернативная таблица стилей" type="text/css" href="alternate01.css"title="FirstAltSheet" />
На самом деле вам даже не нужно создавать их как совершенно отдельные листы. Любому конкретному стилю может быть присвоен один и тот же тег «заголовок», и в конечном итоге он будет сгруппирован вместе при изменении таблицы стилей. Единственная вещь, которая должна быть точной, — это «href», который может вести к файлу в том же каталоге (как показано в этих примерах), но на самом деле может ссылаться на любую другую таблицу стилей в любом месте в Интернете.
Выбор альтернативной таблицы стилей CSS
Если вы хотите, чтобы ваш зритель мог изменить таблицу стилей в любое время, все становится немного сложнее. Браузер должен проверить все ссылки на странице, чтобы увидеть, какие из них ссылаются на CSS, затем какой CSS отображается на странице в данный момент, и, наконец, позволить зрителю реализовать другой набор стилей и отобразить их. Иногда это включает в себя загрузку (или предварительную загрузку) большего количества изображений или контента и, как правило, требует достаточного количества javascript.
У A List Apart есть очень подробное бесплатное руководство по тому, как сделать эту работу. Вы также можете узнать много нового об использовании альтернативной таблицы стилей CSS на сайте World Wide Web Consortium . Этот сайт также содержит четырнадцать различных таблиц стилей. Используя эти ресурсы, вы сможете в кратчайшие сроки добавить возможность выбора стиля на свой сайт.