RSS-Feed mit CSS gestalten: was in Chrome weiterhin funktioniert

Kann man einen RSS-Feed mit CSS gestalten, wenn XSLT wegfällt?

Ja, wenn der Server den Feed mit dem passenden Inhaltstyp (Content-Type) sendet. Laut Chromes Ankündigung zu XSLT wird die Verarbeitungsanweisung <?xml-stylesheet ... ?> für CSS-Stylesheets mit type="text/css" weiterhin unterstützt. Wegfallen wird nur XSLT, und zwar mit Chrome 158 am 17. November 2026.

Betroffen sind Betreiber, deren Feed heute ein XSL-Stylesheet nutzt. Laut Chrome machen viele RSS- und Atom-Feeds ihr XML mit XSLT lesbar, wenn jemand den Feed direkt im Browser öffnet. Ab dem 17. November verlieren diese Feeds in Chrome ihr Layout. Ein CSS-Stylesheet ist der einfachere Ersatz: Es wandelt nichts um, sondern legt nur fest, wie jedes Element aussieht.

Dass der Inhaltstyp entscheidet, liegt daran, wie Chrome die Medientypen von Feeds behandelt. Ein Feed, der als application/rss+xml oder application/atom+xml gesendet wird, wird in Chrome als reiner Text angezeigt, und in dieser Ansicht wendet Chrome überhaupt kein Stylesheet an, weder CSS noch XSL. Unsere Anleitung zu RSS-Feeds, die als Text erscheinen, erklärt dieses Verhalten und was Leser tun können.

Um einen RSS-Feed mit CSS gestalten zu können, brauchen Sie also zwei Dinge: die Stylesheet-Zeile im Feed und einen Server, der den Feed als application/xml oder text/xml sendet. Wenn Chrome Ihren Feed heute mit seinem XSL-Layout anzeigt, sendet Ihr Server bereits einen dieser Typen, und Sie müssen nur die Stylesheet-Zeile ändern.

Bei welchem Content-Type wendet Chrome CSS auf einen Feed an?

Bei application/xml oder text/xml. Am 14. Oktober 2026 haben wir einen kleinen Atom-Feed und einen kleinen RSS-Feed von einem lokalen Server in Chromium 156 geladen. Beide begannen direkt nach der XML-Deklaration mit dieser Zeile:

<?xml-stylesheet type="text/css" href="/feed.css"?>

Das Test-Stylesheet machte jedes title-Element zu einer roten, 28 Pixel großen Überschrift und blendete die übrigen Elemente aus, damit sich das Ergebnis an den berechneten Stilwerten ablesen ließ. Jeden Fall haben wir zweimal getestet: mit eingeschalteter XSLT-Funktion von Chromium und mit abgeschalteter, wie es in Chrome 158 sein wird. In beiden Durchläufen waren die Ergebnisse identisch.

Feed	Vom Server gesendeter Typ	Was Chromium zeigte
Atom	application/xml	CSS angewendet: Titel in Rot
Atom	text/xml	CSS angewendet
RSS	application/xml	CSS angewendet
RSS	text/xml	CSS angewendet
Atom	application/atom+xml	Rohtext des Feeds, CSS ignoriert
RSS	application/rss+xml	Rohtext des Feeds, CSS ignoriert

In den Fällen mit Rohtext zeigte die Seite den Quelltext des Feeds so, wie er gesendet wurde, in Festbreitenschrift und samt Stylesheet-Zeile. Bei den gestalteten Feeds stand keine Meldung über dem Inhalt. Die ausgeblendeten Elemente, etwa id und updated, waren weiterhin im Dokument vorhanden.

Ohne Stylesheet-Zeile und mit application/xml erschien derselbe RSS-Feed als XML-Baum unter der Meldung „no style information“ (keine Stilinformationen). Was es damit auf sich hat, erklärt unsere Seite zur Baumansicht von Chrome für XML. Ein Feed mit XSL-Stylesheet zeigt bei abgeschaltetem XSLT eine andere Meldung: „This document cannot be formatted as intended“ (Das Dokument kann nicht wie vorgesehen formatiert werden).

Wie binde ich ein CSS-Stylesheet in einen Feed ein?

In drei Schritten.

1. Fügen Sie die Verarbeitungsanweisung ein. Die W3C-Empfehlung „Associating Style Sheets with XML documents“ definiert sie. Sie muss im Prolog stehen, vor dem Wurzelelement: direkt nach <?xml version="1.0"?> und vor <rss> oder <feed>. Das Pseudo-Attribut href ist Pflicht. Die übrigen sind optional: type, title, media, charset und alternate. Ein vollständiger RSS-Feed mit Stylesheet-Zeile sieht so aus:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="/feed.css"?>
<rss version="2.0">
  <channel>
    <title>Beispiel-Blog</title>
    <link>https://example.com/</link>
    <description>Neueste Beiträge</description>
    <item>
      <title>Erster Beitrag</title>
      <link>https://example.com/erster/</link>
    </item>
  </channel>
</rss>

2. Schreiben Sie das CSS. In CSS ist der Initialwert von display laut MDN inline. Ein Feed hat keine HTML-Standardstile. Ohne eigene Regeln laufen also alle Elemente in einer Zeile zusammen. Machen Sie zuerst die Container zu Blockelementen:

rss, channel, item, feed, entry { display: block; }
title { display: block; font-size: 1.4em; margin: 1em 0 0.3em; }
link, guid, id, updated, pubDate { display: none; }

Auch dieses Stylesheet haben wir getestet: In einem RSS-Feed erschienen die Titel in 1,4-facher Grundgröße, und die Links waren ausgeblendet. In RSS haben der Kanal und jeder Eintrag ein eigenes title-Element. Um sie unterschiedlich zu gestalten, verwenden Sie channel > title und item > title, in Atom feed > title und entry > title. Ein einfacher Selektor title erfasst auch die Titel eines Atom-Feeds, obwohl dessen Elemente zum Atom-Namespace gehören: Laut der W3C-Spezifikation Selectors passt ein Typselektor auf Elemente in jedem Namespace, solange das Stylesheet keinen Standard-Namespace deklariert.

3. Senden Sie den richtigen Inhaltstyp. Die Liste gängiger Medientypen von MDN empfiehlt application/xml für XML und merkt an, dass text/xml manchmal noch verwendet wird; nehmen Sie also den ersten. Der W3C Feed Validation Service warnt dann, dieser Typ sei zu unspezifisch, als dass jedes Programm den Feed erkennen könne. Ist kein genauerer Typ möglich, verlangt der Validator <rss oder <feed in den ersten 512 Bytes. Ein Feed, der mit den beiden Zeilen oben beginnt, erfüllt das.

In WordPress erledigen zwei Hooks beide Änderungen. Die Funktion feed_content_type() gibt für RSS application/rss+xml und für Atom application/atom+xml zurück, sofern kein Filter das ändert, und die Action rss_tag_pre wird zwischen der XML-Deklaration und dem Wurzelelement ausgelöst. Speichern Sie den folgenden Code als PHP-Datei in wp-content/mu-plugins/, dem Ordner für Must-Use-Plugins. Auf einer Testinstallation mit WordPress 7.1.3 hat er funktioniert:

<?php
// RSS- und Atom-Feeds als application/xml senden, damit Chrome ein CSS-Stylesheet anwendet.
add_filter( 'feed_content_type', function ( $content_type, $type ) {
	return in_array( $type, array( 'rss2', 'atom' ), true ) ? 'application/xml' : $content_type;
}, 10, 2 );

// Die Stylesheet-Zeile zwischen XML-Deklaration und Wurzelelement ausgeben.
add_action( 'rss_tag_pre', function () {
	echo '<?xml-stylesheet type="text/css" href="/feed.css"?>' . "\n";
} );

Bei einem statischen Feed unter nginx leeren Sie für dessen Adresse die Typzuordnung und legen einen Standardtyp fest, so wie es die nginx-Dokumentation zur Direktive types zeigt:

location = /feed.xml {
    types        { }
    default_type application/xml;
}

In unserem Test mit nginx 1.27 sendete dieser Block /feed.xml als application/xml, während andere .xml-Dateien beim nginx-Standardtyp text/xml blieben.

Um zu sehen, was Ihr Server sendet, rufen Sie den Feed in Chrome auf, öffnen Sie die DevTools (Entwicklertools), laden Sie die Seite neu und wählen Sie im Bereich Network (Netzwerk) die Anfrage des Feeds aus. Im Tab Headers (Header) finden Sie content-type unter Response Headers (Antwortheader). Im Terminal zeigt curl -s -o /dev/null -D - https://example.com/feed/ dieselben Antwortheader.

Für Podcast-Feeds gilt dasselbe: Es sind RSS-Dateien, also entscheidet der Inhaltstyp, ob Chrome das CSS anwendet oder Rohtext zeigt.

Lassen Sie den Autodiscovery-Link Ihrer HTML-Seiten, wie er ist. Das RSS Advisory Board verlangt in diesem link-Element type="application/rss+xml". Dieses Attribut steht in Ihrer HTML-Seite. Den Header Content-Type des Feeds legt dagegen der Server fest, wenn er den Feed ausliefert.

Was kann CSS in einem RSS-Feed nicht?

CSS ändert nur, wie vorhandene Elemente aussehen, nicht, was sie sind. Daraus ergeben sich drei Grenzen.

Das Element link eines Eintrags bleibt Text. CSS macht daraus keinen anklickbaren Link, Leser gelangen so nicht zum Artikel.

Auch HTML in einer description bleibt Text. In unserem Test erschienen die Tags sowohl bei maskiertem HTML als auch bei HTML in einem CDATA-Abschnitt als sichtbare Zeichen, etwa <p> und <b>. Blenden Sie die Beschreibung aus oder beschränken Sie sie auf reinen Text.

CSS kann weder Datumsangaben umformatieren noch Einträge sortieren. Jedes Datum bleibt im Format des Feeds, und die Reihenfolge der Einträge lässt sich weder nach Datum noch nach Titel ändern.

Für eine echte Seite mit klickbaren Links brauchen Sie HTML, also weiterhin ein XSL-Stylesheet statt CSS. Für Feeds mit XSL schlägt Chromes Ankündigung eine zusätzliche Zeile vor, die das Skript xslt-polyfill lädt; Feedreader sollten das XML trotzdem lesen können, heißt es dort. Das Polyfill wendet nur ein XSL-Stylesheet an, auf das der Feed verweist, und auch hier kommt es auf den Inhaltstyp an: In unserem Test mit abgeschaltetem XSLT lief das Skript, wenn der Feed als application/xml kam, aber nie bei application/rss+xml, weil Chrome ihn dann als reinen Text anzeigte. Alternativ erzeugen Sie das HTML selbst und veröffentlichen es unter einer eigenen Adresse, damit der Feed XML bleibt. Unsere Beispiele für XSLT auf dem Server zeigen, wie das geht.

Um Ihre CSS-Fassung mit dem XSL-Layout zu vergleichen, das sie ersetzt, brauchen Sie einen XML-Viewer, der XSL anwendet. XMLNest, im Chrome Web Store verfügbar, wendet XSL-Stylesheets (Version 1.0) so an, wie Chrome es bis Version 157 tut, und öffnet RSS- und Atom-Feeds in einer Leseansicht.