CSS-Microformats - Trennung von Form, Form, Form und Inhalt

• Fr, 30. Juni 2006,
• 1506 Wörter,
• 3 Kommentare,
• Tags:
• CSS,
• Microformat

Dies­mal gibt es ein klei­nes Vor­wort. Der fol­gende Text hat sich in Minu­ten vom abso­lu­ten Krampf, zu einem Ein­trag ent­wi­ckelt, der die Ver­öf­fent­li­chung hof­fent­lich wert ist. Ich bitte daher zu ent­schul­di­gen, wenn sich das Ganze noch sehr sinn­ent­leert liest, die­ser Text war lange Zeit ohne echte Sub­stanz, da ich kein Freund von zu viel Sorg­falt beim Blog­gen bin, geht das hier so unge­färbt online. Das ist also mal ein Schnell­schuss zum Ende der Woche.

Ich habe die HTML Struk­tur die­ser Ver­sion, mal zur Abwechs­lung mit grö­ße­rer Sorg­falt ange­legt. Waren die frü­he­ren Ver­su­che noch Mar­kups, jeweils für die indi­vi­du­elle Ver­sion, so hoffe ich dies­mal eine län­ger halt­bare Basis gefun­den zu haben. Ich möchte ver­su­chen, das Ganze am Bei­spiel zu erklä­ren. Auch wenn es nun mitt­ler­weile Stan­dard gewor­den ist Form und Inhalt zu tren­nen, so gibt es auch dafür, mehr als eine Mög­lich­keit der Umset­zung.

Ich weiß selbst noch nicht genau, ob der Text den Ein­trag wert ist. Viel­leicht ist es die Fort­set­zung der Raster-Tutorials, viel­leicht auch nicht. Die Geschichte dahin­ter liest sich wie folgt: ich komme immer wie­der in die Situa­tion, bei der ich unsi­cher bin, auf wel­ches HTML-Element, die spä­ter zu for­ma­tie­rende CSS-Klasse oder ID gehört. Wo ist diese ID nun logi­scher? Bei wel­cher Lösung habe ich spä­ter mehr Mög­lich­kei­ten? Die Ant­wort auf alle Fra­gen, beant­wor­tet mir meist der Quell­code die­ser Start­seite hier. Ich denke hier eine rela­tive fle­xi­ble HTML/CSS-Struktur gefun­den zu haben, die sich auch gut ska­lie­ren lässt und nicht nur für so ein paar Inhalt­sei­ten funk­tio­niert.

Wer die Ent­wick­lung die­ser Gestal­tung von Anfang an ver­folgt hat, wird mit­be­kom­men haben, wie oft und schnell ich die vie­len Lis­ten auf der Start­seite neu ange­ord­net habe. Genau das begrün­det sich auf der Markup-Struktur der Seite, in Kom­bi­na­tion mit einer sehr effi­zi­en­ten Ver­tei­lung von CSS-IDs und Klas­sen. Ich mag es schnell auch kom­pli­zier­tere Ele­mente neu posi­tio­nie­ren zu kön­nen, auch des­halb wurde diese Lis­ten spe­zi­ell dafür opti­miert, beson­ders in Hin­sicht auf ihre Struk­tur Markup.

Pra­xis

Grund­lage für die Arbeit am Quell­code die­ser Seite, war wie auch bei der Gestal­tung, das Grund­ras­ter. Fol­gende Tabelle ist erste Anlauf­stelle, wenn ich ein neues inhalt­li­ches Ele­ment in die Seite inte­grie­ren möchte.

HTML-Tag	1 Spalte	2 Spal­ten	3 Spal­ten	4 Spal­ten
<div>	244 Pixel	488 Pixel	732 Pixel	976 Pixel
<ul>	224 Pixel	488 Pixel	732 Pixel	976 Pixel
<li>	204 Pixel	204 Pixel	204 Pixel	204 Pixel

Hier zu sehen, Kenn­da­ten um Ele­mente auf dem Ras­ter zu posi­tio­nie­ren. Diese Tabelle beinhal­tet alle wich­ti­gen Grö­ßen um alle Spal­ten des Ras­ter abde­cken zu kön­nen. In wei­ser Vor­aus­sicht, exis­tie­ren auch schon Werte für eine mög­li­che 4-Spalten Ver­sion, bei einer 1024 Pixel breite Dar­stel­lung.

Alles noch recht unspek­ta­ku­lär, aber diese kleine Tabelle beinhal­tet alles was not­wen­dig ist um schnell, ein­fach und pixel­ge­nau die Lis­ten neu anzu­ord­nen. Es ist pro­blem­los mög­lich alle nur erdenk­li­chen Lis­ten­for­mate, auf die­ses Ras­ter zu brin­gen. Wer sich etwas mehr umschaut, wird auch sehen, dass die Lis­ten hier und da in ein ande­res For­mat wech­seln und das mit ganz gerin­gem Auf­wand. Ein Aus­schnitt des Quell­codes zeigt die­sen Auf­bau:

<div id="lastComments">
<h5>Letzte Kommentare</h5>
<ul>
<li>...</li>
</ul>
</div>

An die­ser Stelle die erste Über­le­gung. Wäre es nicht viel­leicht sinn­vol­ler, der Liste die ID zu geben und nicht extra dafür eine DIV anzu­le­gen? Nun ja eigent­lich wär dies die Puristen-Lösung, für all jene, die jedes zusätz­li­che DIV-Element mei­den, wie Vam­pire das Licht. Zwar gehöre auch ich zu den sehr nihi­lis­ti­schen HTML-Codern, aber für meine Seite ist diese Lösung per­fekt. Warum?

ein klei­ner Schritt zurück

Ein Blick zurück in den zwei­ten Teil des Raster-Tutorials. Eine Aus­sage die­ses Tex­tes ist, dass ich jedes Ele­ment auch auf die­ses Ras­ter pas­send, floa­ten las­sen kann. Mit die­ser Erkennt­nis sind nun alle Lis­ten auf die­ser Seite gleich for­ma­tiert: alles fließt und passt. Jede Liste hat ihr eige­nes mit einer ID ver­se­he­nen DIVs. Nun braucht man sich, beim Blick auf das Style­s­heet die­ser Seite, nicht mehr über sol­che ellen­lan­gen Auf­zäh­lun­gen wun­dern:

/*    globale Listenformate
=========================================== */
#lastComments,
#last10,
#qlinks,
#adverts,
#archive,
#themed,
#footcategory,
#prenextBottom,
#mostComments,
.sideDetail,
.sideCaption  {
width:244px;
float:left;
margin-left:0;
display:inline;
}

#lastComments ul,
#qlinks ul,
#last10 ul,
#archive ul,
#themed ul,
#footcategory ul,
#mostComments ul {
padding:0;
list-style-type:none;
margin:0;
width:224px;
float:left;
display:inline;
}

#lastComments ul li,
#last10 ul li,
#qlinks ul li,
#archive ul li,
#themed ul li,
#footcategory ul li,
#mostComments ul li {
font-size:90%;
margin-left:20px;
width:206px;
float:left;
display:inline;
padding-left:18px;
}

Hier pas­sie­ren nur ganz grund­sätz­li­che Sachen, nichts Span­nen­des. Den­noch sieht man hier die Grund­lage für jede Liste die­ser Seite. Die DIVs die­nen mir nun aus­schließ­lich dazu, die Lis­ten hin und her zu schie­ben und ihre Lay­out zu ver­än­dern. Man kann drü­ber strei­ten, ob es der Logik ent­spricht, Ele­ment so indi­rekt zu for­ma­tie­ren, denn ich defi­niere diese Lis­ten pri­mär über ihren Con­tai­ner und führe so einen einen gewis­sen Teil über­flüs­si­gen CSS-Code mit. Die sepa­ra­ten Anpas­sun­gen der jewei­li­gen Liste, über­schrei­ben näm­lich die oben dar­ge­stell­ten For­mate. Wenn die Archiv­lis­ten plötz­lich über 3 Spal­ten flie­ßen sol­len, muss ich die Brei­ten ändern:

#archive,
#archive ul {
width:732px;
}

Den­noch hat es mehr Vor­teile als Nach­teile, vor­her eine glo­bale For­ma­tie­rung vor­zu­neh­men und diese dann indi­vi­du­ell anzu­pas­sen. Selbst ohne die indi­vi­du­el­len For­mate, sit­zen diese Ele­mente per­fekt auf dem Ras­ter und durch diese Struk­tur ist der Auf­wand viel gerin­ger Ände­run­gen vor­zu­neh­men.

Wer sich die Raster-Tutorials durch­ge­le­sen hat, wird fest­stel­len, dass ich für Floats auf einem Ras­ter, Pro­bleme erge­ben kön­nen. Dies ist auch hier der Fall. Ich werde nun nicht im Detail auf­zei­gen wo, wie und was auch hier schief läuft. Man soll ja immer seine Scho­ko­la­den­seite offen­ba­ren und nicht die dre­cki­gen Ecken. Nur soviel, hier und da kommt mal ein Spal­ten­zwi­schen­raum hinzu und muss mal wie­der vom der Float­breite sub­tra­hiert wer­den. Wer sich die Tabelle oben anschaut erkennt schon das Pro­blem, auch hier­bei hel­fen mir die zusätz­li­chen DIV-Elemente.

Style­s­heet For­mat

Es gibt zwei­fel­los die Mög­lich­keit diese jet­zige Code-Struktur effek­ti­ver anzu­ord­nen. Auch hier bin ich nicht auf der Jagd nach ein­zu­spa­ren­den Bytes, son­dern nach Logik und Hand­ling, wie es so schon neu­deutsch heißt. Ich weiß wie gern ich kleine Ver­än­de­run­gen benutze, also lege ich diese Seite auch dar­auf an.

Sicher­lich wäre es platz­spa­ren­der statt:

#lastComments ul,
#qlinks ul,
#last10 ul,
#archive ul,
#themed ul,
#footcategory ul,
#mostComments ul {
....
}

eine neue alles beinhal­tende DIV zu gene­rie­ren und dann ganz ein­fach so zu sty­len:

#ganzNeueDIV ul {
....
}

Um das Ganze noch dyna­mi­scher zu machen wären IDs und Klas­sen auf den Lis­ten an sich eben­falls vor­stell­bar. So könnte ich das abso­lut glei­che Ergeb­nis, mit weni­ger Code erzie­len:

#ganzNeueDIV ul#lastComments {
....
}

Den­noch bleibe ich bei der jet­zi­gen Vari­ante, die auf den ers­ten Blick auf­ge­bläh­ter und weni­ger opti­miert wirkt, aber auf den zwei­ten Blick und spä­tes­tens beim Rede­sign ihre vol­len Stär­ken offen­bart. Ich sehe immer wie­der Bei­spiele (ich werd mich hüten Links zu set­zen, zu viele Referer-Dramen in der letz­ten Zeit), wo durch­aus anspre­chende Gestal­tung prä­sen­tiert wird, das Ganze jedoch auf wenig dyna­mi­schen Code-Strukturen basie­rend. CSS ID und Klassen-Monster, die zu Hand­ha­ben es einen wah­ren Zei­chen­deu­ter braucht. Ich ver­stehe dabei natür­li­che den Sinn bei Auf­trags­ar­bei­ten, leich­ter als durch wenig trans­pa­rente und kom­plexe Code-Strukturen, kann man den Kun­den nicht an sich bin­den.

CSS + Micro­for­mats = CSS-Microformats?

Zwar erscheint in jedem zwei­tem mei­ner Texte, der große Ham­mer mit der Auf­schrift “Weni­ger ist mehr!”, aber wie man sieht, kann etwas mehr manch­mal doch auch seine Vor­teile haben. Ich hab mich die letz­ten Wochen ver­stärkt mit Mikro­for­ma­ten beschäf­tigt, eine höchst inter­es­sante Ange­le­gen­heit und mit Sicher­heit der nächste große Zug, auf den viele auf­sprin­gen wer­den. Für alle die nicht wis­sen was Mikro­for­mate sind, ver­su­che ich es kurz zu erläu­tern.

Micro­for­mats are markup that allow expres­sion of seman­tics in an HTML (or XHTML) web page. Pro­grams can extract mea­ning from a stan­dard web page that is mar­ked up with micro­for­mats.

Exis­ting XHTML (and HTML) stan­dards allow for seman­tics to be embed­ded and encoded wit­hin them. This is done using spe­ci­fic HTML attri­bu­tes:

• class
• rel
• rev

Adding micro­for­mats to a stan­dard HTML web page allows machi­nes to pro­cess HTML text and to pos­si­bly load data into remote data­ba­ses. This would allow pro­grams such as web craw­lers to find items such as con­tact infor­ma­tion, events, and reviews on web pages.

Man stelle sich eine neue Norm vor, die vor­schreibt wie man Infor­ma­tio­nen inner­halb zu struk­tu­rie­ren hat. Diese Norm sind Mikro­for­mate. Vor­teil dabei? Infor­ma­tio­nen wer­den uni­ver­sell und denoch zugäng­li­cher. Bei­spiel: wenn ich eine heute bei Google nach einer CD Kri­tik suche, gebe ich meist den Inter­pre­ten, den Titel und das eng­li­sche Wort für Rezen­sion “Review” ein. In vie­len Fäl­len kommt dabei Unbrauch­ba­res zu Tage. Nun gibt es genau dafür schon ein Review-Mikroformat, wel­ches mit abso­lu­ter Sicher­heit bes­sere Such­er­geb­nisse lie­fern würde als Google, sofern ein Microformats-Google exis­tie­ren würde.

div#reviews ul, ul#reviews, ul li.reviews, ul li a.reviews …

Im gewis­sen Rah­men habe ich kleine Mikro­for­mate, so genannte Nano­for­mate /joke, für den CSS-Code die­ser Seite geschaf­fen, mit eben den glei­chen Vor­tei­len wie bei Mikro­for­ma­ten. Ich muss nicht schauen wel­che ID, wel­che Klasse oder wie der Code an die­ser Stelle ist. Es gibt ein fes­tes CSS-Format, wel­ches mir die Arbeit unge­mein erleich­tert. CSS Style­s­heets kön­nen schon heute unglaub­lich kom­plex wer­den und mit Sicht auf CSS-3, wird sich das auch nicht mehr ändern. Zeit dar­über nach­zu­den­ken auch hier feste For­mate zu ent­wi­ckeln? Ich für meine Arbei­ten beant­worte diese Frage mit ja. Für viele mag die­ser “Ansatz” tri­vial sein, für mich ist er rela­tiv neu und die Über­le­gung wert, sorg­fäl­tig wei­ter ent­wi­ckelt zu wer­den.

Zum gleichen Thema

• CSS - Font SizeCSS

• Auflösungsabhängiges CSS mit jQueryCSS

• PNG TrainingTutorials

• transparente ÜberschriftenCSS

• der Herbst und seine FarbenFundstücke

• Tutorial: Gestaltungsraster im Webdesign II.CSS

• Browserstandards Folge 1372CSS