Mathias Bynens - CSS-Tricks

Using CSS without HTML

# December 14, 2010 By Mathias Bynens

Big thanks to Mathias Bynens for the guest post today! I'd call this a bonafide CSS trick!

A few days ago, Chris tweeted:

If we could stack pseudo elements (e.g. :after:after) we could build a whole website with no HTML other than <html>. Probably good we can’t.

In response to this, I created this quick demo (view in Firefox or Opera), illustrating that technically you don’t need any HTML at all to use CSS.

Since this demo apparently caused some confusion among tweeps, I decided to write an article about it. Basically, all this magical demo does is combine two nifty little tricks most people don’t seem to know about.

Some HTML elements are implied

The opening and closing <html>, <head> and <body> tags aren’t required in HTML. The following document is perfectly valid and conforming:

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

For brevity, this code sample uses the HTML5 DOCTYPE, but don’t let that confuse you — if you’d switch to the HTML 4.01 DOCTYPE, the document would still validate. Obviously, XHTML has a much stricter syntax, which doesn’t allow omitting optional opening and/or closing tags. But it's almost 2011, who’s still using XHTML anyway?

When a browser renders our example document, it notices the <html>, <head> and <body> elements are missing from the source, and — wait for it — automatically generates them. You can confirm this by opening the demo page and inspecting the generated source using Firebug, the Web Inspector, or Opera Dragonfly.

Because these elements are implied, they can also be styled through CSS, regardless of whether they occur in the source code or not. Consider the following example:

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

Even though there’s no mention of the <html> and <body> elements in the HTML source, we can still style them because browsers generate them automatically.

Basically, this is the first trick I used; I just took it one step further. I didn’t bother to specify a DOCTYPE, let alone a <title>, and simply used no HTML at all. Never, ever do this for a real website. Because of the missing DOCTYPE, the document will be rendered in quirks mode instead of standards mode. It goes without saying that the document won’t validate either.

Even with a completely empty HTML document, browsers will still auto-generate the implied HTML elements.

(Interesting sidenote: It’s also possible to style hidden elements such as <head>, <title>, <meta>, <script>, etc.)

The Link: HTTP header

RFC 5988 defines the Link HTTP header, which allows you to send <link> elements through HTTP headers instead of including them in the HTML. To give you an example, you can serve a document with the following HTTP header:

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

...which would have the same effect as placing this in your HTML:

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

Similarly, RFC 5988 makes it possible to include stylesheets in an HTML document using nothing but a HTTP header:

Link: <magic.css>;rel=stylesheet

Which is equivalent to...

<link href="magic.css" rel="stylesheet">

Usage

So if you want to play around with this at home, you make your demo page PHP and set the header right at the top of the page:

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

In this demo, the content was inserted into the page using pseudo elements in the CSS:

html { 
   background: #666; 
   padding: 1em; 
}
body { 
   border: 5px dashed #eee; 
   color: #fff; 
   font: 3em/1.5 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. */ 
}

Well, that’s the theory. In practice, not a lot of browsers implement the Link header. At the time of writing, only Opera and Firefox support this little gem.

If you’re interested to see how browser support for this feature will improve over time, you can subscribe to the bug reports for WebKit (Chromium has separate bug tickets for the CSS and the general variant) and Internet Explorer.

Disclaimer

As mentioned, these techniques are fun tricks, and it’s definitely good to know they exist. However, it wouldn’t be a good idea to use these in practice. The no-HTML ‘hack’ is all kinds of evil, and no web developer would seriously consider using this for a real site.

The Link HTTP header is a lot more interesting. The only reason this can’t really be used yet, is lack of browser support. Maybe one day...

Kudos to Anne van Kesteren for teaching me about the Link header back in 2005 :)