The Page with No Code

One hint something is weird without viewing source: you can’t select any of the text.

Dan Q’s demo is pretty fun. You’ll see a white page in anything but Firefox. But in Firefox you’ll see a webpage-looking webpage only if you View Source you’ll see nothing at all.

This is a classic CSS trick that relies on the fact that Firefox lets you apply CSS to a page by including it as a Data URL in a link response header.

So that allows you to add CSS, but if there is no HTML, what are you applying it to? Well, browsers automatically inject some HTML, as long as the response is of Content-Type text/html. To the tune of <html><head></head><body></body></html>.

So now you’ve got a number of elements to style. The classic pseudo-elements ::before and ::after do the rest. If the four you get from body & html aren’t enough, you can always un-hide the head (e.g. head { display: block; }) and get two more.

Just silly really, but I suppose if you really needed to add some Firefox-only CSS, you could inject it via header.


I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

Leave a Reply

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

Back to Top ⬆️