Fachbeitrag
RSS-Ticker mit CSS stylen

Wie bei (X)HTML-Dokumenten auch, werden die CSS-Anweisungen für einen RSS-Feed über ein externes Stylesheet eingebunden. Den Link auf die CSS-Datei bettet man hierbei direkt nach der XML-Deklaration ein. Lautet die Datei zum Beispiel „rss_styles.css", sieht der Quellcode wie folgt aus:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="http://website.de/rss_styles.css"?>
<rss version="0.91">
...

Um Ihnen Arbeit beim Tippen zu ersparen, öffnen Sie am besten die CD-ROM. Dort finden Sie sowohl die CSS- als auch RSS-Datei. Möchten Sie schnell ein Logo für Ihren RSS-Feed entwerfen, so öffnen Sie einfach die beigefügte Photoshop-Datei.

Browser-Unterstützung für RSS-Stylesheet-Angaben

Haben Sie die Verlinkung in den RSS-Ticker eingebaut, können Sie sich nun an das Styling begeben. Dabei soll der Feed mittig mit einer Pixelbreite von 770 angezeigt werden. Um dieses Layout zu realisieren, legen Sie mit * global erst einmal Grundlegendes fest und setzen alle Innen- und Außenabstände auf Null:

* {
margin: 0;
padding: 0;
display: block;
width: 770px;
font-family: "Verdana", "Tahoma", "Arial", "Helvetica", sans-serif;
font-size: 1em;
color: #000;
}

Damit das Layout in modernen Browsern zentriert wird, setzen Sie in einem nächsten Schritt die Außenabstände des umschließenden Elements oben und unten auf Null sowie links und rechts auf auto. Das bewirkt, dass Browser wie Firefox und Opera den Inhalt des <rss>-Elements automatisch mittig platzieren und den linken und rechten Abstand anpassen.

rss {
margin: 0 auto;
}

Die äußerst hilfreichen Elemente :before und :after

Da immer mehr Daten direkt aus Datenbanken ins Internet geleitet werden, benötigt man Eigenschaften für die Formatierung und Strukturierung dieser Datenmengen. Hilfreich bei der Formatierung sind die beiden Pseudoelemente :before und :after. Diese erlauben das Platzieren von wiederkehrenden Texten und Bildern vor und hinter einem spezifischen Element. In einem RSS-Feed kann das zum Beispiel das alle Container umschließende <rss>-Element sein.

Leider – wie in so vielen anderen Fällen auch – fällt die Unterstützung der beiden im Internet Explorer reichlich mager aus. Während Firefox, Opera als auch Safari die CSS-Technik für RSS-Feeds hervorragend umsetzen, fehlt beim IE vor allem die Möglichkeit, das hilfreiche :before-Element zu nutzen – siehe weiter unten. Einziges Manko des Safari-Browsers ist, dass nur der RSS-<link>-Text nicht angezeigt wird.

Um einen unerfahrenen Besucher aufzuklären, dass er auf den Link zu einem RSS-Feed geklickt hat, können Sie ihm mit Hilfe von :before eine Hilfestellung leisten. Dazu fügen Sie in Ihrem Stylesheet dann die folgenden Anweisungen ein:

rss:before {
content: "Dies ist ein RSS Feed. RSS Dateien sind dazu da, um in News-Aggregatoren gelesen zu werden. Mehr Informationen zu RSS findet man im Phlow-Artikel - http://phlow.net/webtechnik/was_ist_rss.php";
color: #fff;
background: #d00;
display: block;
padding: 8px;
font-weight: bold;
font-size: 1.0em;
line-height: 1.3em;
}

Während wir im unteren Teil des obigen Codes das Aussehen unserer Hilfestellung bestimmen, übergeben wir mit dem Parameter content dem Pseudoelement einen Inhalt, der vor dem <rss>-Element eingesetzt werden soll. In unserem Fall ist das eine Zeichenkette. Optional können Sie aber auch Bilder einbauen, was wir in einem nächsten Schritt nutzen, um dem RSS-Feed ein Logo zu geben:

channel:before { content: url("logo.jpg");}

Anschließend blenden wir erst einmal unwichtige Elemente für die Darstellung aus. Dazu gehören die folgenden:

channel pubdate, channel link, channel title, language, guid, category, description, copyright, docs {
display: none;
}

Interessant für die Darstellung eines Feeds ist das Datum, an welchem der Feed das letzte Mal aktualisiert wurde. Auch hier machen wir uns das Pseudoelement :before zunutze. Damit sich der beschreibende Text „Letzte Aktualisierung: " abhebt, fetten wir ihn zusätzlich. In einem nächsten Schritt übergeben wir dem gesamten Element ein Hintergrundbild plus alternative Farbe und reduzieren ein wenig die Textgröße. Dabei benutzen wir ein Hintergrundbild mit einem sanften vertikalen Verlauf mit einer Größe von 50 mal 500 Pixel – siehe Abbildung.

pubDate:before {
content: "Letzte Aktualisierung: ";
font-weight: bold;
}

pubDate {
background: #D6E3FE url("hintergrund.jpg");
font-size: 0.9em;
margin-top: -3px;
}

Formatierung der Items

Nachdem wir die Kopfzeile des RSS-Feeds gestaltet haben und alle unwichtigen Elemente mit Hilfe von display:none ausgeblendet haben, widmen wir uns abschließend den einzelnen News-Items.

Damit Titel, Link und Text nicht am Rand kleben, verkleinern wir die Breite der Spalte auf 760 Pixel und geben jedem Item links und rechts einen Innenabstand von 5 Pixel. Addiert man die Werte, kommt man auf die oben angestrebte Breite von 770 Pixel. Weiterhin bekommt jedes Item einen oberen Rand von einem Pixel. Damit sich die jeweiligen Nachrichten noch mehr gegeneinander abheben, übergeben wir jedem Item das oben bereits genutzte Hintergrundbild.

item {
width: 760px;
padding: 0 5px 15px 5px;
border-top: 1px solid #666;
background: #D6E3FE url("hintergrund.jpg");
}

Da der Titel einer News hervorstechen soll, vergrößern wir nicht nur die Schrift, sondern lassen sie vom Browser auch als Fettschrift ausgeben. Obendrein rückt ein Innenabstand den Titel oben und unten von den anderen Elementen weg. Abschließend müssen wir den Titel mit display:block einblenden. Denn item ist ein Kind-Element von channel und wurde weiter oben ausgeblendet.

item title {
font-size: 1.1em;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
display: block;
}

Ähnlich verfahren wir mit item description und item link. Auch diese müssen mit display:block eingeblendet werden. Da der Link selbst nicht so wichtig ist, weil nicht klickbar, bekommt er eine kleinere Schriftgröße. Damit Surfer trotzdem den Link als solches verstehen, nutzen wir ein letztes Mal das Pseudoelement :before mit der Aussage: „Link zum Artikel".

item description {
display: block;
}

item link {
display: block;
font-size: 0.8em;
margin-bottom: 6px;
}

item link:before {
font-weight: bold;
content: "Link zum Artikel: "
}