Blogstart mit “content”
So! Nach einigen Testläufen, vielen Spielereien und einigen Experimenten erblickt nun mein Blog das virtuelle Licht der virtuellen Welt - obwohl es mit “Licht” auf dieser Homepage nicht allzuweit her ist. Das Design ist zwar zu großen Teilen vom GPLed “black-Letterhead”-Theme übernommen, auf eine ganz besondere Spielerei möchte ich aber doch hinweisen!
Eines vorneweg: Für Benutzer des InternetExplorers werden meine Design-Experimente wohl ewig ein Geheimnis bleiben. Jene Nutzer mit richtigem Browser sehen hoffentlicht einige Designelemente - insbesondere Trennlinien und Highlights - die ausschließlich aus ASCII-Zeichen bestehen. “Da ist ja Design und Inhalt gar nicht richtig getrennt!” werden jetzt sicher böse XHTML-Verfechter behaupten. Doch Pustekuchen! Alle Spielereien mit //—–> und dergleichen sich schön sauber per CSS definiert.
Möglich macht das die Eigenschaft “content” im Zusammenhang mit den Pseudoklassen “:before” und “:after”, die es seit CSS 2.0 gibt. Als Beispiel hier mal der Codefetzen, der die Überschrift dieser Seite samt dem Subliner beschreibt:
h1 {
font-size: 3.5em;
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
}.description {
font-family: Garamond, ‘Copperplate Gothic Light’, Georgia, ‘Times New Roman’, Serif;
font-size: 1.2em;
text-align: center;
letter-spacing: .6em;
}.description:before {
font-family: ‘Courier New’, Courier, monospace;
content: “//——–//”;
}.description:after {
font-family: ‘Courier New’, Courier, monospace;
content: “//——–>>”;
}
Mit dem Attribut “content” kann also jeder beliebige Inhalt eingefügt werden. Und zwar nicht nur langweilige Strings wie auf dieser Seite, sondern laut w3c-Standard auch URLs und Counter. Weiterhin bleiben natürlich alle anderen CSS-Funktionen einsatzbereit: Der eingefügte Inhalt kann genauso formatiert werden wie statischer.
Neben solchen Experimenten kann man damit aber auch in die Versuchung geraten, wichtige Semantik zu unterschlagen. SelfHTML etwa fügt im Beispiel “Preis:” vor und ” .- EUR” hinter das Objekt. Und das ist absolut unnötig. Diese Maßnahme hat absolut überhaupt nichts mit der Trennung von Inhalt und Layout/Design zu tun, sondern unterschlägt wichtige Informationen. Durch solche Mittel mutiert CSS zu einer Template-Engine á la Smarty. Denn auch ohne CSS soll eine Seite 100% lesbar, verstehbar und vollständig sein. Darum: “content” ist für Spielereien ganz nett, für mehr aber auch nicht.
28. August 2005 um 19:07
Erster!
Glückwunsch zum ersten Blog-Eintrag
29. August 2005 um 8:11
Gut geklaut, ist halb gewonnen
Nein, so ist das nicht gemeint. CSS basiertes Design sollte gefördert werden, deswegen finde ich es einen guten Start. Weiter so!
5. Oktober 2005 um 18:22
[...] So ungefähr zumindest. Wie oben beschrieben wäre es mehr eine Bildnebenschrift, da die Angaben zur Positionierung noch fehlen - und das aber auch in nur in Opera. Denn alle anderen Browser weigern sich, ‘attr(alt)’ anzuerkennen. (Was es genau mit ‘content’ auf sich hat, habe ich hier schon mal erklärt.) Mit einer Kompatibilität von ganzen 2% aller Browser lässt sich nichts anfangen. Die zweite Möglichkeit wäre der Klassiker. Bild und Unterschrift in einen Container packen, dann schön klassisch positionieren. Das ist sowohl im Quelltext als auch im CSS ein heiden Chaos und ziemlich unelegant. Tabellen für Design sind seit CSS ein Tabu - da darf man erst gar nicht daran denken! Eine semantisch korrekte und zudem auch sehr elegante Möglichkeit weißUlrike Häßler. In den Tiefen des HTML-Standards gibt es einen Tag, der kaum benutzt wird: Das Listenelement <dl>. Es ist dazu da, Definitionen auszuzeichnen. Es hat also noch die Unterelemente <dt> für den Terminus und <dd> für die Definition. Und was sollte einen davon abhalten, ein Bild reinzupacken und dieses dann zu definieren? Im HTML: [...]