Приднестровская поддержка XOOPS
Некоторые современные браузеры дают пользователю возможность увидеть список привязанных к документу таблиц стилей и самостоятельно выбрать одну из них. Таким образом можно с легкостью добавить, например, таблицу стилей, инвертирующую цвета элементов страницы.
Решение
Укажите в коде документа ссылку на альтернативную таблицу стилей, присвоив атрибут 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.
Рис. 8.6. Вид страницы при переключении к таблице стилей High Contrast в Firefox (DEMO)
Обсуждение
Эта функция проста в использовании и значительно расширяет возможности пользователя, требуя минимальных затрат со стороны разработчика. Как правило, создание таблицы стилей, изменяющей цветовое оформление документа, занимает совсем немного времени. Для этого достаточно сохранить существующий файл со стилями под новым именем и поменять значения свойств, определяющих параметры шрифта, цвет и положение элементов.
К сожалению, поддержка данной функции во многих браузерах ограничена, а в Internet Explorer отсутствует вовсе. Однако пользователи, для которых данная возможность представляет интерес, могут выбрать для работы соответствующий браузер.
Отправитель | Нити |
---|
5 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |