Wofür HTML-Inspektoren gut sein können [Update]
Mannomann, beim Herumschlagen mit Joomla habe ich kurzzeitig an meinen CSS-Kenntnissen gezweifelt, und dann haben ein paar HTML-Inspektoren mich komplett an allem zweifeln lassen – und dann fand ich die Lösung.
Momentan baue ich für ein anderes Projekt eine neue Homepage auf, und zwar mit dem CMS Joomla. Die Arbeit besteht daraus, mir den Code anzuschauen, den Joomla rauswirft, und dann mit CSS so zu formen, wie ich das haben will. (In die Tiefen der Template-Programmierung bin ich nur für die Startseite eingestiegen.)
Heute waren Bilder in Artikeln dran, die Joomla einfach als <img align="right"> (bzw. left) einfügt. Da kam ich ja im Stylesheet prima per img[align=right] (bzw. left) ran, und ich hatte mich schon gefreut, dass das alle aktuellen Browser unterstützen. Doch dann kamen die Bilder mit Bildunterschrift. Joomla fügt die Unterschriften ein, indem obiges IMG-Tag um class="caption" title="Bildunterschrift" erweitert. Schon beim ersten Anschauen wunderte mich, dass alle aktuellen Browser den Titel tatsächlich unter dem Bild anzeigen, das war mir neu. Doch dann schlugen sämtliche Versuche fehl, den Kram im CSS per img.caption anzusprechen. Umliegende Schrift lief in den padding-Rahmen, die clear-Versuche lieferten seltsame Ergebnisse, und formatieren ließ sich die Bildunterschrift schon gar nicht. Ich fühlte mich wie zu meinen CSS-Anfangszeigen, als ich nix raffte und kannte und bei den damaligen Browsern eh nur die Hälfte des Verstandenen funktionierte. Aus lauter Frust bin ich dann erstmal für drei Lost-Folgen aufs Rudergerät gestiegen, hat auch gut getan.
Dann habe ich mal gezielt die Bildunterschrift mit den HTML-Inspektoren angeschaut, die Safari und Chrome mitbringen (einfach auf Rechtsklick, sehr elegant). Und häääh, das hab ich ja noch weniger verstanden: Dort stand auf einmal ums img herum ein <div class="img_caption right" style="float:right; width:..."> mit noch einem <p>Bildunterschrift</p></div>. Zuerst dachte ich, Safari und Chrome machen das irgendwie automatisch als eine Art Pseudoklasse, um den Titel darzustellen, ich kümmerte mich nicht weiter drum und kümmerte mich im CSS um img_caption und right – das klappte dann auch alles wie erwartet und erklärte auch das seltsame Verhalten der img-Formatierung. Doch oh Wunder, das klappte sogar bei Opera, Firefox und IE8. Und das konnte ich mir wiederum nicht erklären. Nicht standardisiertes Pseudozeugs, das alle fünf gleich implementieren? Aber ich war ratlos: Auf welche Art auch immer ich mir den Quellcode anschaute, überall war nur das einfache img-Tag vorhanden, keine Spur vom div.
Nun war ich komplett verwirrt. Wie kann das sein? Wie kann der HTML-Inspector Elemente anzeigen, die im Quellcode gar nicht vorhanden sind? Was geht da ab? Bei der Google-Suche nach "img_caption" kam ich dann langsam drauf, denn fast alle Treffer bezogen sich auf Joomla, und zwar ging es meist um die Frage, wie man die Bildunterschriften formatiert. Aber nach dem Erzeugen des Quellcodes kommt Joomla doch gar nicht mehr zum Zuge... Oder vielleicht doch? Und dann hab ich mal in den Header geschaut, und tatsächlich: Da wird ein Javascript mit Namen /media/system/js/caption.js aufgerufen, das alle Bilder durchgeht und mit ihnen diese Manipulation durchführt. Was für ein Gemurkse. Das erklärt immerhin, warum ich beim Laden der Seite den Eindruck hatte, dass die Bilder kurz an der richtigen Stelle stehen und sich dann an die falsche bewegen. Aber Murks. Interessant ist der Code ja schon, wie er die Elemente so manipuliert, gut mal gesehen zu haben, wie das geht. Trotzdem Murks.
[Update]Und unter Opera gehts sogar schief: Wenn ich den Bildern ohne Bildunterschrift einen Rand zuordne, wird dieser der Breite des Bilds schon vor Ausführung des Javascripts zugewiesen, sodass der width-Parameter zu hoch ist, nämlich inklusive Rand. Das hätte ich ohne den HTML-Inspector von Opera NIE herausgefunden (nicht ganz so elegant: Extras / Weiteres / Entwicklerwerkzeuge). Ich muss also einen CSS-Code einfügen, der den Rand wieder löscht, und der zu einem Zeitpunkt funktioniert, wenn die neuen Tags noch nicht eingefügt sind, sodass also irgendwas mit img_caption nicht funktioniert. Die Lösung ist relativ einfach: img[class=caption] {padding:0;}, aber habe ich schon erwähnt, dass das irgendwie doch Murks ist...[/Update]
Wie soll man per CSS denn an Elemente rankommen, die man im Quellcode gar nicht findet? Das ist doch Obermurks. Schon bisher hatte ich den Eindruck, dass Joomla eine eher grässliche Mischung aus uraltem Tabellen-Layout, unelegantem CSS-Gehumpele der ersten Generation und Ansätzen von modernem CSS ist, das vermutlich nur dann guten Code raushaut, wenn man praktisch alle Komponenten komplett neu schreibt. Und dieses Caption-Gemurkse bestärkt mich in dieser Ansicht. Wie soll man das alles ohne HTML-Inspector überhaupt herausfinden? Die Dinger scheinen mir mit die wichtigste Errungenschaft moderner Browser überhaupt zu sein – also jetzt aus Entwicklersicht.
PS: Dieses Projekt ist die Homepage meiner World-of-Warcraft-Gilde, momentan hier zu finden (mit meinem alten Offline-CMS erstellt), die provisorische Joomla-Page gibts unter dieser Adresse zu betrachten. Der Grund, Joomla zu nehmen (statt wie hier ExpressionEngine war, dass die Seite auch zur Mitarbeit von Gildenmitgliedern geeignet sein sollte, und da dachte ich, dass Joomla aufgrund der großen Verbreitung und dadurch umfangreichen Dokumentation die bessere Wahl wäre als das ja relativ unbekannte EE. Wenn ich damals über Joomla gewusst hätte, was ich jetzt weiß, hätte ich vermutlich doch EE genommen und den Gildenleuten halt zugemutet, sich in deren Backend einzuarbeiten. Naja, jetzt ists zu spät...
Weitersagen:
