CSS-Tricks: Internetseiten ganz ohne HTML

Als ein kleines Vorwort zu diesem Artikel: Öffnet mal diese Webseite (nur Firefox oder Opera werden unterstützt) und schaut euch den Quellcode an. Überrascht? Es gibt nämlich gar keinen, schauen wir uns mal an, wie wir das selbst hinkriegen.

Erster Trick
Viele werden gar nicht wissen, dass man die Tags , und gar nicht benutzen muss. Dieser Quellcode ist nämlich voll funktionsfähig:

<!DOCTYPE html>
<title>Example</title>

Man braucht nicht mal HTML5 DOCTYPE wie im Beispiel, mit HTML 4.01 DOCTYPE würde alles analog funktionieren. Das kommt dadurch, da falls der Browser die Tags nicht findet, er sie dann selbst generiert. (Achtung, man sollte es natürlich in der Praxis lieber lassen und auf die Standards setzen! Das alles hier ist eher als Spass zu verstehen!)

Da die Tags also generiert werden, kann man auch CSS anwenden, deshalb funktioniert auch der folgende Code:

<!DOCTYPE html>
<title>Example</title>
<style>
  html {
    background: red;
  }
  body {
    background: blue;
    margin: 0 auto;
    width: 30em;
  }
</style>

Zweiter Trick
Laut RFC 5988 gibt es einen HTTP-Header "Link", der es einem erlaubt Elemente im Header zu senden, statt in unseren Quellcode die Seite zu integrieren. Es sieht zum Beispiel so aus:

Link: <some-document.html>;rel=prefetch

Das ist analog zu:

<link href="some-document.html" rel="prefetch">

Folglich kann man die Stylesheets so integrieren:

Link: <magic.css>;rel=stylesheet

In der Praxis sieht es dann so aus:

<?php header('Link: <demo.css>;rel=stylesheet'); ?>

Das Stylesheet sieht so aus:

html {
   background: #666;
   padding: 1em;
}
body {
   border: 5px dashed #eee;
   color: #fff; font: 3em/1.5 Helvetica, Arial, sans-serif;
   padding: 1em;
   width: 30em;
   margin: 0 auto;
}
body::after {
   content: 'O HAI! Have a look at my source code :)'; /* This needs to be on the ::after (and not just on `body`) for it to work in Firefox 3.6.x. */
}

Aber eigentlich sind es alles nur theoretische Spielereien, in der Praxis wird der Header „Link“ nur von Opera und Firefox unterstützt. Wenn es jemand interessiert, hier sind die Infos zu den Bugs bei Webkit und IE

Und so siehts dann aus:
CSS-Tricks: Internetseiten ganz ohne HTML