Showing Meta-Data with CSS3 Selectors
The head of this page shows chosen attributes of meta and link tags. The content of style and script tags is also shown.
In that way, you can check at a glance whether your meta descriptions and keywords are up to date, and links to alternate versions present.
Deriving from Eric Meyer’s “Show Everything: Revealing Normally Hidden Elements”, the various attributes of the meta and link tags can be brought into light by the CSS3 selectors.
I found later that the same idea has been previously realised in the showheadinfo bookmarklet.
The tags’ display is set to block, and they are given margins and padding.
The contents themselves are displayed via the :after pseudo-element and content style, e.g. meta[name]:after {content:attr(name) ': ' attr(content);}
The example above serves to display a general meta tag, whatever the name might be.
This is overridden for the more common cases like meta[name$='uthor']:after {content:'Author: ' attr(content);}
The $= selector matches the end of an attribute name, allowing to disregard its case.
The link tags are treated in a similar way.
Links to translated versions of the page are are found by requiring an '.htm' substring in the href attribute (by the *= selector) in addition to the rel$='lternate'.
RSS and Atom feeds are distinguished via their type attribute (e.g. type='application/rss+xml').