Mystery of the Missing HTML: Solution

Many of you have worked out or discovered the solution for the HTML mystery I posed 1 week ago. To recap, it’s a 0 byte HTML page (excluding comments) with images, text and rollover effects. It was quite interesting to see what people wrote on forums, blogs and comments.

Some of the incorrect answers… 

XUL/Standards
Some people suggested that I was using a proprietary technology which only worked in Mozilla such as XBL or XUL. Wrong. The mystery page follows standards – the HTTP header used is defined in RFC [some random meaningless number]. The stylesheet used should be valid CSS 2.1. Obviously the page itself wasn’t valid as it didn’t contain any content. The demo page also works in Opera 9.

JavaScript
There was a suggestion I was getting Javascript to create the page and then using Javascript to somehow disable or modify the “View Source” functionality of the browser. Interesting ideas; I’m not sure if this is possible but you need one Javascript tag and you can create a DOM and a fully functioning web page. Whether you could then disguise the fact your including Javascript is another matter.

PHP Magic
There was also some suggestion I was doing some magic with PHP. PHP is a server side language which generates HTML and can’t cause something like no source code. Well, it kinda can…

The reason I used PHP was because I needed to send a special HTTP Header:

Link: <nocode.css>; REL=”stylesheet”; MEDIA=”screen”

This HTTP Header is the equivalent of sending a link tag in the head section of the HTML page. The second trick in using CSS was that not many people knew what CSS could do – rollovers, inserting content, images. The following CSS file was used:

body { background: #9EAEB3 url(grad.jpg) repeat-x top; font-size: 20px; text-decoration: blink; font-weight: bold; }
body:after { content: “This page contains 0 bytes of HTML (excluding comments). View the source code, no CSS! Move your mouse here…” }
body:hover { text-decoration: none; color: green; }
body:hover:after { content: “Look, no Javascript, ma! View source… ” url(http://khlo.co.uk/ui/cow/images/comments.gif) ” cow.neondragon.net”; color: white; background-color: blue; font-size: 24px; line-height: 36px; }

The content attribute allows you to add generated content into a webpage. In practice, this is sometimes used in the printer stylesheet to display URLs linked. For example, a:after { content: “(” attr(href) “)”; } will display the URL of the target page of each hyperlink in the page. The :after and :before pseudo-classes allow content to be added before or after the element.

:hover is also a cool pseudo-class but most people will probably have used these now on their hyperlinks. Back in the day, many people used Javascript for text and image rollovers. 

I do think including stylesheets using HTTP headers is quite a neat trick – perhaps this could be a new method of sending stylesheets only to Gecko and Opera 9+. A “hack” if you like. 

Congrats if you got it! 

Leave a Reply

Your email address will not be published. Required fields are marked *