CSS & XHTML
Dienstag25. September 2007

Die Diskussion bezüglich CSS-Frameworks bleibt nicht stehen. Wenn Sie das Thema interessiert, finden Sie in dem Essay “Was Sie über CSS-Frameworks wissen sollten!” eine ausführliche thematische Fortsetzung der Diskussion

In den letzten Wochen sind im englischen Sprachraum zwei interessante Artikel erschienen, die im Bezug auf die Argumentation pro/conta CSS Frameworks polarisieren. Da wäre “Why I don’t use CSS Frameworks” (Kyle Neath) und “Please do not use CSS framworks” (Jonathan Christopher). Das Smashing Magazine hat diese Diskussion im Rahmen eines Überblicks aktuellen CSS-Frameworks aufgegriffen und prägnant zusammengefasst.

Danach gelten als Vorteile ...

  • Steigerung der Produktivität
  • Vermeiden von alltäglichen Fehlern
  • Einheitliche Code-Basis
  • Verbesserter Workflow bei Team-Arbeit

Dem gegenüber stehen einige Nachteile ...

  • Erlernen der Arbeitsweise des Frameworks kostet Zeit
  • Verstehen der Code-Architektur kostet Zeit
  • Fehler in der Codebasis werden unerkannt mitgeschleift
  • Man vertaut dem Framework, nicht seinen eigenen CSS-Kenntnissen
  • Frameworks erzeugen Overhead im Code
  • CSS Frameworks und semantische Codeauszeichnung stehen im Gegensatz zueinander
  • Man ignoriert die Einzigartigkeit eines Webprojekts

Nun bin ich als Framework-Entwickler natürlich kein Außenstehender, ungeachtet dessen habe ich natürlich zu diesem Thema eine Meinung. Den Vorteilen stimme ich zu (War ja klar, oder?). Zu den genannten Nachteilen möchte ich jedoch etwas anmerken. Nicht, um sie weg zu diskutieren, sondern weil denke, dass die Ursachen dafür woanders zu suchen sind.

Den gesamten Beitrag lesen


Montag10. September 2007

Erst vor ein paar Tagen habe ich hier im Blog über den Ansatz von Chris Heilmann berichtet, gleichlange Spalten nicht mit CSS sondern nachträglich per Javascript zu erzeugen.

Dieser Weg ist immer dann sinnvoll, wenn gleichlange Container einen optisch ein reizvollen Effekt darstellen, für die Funktion der Webseite jedoch nicht zwingend relevant sind. Aus eigener Erfahrung würde ich sagen, dass dies in den meisten Fällen zutrifft. Nicht lange nachdem mein Blogbeitrag im Netz stand, meldete sich Dirk Ginader und wir bastelten eine Lösung für YAML auf Basis von jQuery. Die wenigen Codezeilen waren schnell geschrieben,  doch letzte Woche hatten wir beide viel umdie Ohren, sodass ich erst jetzt dazu komme, unser kleines Plugin mit dem Namen SyncHeight kurz vorzustellen.

Das Plugin synchronisiert die Höhe einer beliebigen Anzahl von Elementen innerhalb eines Layouts. Einzige Voraussetzung: Die Elemente müssen sich lediglich über einen gemeinsamen CSS Selektor ansprechen lassen (also beispielsweise eine gemeinsame CSS-Klasse). Als Beispiel hier der Aufruf zur Anpassung der Containerhöhen der YAML Subtemplates:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
}); 

Für Layouts mit fixer Breite war’s das bereits. Innerhalb eines flexiblen Layouts kann es nötig sein, die Angleichung der Containerhöhen zu aktualisieren wenn die Breite des Browserfensters geändert wird. Dazu kann der Resize Event von jQuery genutzt werden:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
  $(window).resize(function(){ 
    $('.subcolumns > div').syncHeight();
  });
});

Nachtrag 11.9: Befinden sich gleich mehrere Subtemplates auf der Seite empfielt es sich, den gewünschten Subtemplate-Container direkt über eine ID anzusprechen. Sollen hingegen ALLE Subtemplates innerhalb einer Webseite mit einem Schlag bearbeitet werden, so sind noch ein paar mehr Zeilen Javascript nötig. Hier hat sich Reinhard Hiebl bereits Gedanken gemacht schlägt folgenden Code vor:

$(document).ready(function(){
  var eachCase = '.subcolumns'; // for each lines/paragraphs
  var element = '> div'; // elements within lines/paragraphs from eachCase

  $($(eachCase)).each(function() {
    var el = $(this).find(element);

    el.syncHeight();
    $(window).resize(function(){
      el.syncHeight();
    });
  });
});

In diesem Fall werden alle Subtemplates einer Webseite erfasst, jedoch die Container-Höhen immer nur jeweils innerhalb eines Subtemplates synchronisiert.

Letztlich ist die Anwendung nicht auf YAML begrenzt. Über den Selektor können beliebige Elemente in ihrer Höhe manipuliert werden.

Download des Plugins (v1.0): jquery.syncheight.zip (Dual licensed under the MIT and GPL licenses)


Donnerstag30. August 2007

Offensichtlich hat sich Chris Heilmann die Nacht um die Ohren geschlagen (oder auch nur ein paar Minuten davon) und heute morgen eine recht nette Lösung für YUI Grids und das immer wieder gern diskutierte Problem gleich langer Spalten gepostet. Der Ansatz gefällt mir. Man verzichtet auf das leidige CSS-Gehacke, welches je nach Komplexität des Layouts gelegentlich zu unerwarteten Nebeneffekten führen kann und überlässt die Sache Javascipt. Wer mehr zum Thema wissen möchte, Ed Eliot hat dazu vor einiger Zeit eine schöne Übersicht veröffentlicht.

Bei der Gelegenheit trifft es sich natürlich gut, dass sich der Aufwand innerhalb eines CSS-Frameworks mit bekannten Containerbezeichnungen sehr in Grenzen hält. Was sind nun die Vorteile? Erstens, das CSS-Gehacke entfällt vollständig. Zweitens diese Lösung funktioniert bei angeschaltetem Javascript auch in älteren Browsern - ein Punkt, bei dem CSS-Lösungen regelmäßig scheitern und drittens - wer Javascript ausgeschaltet hat, der bekommt die Seite dennoch in normalem Look & Feel, denn auch hier könnte man per min-height noch evlt. Probleme sehr leicht abfangen. Der einzige Aufwand der entsteht - man muss ein kleines Script in sein Layout einbauen.

Ehrlich, ich finde diesen Weg knuffig und und in Verbindung mit meinem geliebten jQuery auch für die YAML Subtemplates für vorstellbar.


Donnerstag16. August 2007

Heute ist ein schöner Tag denn heute kann ich nach vielen Stunden abendlicher Spielerei mit jQuery ein kleines aber feines Tool vorstellen, welches in Zukunft die Arbeit mit YAML und das Verständnis für die Anwendung des Frameworks deutlich verbessern wird. Der YAML Builder startet als kleine Machbarkeitsstudie in der Version 0.3.

Nachdem ich mich jahrelang erfolgreich um Javascript gedrückt habe, waren die anfänglichen Erfolge umso mehr Ansporn, die Flexibilität von YAML über den Builder für den Nutzer sichtbar und leichter zugänglich zu machen. Die Inspiration für die Oberfläche kam - wie unschwer zu erkennen - vom Grids Builder für das YUI Framework von Yahoo. Wie beim Grids Builder schwebt die Toolbox über dem Layout und ist frei verschiebbar.

Was kann dieses knuffige Teil nun in dieser frühen Version 0.3:

  • Wahl des Doctypes: XHTML steht in der Strict- und in der Transitional-Variante zur Verfügung
  • Freie Wahl der in das Layout integrierten Basiselemente (#header, #footer, ...)
  • Freie Wahl der Anzahl der Content-Spalten (0 ... 3)
  • Beliebige Spaltenanordnung auf dem Bildschirm bei 2- und 3-Spaltenlayouts
  • Freie Eingabe der Layout- und der Spaltenbreiten
  • Innerhalb der Basiselemente können Subtemplates, sowie Dummy-Inhaltselemente per Drag & Drop eingefügt sowie ineinander verschachtelt werden
  • Ansicht und Ausgabe (per Kopie ins Clipboard) des vollständigen XTHML-Markups
  • Ansicht und Ausgabe (per Kopie ins Clipboard) des der relevanten CSS-Regeln für basemod.css sowie das IE-Patch-File
  • Umschaltmöglichkeit zwischen dem Entwurfsmodus und einer Voransicht des fertigen Layouts

Ein klein wenig stolz bin ich insbesondere auf die Möglichkeit des Hinzufügens bzw. des Verschachtelns von zusätzlich in das Layout eingefügten Elementen. Wer sich beispielsweise ein Bild über die Leistungsfähigkeit der Subtemplates machen möchte, dem empfehle ich, die Content-Spalten mal komplett abzuschalten und ein Layout aus frei verschachtelten Subtemplates zu erstellen. Also mir hat das bisher riesigen Spaß gemacht.

Eine ganze Menge für den Anfang. Ich bitte daher ausdrücklich um Feedback (Meinungen, Bug-Hinweise, Verbesserungs- und Erweiterungsvorschläge). Bedanken möchte ich mich in diesem Zusammenhang bei den drei Javascript-/jQuery-Göttern Timo Derstappen, Dirk Ginader und Tom Klingenberg, die sich meine Fragen zu unmöglichen Zeiten angehört und sich mit mir zusammen das Hirn zermartert haben.

Voll Funktionsfähig sollte der YAML Builder unter Firefox, dem IE7, Opera 9 und dem Safari 3 sein.  Im Safari 2.x gibts wohl derzeit noch ein kleines Problem mit den Tab-Reitern aber dieses Problemchen muss zunächst warten. Für das Kopieren des Quellcodes ins Clipboard verwende ich eine kleine Flash-Hilfe, was jedoch in 99% der Fälle installiert sein sollte. Ach ja, liebe Firmenadmins - Javascript sollte man anschalten, sonst geht da nix.

Also dann, viel Spaß beim Klicken.


Mittwoch01. August 2007

cssneustart.de hat es sich auf die Fahnen geschrieben, das deutsche Äquivalent zum cssreboot.com zu werden. Die Idee hatten die vier Jungs bereits vor einigen Monaten, der offizielle Start war für den 1. Juli geplant, musste jedoch kurzfristig auf den 1. August verschoben werden. Nun ist die Seite zwar bereits seit einigen Tagen online, der offizielle Start ist jedoch heute denn seite heute morgen sind die ersten 41 Neustartwilligen mit Ihren Layouts zu bewundern und zu bewerten.

Hintergrund der Aktion ist es, Beispiele für Modernes Webdesign zu zeigen (und zwar vom Hobbybastler bis zum Profi) sowie das Verständnis für Webstandards und Barrierefreiheit in Deutschland zu wecken. Mit dieser Motivation sind die vier angetreten und daher gilt es sie in aller Form zu unterstützen.

Ich bin mit YAML übrigens einer der Neustart-willigen, denn ursprünglich hätte der Start von Neustart.de und die Veröffentlichung von YAML 3 auf dem 1. Juli gelegen. Aber wie es so ist - Verzögerungen gehören zum Spiel - und davon lassen wir uns alle den Spaß an der Sache nicht verderben.

Bleibt mir nur noch, dem Projekt viel Erfolg, viele willige Neustarter zu wünschen. Ich stöbere jetzt jedenfalls erstmal die Liste durch ...


Seite 8 von 9 Seiten

« Erste  <  6 7 8 9 >