Dienstag25. August 2009

Seit der Version 2.8 bringt Wordpress das neues Template-Tag body_class mit, womit sich verschiedenste Abhängigkeiten und Statusinformationen des CMS als CSS-Klassen an das <body> Element heften lassen, um mittels CSS im Layout darauf reagieren zu können.

<body <?php body_class(); ?>>

Leider ist die Implementation dieser interessanten und nützlichen Funktion in Wordpress eher unglücklich gelöst. Die Jungs von WPEngineer haben bereits im Februar vorbildlich darüber informiert, welche Klassennamen das Tag ins Markup rendert. Darunter befinden sich zahlreiche allgemein gebräuchliche Klassenbezeichnungen wie:

  • archive
  • author
  • blog
  • category
  • date
  • home
  • page
  • search
  • tag

Das Problem bei der Verwendung derart gebräuchlichen Bezeichnungen sind fast zwangsläufig Kollisionen bei der Implementation bestehender CSS-Layouts in Wordpress. Gerade heute habe ich eine Mail zu diesem Thema bekommen:

Man kann sich ja mittlerweile im BODY-Tag CSS-Klassen einfügen lassen je nachdem welcher Typ von Seite aktuelle von WordPress ausgegeben wird. Dabei gibt es auch die Klasse “page” für die Seiten in WordPress. Resultat ist, dass sich das dann mit der Klasse “page” aus YAML überschneidet.

Ich kann im Moment froh sein, dass es nur eine CSS-Klasse von YAML trifft. Schon innerhalb dieses Bloglayouts hier – würde dieses Blog mit Wordpress laufen – würden weitere Klassenbezeichnungen kollidieren, denn ich verwende in meinem Bloglayout auch Klassenbezeichnungen wie “date” oder “category”. Nur sind diese Klassen in meinem Layout nicht dafür gedacht, an das body-Element geheftet zu werden. Nun könnte ich mein CSS-Framework YAML in einer nächsten Version natürlich anpassen, um der Kollision aus dem Wege zu gehen, aber ich halte dies für den falschen Weg, denn die Welt dreht sich nicht um Wordpress und YAML ist nicht allein von diesem Problem betroffen. Wordpress als Blogtool oder CMS sollte eigenständig kein Markup generieren (soweit die graue Theorie) und es sollte ebenso die Implementation bestehender Layouts nicht durch die Kollision von Klassennamen unnötig erschweren.

Ein relativ einfacher und unkomplizierter Lösungsweg heisst: Namespacing. Wordpress könnte allen dynamisch ins Markup generierten CSS-Klassen das Kürzel “wp-” voranstellen (oder dieses sogar im Backend konfigurierbar machen). Bei anderen Content Management Systemen (Bsp: TYPO3) kommt dieses Verfahren bei den meisten Extensions zum Einsatz. Auf diese Weise ließen sich die angedeuteten Probleme leicht vermeiden, während die durchaus sinnvolle Funktionalität weiterhin uneingeschränkt verfügbar bleibt. Leider bin ich selbst zu wenig bewandert in PHP und auch nur ein Gelegenheitsnutzer von Wordpress, dennoch hoffe ich, dass diese Idee auf irgendeinem Kanal an das Entwicklerteam herangetragen wird.

 


Freitag14. August 2009

Es folgt mal wieder eine Bug-Beschreibung. Firefox hat aktuell ein ausgesprochen hässliches Problem in Verbindung mit CSS Tabellen und JavaScript. Die Kombination der beiden führt in einigen Fällen zu groben Renderingfehlern wobei einzelne Zellen einer Tabellenzeile scheinbar willkürlich in eine neue Zeile umgebrochen werden.

Das Rendering der CSS-Tabellen funktioniert prinzipiell, es ist also kein einfacher CSS-Bug. Ich verwende diese Technik in YAML zur Erstellung gleichhoher Container per CSS. Das eigentlich perverse an diesem Bug - er ist extrem schwer nachvollziehbar. Ich habe die CSS-Tabellen mittlerweile in mehreren Real-Live-Situationen ausprobiert und dabei bereits im Winter erstmals Bekanntschaft mit diesem Bug gemacht. Allerdings war die Fehldarstellung meist nach einem Reload oder auch nur dem Versuch eines Elementchecks mit Firebug verschwunden. Die Ursachenfindung hat das extrem erschwert. Erst vor einigen Wochen hat dann im YAML-Forum ein User einen weiteren Tipp beigesteuert, der letztlich einen Testcase ermöglichte.

Gestern Abend habe ich mich nochmals hingesetzt und endlich einen - zumindest bei mir - funktionierenden Testcase erstellt, sowie den Bug bei Bugzilla gemeldet (Bug 510350) . Die Einzelheiten zum Wie und Warum sind übrigens im Testcase ausführlich beschrieben.

Im Testcase wird der Bug durch eine fast leere Script-Node getriggert, wobei diese hier direkt im HTML-Code der Tabelle steht. Es ist die einzige halbwegs verlässliche Möglichkeit, den Bug zu erzwingen, die ich kenne. In meinen Real-Life-Layouts reichte meist schon die pure Anwesenheit von JavaScript in Form von jQuery oder sonstigem.

Und abschließend: Dieser Bug ist derart fies, dass sein Auftreten auf wundersame Weise sogar vom Dateinamen des Testcases beeinflusst wird. Auf meinem lokalen Rechner tritt der Bug - genau wie in der Netzversion - sporadisch auf. Wenn ich den Testcase jedoch in “index.html” umbenenne, wird er plötzlich permanent getriggert. Das verstehe wer will. Ich hoffe daher, die Mozilla-Jungs finden und eleminieren die Ursache möglichst schnell.


Donnerstag06. August 2009

Im Verlauf der letzten Wochen habe ich mir mal die Mühe gemacht, die über die vergangenen Jahre angehäuften Links zu YAML-basierten Entwicklertemplates, Online-Tutorials ect. zu sichten, um demnächst den Community-Bereich auf YAML.de etwas auffrischen zu können. Und bei der Zusammenstellung der nachfolgenden Liste ist mir dann auch aufgefallen, dass es mittlerweile für 23 Content-Management-Systeme fertige Implementationen oder zumindest Hilfestellungen durch Onlinetutorials gibt.

Deshalb an dieser Stelle ein ganz dickes Dankeschön an alle Autoren. Ich veröffentliche diese “kleine Ressourcensammlung” zunächst hier in meinem Weblog mit der Bitte, sie bei Unvollständigkeit über die Kommentare weiter zu ergänzen. Vielleicht habe ich ja doch die eine oder andere Arbeit übersehen das soll der Aufnahme in diese Liste nicht im Wege stehen. Mit dem nächsten Release werde ich die Ressourcensammlung dann auch direkt auf YAML.de verfügbar machen.

Templates / Themes / Online-Tutorials

Entwicklertools


Seite 1 von 1 Seiten