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

XML и CSS: История

Внимание! Данный интерфейс находится в стадии глубокой переделки. Наберитесь терпения.

Последнее изменение

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

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

==#news.rss#==¶
<<<(xml)¶
<?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#==¶
<<<(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#= разумеется будут выводиться "как есть".

История предыдущих изменений

изменения дата автор
текст 2005-12-05 22:42:56 (11 лет назад) Александр Лукьянов[досье]
заголовок 2005-12-05 21:17:27 (11 лет назад) Александр Лукьянов[досье]
RSS
Powered by POEM™ Engine Copyright © 2002-2005