There are several HTML tags that aren’t rendered on a page. Tags like <head>, <meta>, <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:

User agent hiding elements

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 <style> blocks, essentially creating CSS that shows itself (without JavaScript):

See the Pen Display CSS with CSS by Will Boyd (@lonekorean) on CodePen.

The CSS has some extra fluff for presentation’s sake, but the heart of it is very simple:

head, style {
  display: block;
}

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.

Here’s a prototype (again, no JavaScript):

See the Pen Visualizing Hidden Tags by Will Boyd (@lonekorean) on CodePen.

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 name and content:

meta[name][content] {
  display: inline-block;
}

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:

meta[name][content]::after {
  content: 'name="' attr(name) '" content="' attr(content) '"';
}

In case you didn’t notice, the tag counts are also being displayed — <meta> #1, <meta> #2, etc. This is done with CSS counters:

html {
  counter-reset: metas;
}

meta[name][content]::before {
  counter-increment: metas;
  content: '<meta> #' counter(metas);
}

Closing Remarks

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!