Crazy Meta CSS Hack
There are several HTML tags that aren’t rendered on a page. Tags like
<script> — all very important, but browsers don’t display them. The interesting thing is, browsers can display them, they’re just told not to by the user agent stylesheet:
So what happens when you override the CSS that hides them? Crazy meta CSS hacks happen.
Show Me Your CSS
Here’s a fun trick. You can enable the display of
The CSS has some extra fluff for presentation’s sake, but the heart of it is very simple:
What’s It Good For?
That’s neat and all, but is it useful? Nope! Thanks for reading!
Actually, it could be useful as a development tool. Imagine a specially crafted stylesheet that visualizes hidden markup on a page — meta tags, stylesheets, script references, etc. Developers could quickly see what’s behind the curtain without having to poke around in dev tools or search the source code.
There’s quite a bit of CSS shenaniganery going on there. I won’t bore you with the line-by-line, but here are the highlights.
I only show tags when they have certain attributes on them. The
<meta> tag in particular has several possible attributes, but I only care for some of them. So I use attribute selectors to pick them out. For example, to only show
<meta> tags that have
The big difference between this demo and the earlier one is that I’m displaying the attributes of these elements instead of their inner text. Very different. Fortunately
attr() makes it possible to pull text out of an attribute and display it via a pseudo-element:
In case you didn’t notice, the tag counts are also being displayed —
<meta> #2, etc. This is done with CSS counters:
Like any hack, you should use your best judgement before applying it. I really don’t see this being used in production. For development, maybe. For crazy-go-nuts experimental demos, absolutely!