kaffeeringe.de

YUI3: Yahoo aktualisiert CSS Grids

.marqs / photocase.com
.marqs / photocase.com

Die Yahoo UserInterface-Library gibt es schon län­ger in der Version 3 – nach und nach wur­den al­le Elemente der Vorgängerversion durch bes­se­re Funktionen er­setzt und durch neue er­gänzt. Ein Element, das im­mer no­ch fehl­te, wa­ren die CSS-Grids. Doch auch von de­nen gibt es jetzt ei­ne Beta-Version.

Die CSS-Grids hel­fen dem WebDesigner bei der Aufteilung der Seite in Spalten. Es gibt da­für von ver­schie­de­nen Anbietern Lösungen wie YAML, 960 oder Blueprint. Alle ar­bei­ten mit fes­ten CSS-Klassen, die dann in be­stimm­ter Weise ge­nutzt da­zu füh­ren, dass man sehr leicht, Cross-Browser-kompatible Layouts er­stel­len kann. Seit ich YUI Grids be­nut­ze, ha­be ich je­den­falls kei­ne Probleme mehr mit Spalten, die an­de­re über­de­cken, im Internet Explorer we­ge­drückt wer­den und so wei­ter.

Der Nachteil von der­art uni­ver­sel­len Lösungen ist oft ein Overhead an Tags, die man in ei­ner maß­ge­schnei­der­ten Lösung nicht be­nö­ti­gen wür­de. Die Seiten sind al­so ein we­nig auf­ge­bläht, was si­ch auf Übertragungsgeschwindigkeiten und ge­ge­ben­falls auf die Durchsuchbarkeit für Suchmaschinen aus­wir­ken könn­te. Während si­ch der Geschwindigkeitunterschied mes­sen lässt und eher ver­nach­läs­sig­bar ist, lässt si­ch ein Problem mit Suchmaschinen nicht ve­ri­fi­zie­ren.

Einfacherer Code + Flexibler

Der Code der YUI3 Grids ist we­sent­li­ch ein­fa­cher be­nutz­bar, weil er les­bar ist. Die Klassennamen sind so ge­setzt, dass man an ih­nen er­kennt, wie breit ein Element da­mit for­ma­tiert wird: 

  1. Man legt ein neu­es Grid an, in­dem man ein Blogelement mit der Klasse .yui3-g (g = grid) an­legt.
  2. In die­sem Grid kön­nen Units (u) be­nutzt wer­den. Soll es in ei­nem Grid ei­nen Bereich ge­ben, der 1/4 des Platzes ein­nimmt, ver­sieht man ein Block-Element mit der Klasse .yui3-u-1-4 – soll es 1/3 sein, nimmt man .yui3-u-1-3.

Auf die­se Weise lässt si­ch ei­ne Seite in Grids und Grids in Units zer­le­gen, in de­nen man wie­der­um si­cher sei­ne Inhalte po­si­tio­nie­ren kann. 

Soweit ich das se­he, gibt es kei­nen Menü-Container mehr und die Reihefolge der Units wird oh­ne­hin ein­fach von links nach rechts an­ge­zeigt.

Das al­les führt da­zu, dass die neu­en YUI3-Grids ein­fa­cher zu be­nut­zen sind. Der Grids-Builder, der un­ter YUI2 no­ch wich­ti­ges Arbeitswerkzeug war, soll­te mit YUI3 über­flüs­sig sein.

Links

Foto: .mar­qs / photocase.com

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Möchtest Du benachrichtigt werden, wenn Dir hier jemand antwortet?