PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Templates vs. CSS


Flipper
2006-05-15, 17:18:07
Hallo!
Ich schreibe gerade an meiner Bakkalaureatsarbeit über die verschiedenen Vorgehensweisen zur Erstellung eines CMS (manuelle vs. Web-Frameworks), und füge da einen Absatz über CSS vs. Templates ein. Was mich interessiert ist eure Meinung, es kann und soll natürlich gerne auch über das Thema diskutiert werden!

-----------------------
Templates vs. CSS
CSS dient - genauso wie Template-Engines - der Trennung von Inhalt und Aussehen. In der Vergangenheit war durch mangelnde Browser-Unterstützung oder Browser-Bugs die durchgängige Verwendung von CSS sehr erschwert worden. Vor allem der Internet Explorer spielt hier eine "Vorreiter-Rolle" im negativem Sinn - die Stichworte Box-Model Bug, Darstellung transparenter PNG-Grafiken oder Microsoft-eigene Pseudo-Standards sind wohl jedem Web-Entwickler ein Begriff, der die Emotionen hochgehen lässt.
Mittlerweile hat sich aber CSS trotz Interventionen seitens Microsoft durchgesetzt. Browser-Weichen ersetzen heutzutage die früher verwendeten CSS-Hacks, die bewusst Fehler des Internet Explorers benutzten, um fehlerhafte Darstellungen zu korrigieren. Auch in dieser Web-Applikation war der Einsatz von Browser-Weichen in Form einer separaten Stylesheet-Datei notwendig:

<![if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]/>

Dieser Code ist noch nicht die optimale Lösung. Browser-eigene Anweisungen in Kommentaren zu verstecken ist aber trotzdem die mit Abstand eleganteste derzeit mögliche Form, dieses Problem zu umgehen. Es kann auch auf spezifische Internet Explorer-Versionen eingegangen werden, was allerdings nicht notwendig war.

Der durchgängige Einsatz von CSS ist heute - nicht zuletzt aufgrund dieser Browser-Weichen - möglich, und die Unterstützung von CSS wird im Internet Explorer 7 laut Microsoft deutlich verbessert werden, was auch höchste Zeit ist. Die Internet-Seite Zen-Garden[1] ist das beste Beispiel für die Trennung von Inhalt und Layout mittels CSS. Es zeigt, welche komplett unterschiedlichen Layouts mit einer identisch bleibenden HTML-Datei
möglich sind, indem nur verschiedene StyleSheets verwendet werden. Das Layout dieser Seite ist noch dazu Cross-Browser-kompatibel. Das ist meiner Meinung nach der richtige Weg in die Zukunft, und macht nebenbei den Einsatz einer Template-Engine im herkömmlichen Sinn überflüssig. Ein Unterschied zu durchschnittlichen Template-Engines existiert noch: Der Layout-Designer kann nicht mehr entscheiden, ob eine Aufzählung beispielsweise als Liste oder als Tabelle ausgegeben werden soll - dies ist ab sofort Aufgabe des Programmierers. Dieser muss sich dann auch um die Ausgabe in zB Tabellenform kümmern, was aber gleich viel Aufwand ist wie die Erstellung des entsprechenden Template-Codes.

Der Designer braucht nicht mehr die HTML-Datei editieren, sondern kann sich ausschließlich auf die CSS-Datei konzentrieren. Um dies möglich zu machen müssen allerdings auch alle Elemente in der HTML-Datei ordnungsgemäss mit Verweisen auf CSS-Klassen
oder ID's gekennzeichnet sein.

-----------------------

Was sagt ihr dazu?

darph
2006-05-15, 18:44:51
Ich glaube, daß du Templates nicht mit Style Sheets vergleichen kannst. Oder solltest. Eine Templateengine definiert nicht das Aussehen. Ein Template definiert die Struktur. Wie diese dargestellt wird, übernimmt dann das Style Sheet. Idealerweise schreibt man die Struktur, also das HTML Gerüst, nicht mit einem bestimmten Design im Hinterkopf, sondern so, wie es logisch und strukturell am sinnvollsten ist. Zu diesem Zeitpunkt stellt man idealerweise (jaja, Theorie ist grau und die Praxis ist ein schwarzes Loch) keinerlei Überlegungen über die visuelle Darstellung der Daten an. Das macht ausschließlich der CSS Designer. Bereits vor Beginn des Designens schon den Code mit DIVitis (http://de.wikipedia.org/wiki/Divitis) zu verseuchen ist zwar beliebt, weil später bequemer, aber eigentlich der falsche weg, weil hier der Sinn und Zweck von Trennung von Layout und Logik quasi ad absurdum geführt wird.

Ein Template trennt das Erzeugnis der Daten von deren Repräsentation als Rohdaten. Ein Style Sheet trennt die Repräsentation von der Darstellung.

Die beiden widersprechen sich nicht, sie ergänzen sich.

(Programm) Code http://forum.darph.net/images/smiles/arrow_right.gif Erzeugen von Inhalt
Template http://forum.darph.net/images/smiles/arrow_right.gif (logische) Strukturisierung
Style Sheet http://forum.darph.net/images/smiles/arrow_right.gif Visuelle Darstellung


Abgesehen davon sollte idealerweise der Designer keine oder kaum Klassen oder IDs benötigen, wenn er ordentlich mit den Selektoren umzugehen weiß. Daß das in der Praxis nicht so ganz funktioniert (weil zum Haifisch der IE6 nicht alle Selektoren unterstützt) ist eine andere Geschichte. Aber zumindest würd ich das dann nicht als zwingend vorraussetzen, daß jede Node eine Klasse und/oder ID haben muß.

Und was die Sache mit der Liste und der Tabelle betrifft... eine Aufzählung ist eine Liste. Eine Tabelle herzunehmen, um eine Liste zu implementieren, ist syntaktisch schlicht falsch. Ergo stellt auch dies zumindest theoretisch kein Problem dar.

Kabelsalat
2006-05-15, 19:20:21
Flipper[/POST]']

<![if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]/>


Du solltest dennoch eine Versionsunterscheidung einbauen, da du sonst auf Probleme mit dem IE7 stößen wirst, welcher viele Dinge nun endlich korrekt interpretiert...

MadMan2k
2006-05-16, 13:37:32
Kabelsalat[/POST]']Du solltest dennoch eine Versionsunterscheidung einbauen, da du sonst auf Probleme mit dem IE7 stößen wirst, welcher viele Dinge nun endlich korrekt interpretiert...
also ich verzichte gerade deswegen auf die Versionsüberprüfung - vllt bau ich zum launch vom IE7 auch noch ein Stylesheet ein der auf diesem die Ausgabe korumpiert. ;)

DanMan
2006-05-16, 15:35:40
Der letzte Schrei ist es wohl, nicht allen Browser-Nutzern das gleiche Bild zu bieten, sondern denen, mit einem aktuelleren Browser Mehrwerte zu bieten. Siehe z.B. hier: Graded Browser Support (http://developer.yahoo.com/yui/articles/gbs/gbs.html)

darph
2006-05-16, 15:44:59
DanMan[/POST]']Der letzte Schrei ist es wohl, nicht allen Browser-Nutzern das gleiche Bild zu bieten, sondern denen, mit einem aktuelleren Browser Mehrwerte zu bieten. Siehe z.B. hier: Graded Browser Support (http://developer.yahoo.com/yui/articles/gbs/gbs.html) Ja natürlich. Siehe AJAX.

Aber sowas sollten Gimmicks sein. Sachen, die das Leben einfacher machen. Angenehmer. Wenn ich ein Formular habe, das mit "Your Name Here" vorbelegt ist - dann kann ich doch durchaus JavaScript nutzen, um das beim Anklicken des Formulares schonmal zu löschen - muß der User das nicht machen. Aber: Es kann das Formular immer noch genauso gut nutzen, wenn er kein JS (aktiv) hat.

Was mich zum Beispiel ziemlich nervt, sind viele Game-Websites, die Screenhots so anbieten: <a href="javascript:openScreenshot(irgendwelcheParameter);">Thumbnail</a>
Ganz Schlau. Damit werden nur die Browser unterstützt, die JavaScript unterstützen UND wenn man das nur links anklickt. Und dann öffnet sich ein Tab, das absolut auf dem Bildschirm zentriert ist, nur daß man Browserfenster am Bildschirmrand rumlungert. Muß ich das Bild erst verschieben, damit ich es sehen kann :rolleyes:
Dabei hätte man doch einfach <a onClick="openPic();return false;" href="urlzumbild.jpg"> machen können, dann kann ich das auch mit der Mittleren Maustaste (in neuem Tab öffnen) bedienen.

Man kann durchaus spezielle Methoden verwenden, um dem User das Leben zu erleichtern. Es muß aber auch ohne gehen.

Flipper
2006-05-16, 18:52:23
Danke für die Antworten. Ich hab mich auch noch etwas näher informiert zu diesem Thema, vor allem dieser Artikel hat mir gefallen: http://www.massassi.com/php/articles/template_engines/
Insofern geht's nicht um die Trennung von Inhalt und Layout, sondern um die Trennung von Inhalt, Representation und Layout, wie Darph schon gesagt hat.

schönen Abend noch!