Xpoint
   [напомнить пароль]

XML и CSS

Хотя XML-документы в "чистом" виде, как правило, не предназначены для просмотра человеком (по крайней мере, обычным пользователем), тем не менее, существует возможность оформлять XML-документы, используя обычные таблицы стилей CSS. Эта возможность поддерживается большинством современных браузеров (IE5+, Gecko-браузеры, Opera) и может использоваться как дополнительный элемент оформления.

Пример

Подключим к RSS-фиду небольшой файл CSS

news.rss

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet type="text/css" href="/styles/rss.css"?>
<rss version="2.0">
<channel>
  <title>Последние новости Xpoint</title>
  <link>http://xpoint.ru/news/</link>
  <description>Анонс последних новостей ИТ тематики на сервере Xpoint</description>
  <generator>POEM(tm)</generator>
  <ttl>1440</ttl>
  ...
  <item>
    <title>Вышел Firefox 1.5</title>
    <description>Спустя год после выпуска Firefox 1.0 наконец-то вышел Mozilla Firefox 1.5. ....</description>
    <link>http://xpoint.ru/news/194.xhtml</link>
    <pubDate>Wed, 30 Nov 2005 03:02:00 GMT</pubDate>
  </item>
  <item>
    <title>Google начинает кампанию по продвижению Firefox</title>
    <description>В рамках своей системы Google AdSense компания Google теперь платит владельцам страниц, если они указывают своим посетителям на полезные программы и сервисы. ...</description>
    <link>http://xpoint.ru/news/193.xhtml</link>
    <pubDate>Fri, 11 Nov 2005 15:23:00 GMT</pubDate>
  </item>
  ...
</channel>
</rss>

rss.css

* {
  display: inline;
  font-family: Arial, Verdana, sans-serif;
}
/* Для IE */
html\:html,
html\:body {
  margin: 0;
  padding: 0;
}

html\:body {
  background: #036;
}
/* Для IE */

rss,
channel,
title,
description,
link,
item {
  display: block;
}

language,
lastBuildDate,
generator,
ttl {
  display: none;
}

rss {
  background: #036;
  margin: 10px;
  padding: 0;
}

channel {
  background: #fff url(/site/images/logo.jpg) no-repeat;
  color: #000;
  padding: 0 100px;
}

channel title {
  border-bottom: 2px solid #036;
  font-size: 120%;
  font-weight: bold;
  padding: 1em 0;
}

channel link {
  color: #036;
  font-size: 80%;
  font-weight: bold;
  margin-bottom: 1em;
  text-decoration: underline;
}

item {
  margin-bottom: 1em;
}

rss channel item title {
  border: 0 none;
  color: #036;
  font-size: 100%;
  font-weight: bold;
  margin-bottom: 0.5em;
  padding: 0;
}

rss channel item description {
  font-size: 80%;
  margin-bottom: 0.5em;
}

rss channel item link {
  margin: 0;
  text-align: left;
}

rss channel item pubDate {
  color: #555;
  font-size: 70%;
}

Замечания

  1. Как видно из примера, CSS-правила подключаются с помощью инструкции обработки <?xml-stylesheet ... ?>. Так же, как и в случае с XSLT-шаблонами, нужно указать два "псевдо-атрибута": type="text/css" и href="path/to/file.css". Теоретически можно указать и несколько инструкций <?xml-stylesheet?>, однако нет гарантий, что браузер будет учитывать их все, а не только первую.
  2. Internet Explorer автоматически создает элементы html и body и помещает XML-содержимое внутрь body. По умолчанию, body в IE имеет белый фон и ненулевые поля (margins), что приводит к появлению вокруг документа белой каймы. Чтобы избежать этого, в CSS-файле нужно создать правила для элементов html:html и html:body.
  3. Если в XML есть элементы с непустым пространством имен и префиксами, то для IE CSS-правила нужно будет писать в виде prefix\:element {...
  4. Экранированные сущности (&lt;, &gt;, &quot;, &amp;) в элементах description разумеется будут выводиться "как есть".
Powered by POEM™ Engine Copyright © 2002-2005