Оглавление

Добавление на сайт альтернативных таблиц стилей

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

 

Решение
Укажите в коде документа ссылку на альтернативную таблицу стилей, присвоив атрибут rel=”alternate stylesheet” элементу link и задайте содержащему ее файлу имя, которое будет отображено в меню браузера. Оно должно быть описательным (например, high contrast – «высокая контрастность»), чтобы пользователю было легче сделать выбор. Кроме того, основной таблице стилей также нужно задать имя, чтобы ее можно было отличить от альтернативной:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Альтернативная таблица стилей</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" title="Default" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="alternate stylesheet" type="text/css" href="highcontrast.css" 
			title="High Contrast" />

</head>
<body>
<div id="banner"></div>
<div id="content">
  <h1>Что такое XOOPS?</h1>
  <p>XOOPS - это динамический OO (Объектно-Ориентированный) основанный 
  на открытом исходном коде скрипт портала, написанный на PHP. XOOPS 
  поддерживает различные базы данных, XOOPS - это идеальный инструмент 
  для создания небольших высоко-динамичных сообществ вэб-сайтов, 
  внутренних порталов компании, корпоративных порталов, 
  web-публикаторов и многого другого.</p>
  <h2>Технические требования:</h2>
  <ul>
    <li>WWW сервер (Apache, IIS, Roxen, etc)</li>
    <li>PHP 5.2 или выше</li>
    <li>База данных MySQL 5.0 (или выше)</li>
  </ul>
  <a href="#">Скачать XOOPS</a>

</div>
<div id="navigation">
  <ul id="mainnav">
    <li><a href="#">Скачать XOOPS</a></li>
    <li><a href="#">Скачать модули</a></li>
    <li><a href="#">Скачать темы</a></li>
    <li><a href="#">Описание</a></li>
  </ul>
</div>
</body>
</html>

 

highcontrast.css

body, html {
	margin: 0;
	padding: 0;
	background-color: #000000;
	color: #FFFFFF;
}
#navigation {
	width: 160px;
	font: 90% Arial, Helvetica, sans-serif;
	position: absolute;
	top: 42px;
	left: 0;
}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#navigation li {
	border-bottom: 1px solid #ED9F9F;
	margin: 0;
}
#navigation li a:link, #navigation li a:visited {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 12px solid #711515;
	border-right: 1px solid #711515;
	color: #FFFFFF;
	background-color: #b51032;
	text-decoration: none;
}
#navigation li a:hover {
	color: #FFFFFF;
	background-color: #711515;
}
#content {
	margin-left: 180px;
	margin-right: 5px;
}
#banner {
	height: 40px;
	background-color: #711515;
	border-bottom: 1px solid #ED9F9F;
	text-align: right;
	padding-right: 20px;
	margin-top: 0;
}
#banner ul {
	margin: 0;
	padding: 0;
}
#banner li {
	display: inline;
}
#banner a:link, #banner a:visited {
	font: 80% Arial, Helvetica, sans-serif; 
	color: #FFFFFF;
	background-color: transparent;
}
#content p, #content li {
	font: 80%/1.6em Arial, Helvetica, sans-serif;
}
#content p {
	margin-left: 1.5em;
}
#content h1, #content h2 {
	font: 140% Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
	background-color: transparent;
}
#content h2 {
	font: 120% Georgia, "Times New Roman", Times, serif;
	padding-bottom: 3px;
	border-bottom: 1px dotted #CCCCCC;
}


На рис. 8.6 показан вид страницы при выборе пользователем альтернативной таблицы стилей из меню View браузера Firefox.

 

Вид страницы при переключении к таблице стилей High Contrast в Firefox

Рис. 8.6. Вид страницы при переключении к таблице стилей High Contrast в Firefox (DEMO)

 

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

 

 

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