at: Meta-Elemente mit CSS formatieren

Beitrag lesen

Hallo.

Ich habe da vor einiger Zeit etwas rumexperimentiert - die verschiedenen
Browser stellen sich sehr zickig an, wenn man HTML-Elemente unterhalb
von <head> mit CSS sichtbar machen und formatieren will. Es gibt
Vorraussetzungen, unter denen das klappt (Ich habe da mal ein nettes
Beispiel mit <title> gesehen), allerdings habe ich da noch keine
konsistente Strategie gesehen.

Ob du dies als eine "konstistente Strategie" bezeichnen möchtest, weiß ich zwar nicht, aber Opera7 liefert hierfür  die Datei Showstructure.css mit. Der relevante Teil des Inhalts liest sich wie folgt:
/*
Name: Show structural elements
Version: 1.00
Author: Opera Software ASA
Description: Developer style sheet for showing structural elements and meta information.

Copyright © 2003 Opera Software ASA.
*/

head, title, head script[src], link, meta,
table:before, table:after,
div:before, div:after,
pre:before, pre:after,
blockquote:before, blockquote:after,
html:after
{display: block !important;}

head {margin-top: 1.8em;}

title {
 position: absolute;
 left: 0;
 top:0;
 height: 1.2em;
 width: 98%;
 overflow: hidden;

padding: 0.5em 1% !important;

color: white !important;
 background: #304575 !important;

font-size: 0.8em !important;
 font-weight: bold !important;
 font-family: sans-serif;
 text-align: center !important;
 letter-spacing: 1px !important;
}

title:before, title:after {
 background: #304575 !important;
 color: #CC99CC !important;
}

title:before {content: '<title>' !important;}
title[class]:before {content: '<title class="' attr(class) '">' !important;}
title:after {content: '</title>' !important;}

/* Other head content  */

meta, head script[src], link {
 width: 98%;
 margin: 0;
 padding: 0.1em 1% !important;
 border-bottom: 0.1em solid #525a84;

color: white !important;
 background: #355382 !important;
 font: 0.8em normal normal sans-serif;
}

meta:before, head script[src]:before, link:before {
 display: compact;
 padding-left: 0.4em;
 font-weight: bold;
}

meta:after, head script[src]:after, link:after {
 display: block;
 margin-left: 8em;
}

meta:before {content: attr(name) ":";}
meta[http-equiv]:before {
 content: attr(http-equiv) ":";
 font-style: italic;
}

meta:after {content: attr(content);}

link:before {content: "@import style:"}
link[rel]:before {content: attr(rel) ":";}

link:after {content: "<" attr(href) ">"; }

link[media]:after {content: "<" attr(href) "> (media = " attr(media) ")";}

head script[src]:before {content: "Script source:";}
head script[src]:after {content:  "<" attr(src) ">"}

Mit der ursprünglichen Fragestellung hat mein Beitrag allerdings ebenso wie deiner wenig zu tun.
MfG, at