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.
Leave a Reply