CSS Klassen für Module

[okapi]

Ich habe eine Frage zu den CSS Klassen von Modulen.
Zum Beispiel beim Login-Modul sehe ich folgende CSS-Klassen-Definition:

<div class="mod_login one_column tableless logout block">

Dies ist also eine Kombination von fünf einzelnen Klassen. Meine unbedarfte Frage: welchen Sinn macht dies?

Eine weitere Frage: gibt es eine Liste der von Modulen verwendeten Klassen?

Michael

[christian]

Hallo Michael,

Frage: welchen Sinn macht dies?

Durch die Kombination kannst Du sehr viele Formatierungen für sehr viele Anwendungsfälle erzeugen, ohne die Templates anpassen zu müssen. Das ist Teil des TL-Frameworks.

Hier bedeutet z.B. "mod_login", das es zum Login-Modul gehört, das Subtemplate "one_column" nutzt und "tableless" angelegt ist. Wenn Du dazu passende Css hast - bingo.

Eine weitere Frage: gibt es eine Liste der von Modulen verwendeten Klassen?

Keine vollständige, da jede Erweiterung ja ihre eigenen Definitionen mitbringt. In der Doku findest Du unter "Inhaltselemente", "Nachrichten" etc. viele Standard-Templates. Du brauchst aber auch nur in den Quelltext zu sehen, dann erkennst Du den Aufbau des jeweiligen Templates des Moduls oder Contentelements.

Grüße,

Christian

[Nina]

Hier gibt es für einige der Kernmodule die Auflistung der CSS Klassen und IDs. Ich empfehle aber einfach die Nutzung von Firebug, da du damit sehr einfach die Abhängigkeiten und Klassen herauslesen kannst.

[okapi]

Durch die Kombination kannst Du sehr viele Formatierungen für sehr viele Anwendungsfälle erzeugen, ohne die Templates anpassen zu müssen. Das ist Teil des TL-Frameworks.

Hier bedeutet z.B. "mod_login", das es zum Login-Modul gehört, das Subtemplate "one_column" nutzt und "tableless" angelegt ist. Wenn Du dazu passende Css hast - bingo.

Hallo Christian,
das ist sehr praktisch und leuchtet mir ein. Aber, um beim Beipiel Login-Modul zu bleiben, welche CSS Attibute könnte ich denn einer Klasse "one_column", "tableless", "logout" oder "block" zuweisen, um daraus einen praktischen Nutzen zu ziehen?

Gruß
Michael

[okapi]

Hier gibt es für einige der Kernmodule die Auflistung der CSS Klassen und IDs. Ich empfehle aber einfach die Nutzung von Firebug, da du damit sehr einfach die Abhängigkeiten und Klassen herauslesen kannst.

Hallo Nina,
ich nutze Firebug schon lange, ist ein tolles Werkzeug um CSS zu analysieren und Vererbungen festzustellen. Aber deine Auflistung ist besonders für TYPOlight-Beginner äusserst nützlich, danke für den Link! Vielleicht zieht ihr ja in Erwägung, dies in die Dokumentation aufzunehmen, für die vom Core-Team entwickelten Module?

Gruß
Michael

[christian]

Hallo Michael,

Du kannst beispielsweise alles festlegen, was sich auf alle Spielarten des Login- Moduls bezieht ("mod_login"), aber unterscheiden, ob es sich um das 1- oder 2-spaltige Layout handelt. "block" wird vom Framework benutzt - guck mal in die Systemdatei typolight.css.

Ich weiss nicht, wie Du das machst, aber ich formatiere immer vom Globalen zum Detaillierten durch und brauche dafür sehr oft Mehrfachklassen. Bsp:

h1 { font-weight:bold; }
#left h1 {color:#808080;font-size:12px;}
#main h1 {color:#ff0022;font-size:18px;}
#right .mod_login h1.malwasanderes {text-decoration:underline;}

Fakt ist, ohne diese Systematik müsste man viel mehr an den Templates schrauben als das jetzt der Fall ist. Du musst ja nicht alle Angaben nutzen.

Grüße,

Christian

[okapi]

Das wird mir jetzt klarer. Diese umfangreiche Klassifizierung ermöglicht also sehr detailierte Formatierungen ohne an den Modultemplates schrauben zu müssen. Herzlichen Dank für die Erläuterungen!

Gruß
Michael

[christian]

Genau! Gern geschehen

[okapi]

Ungeachtet sicher längst geführter Diskussionen über Klassen-Kombinationen und Browserkompatibilität möchte ich hier der Vollständigkeit halber dennoch anmerken, dass dieser Ansatz von TYPOlight zwar zukunftsweisend ist, zur Zeit aber bekannterweise Fehldarstellungen im Internet Explorer 6 nach sich zieht.
Auch wenn wir IHN alle noch so gern weg hätten, ich trau mich auch im Jahr 2009 für keinen Kunden eine Website zu erstellen, die den IE6 ignoriert. Es mag fortschrittlich sein, seine eigenen Seiten so zu fahren - versehen mit entsprechenden Hinweisen und Erklärungen, aber bei Kundenprojekten ist diese Einstellung einfach nicht haltbar. Noch nicht.
Insoferne sind diese Klassenkombinationen zur Zeit für mich noch nicht einsetzbar.
Ich sähe ihn auch schon gerne als Relikt der Vergangenheit...
http://hyperkontext.at/weblog/artike...n_kombinieren/

Gruß
Michael

[christian]

...zur Zeit aber bekannterweise Fehldarstellungen im Internet Explorer 6 nach sich zieht.

Das sehe ich gleich doppelt anders.

Erstens kannst Du auch mit den im Quelltext stehenden Mehrfachklassen problemlos IE6-kompatible Seiten erstellen. Es zwingt Dich ja niemand, Formatierungen einzusetzen, die der IE6 nicht versteht bzw. falsch interpretiert. Sicherlich wird man oft nicht um eine ie6fixes.css oder sowas herumkommen, aber es geht prima. Sehr viele TL-Seiten machen im IE6 überhaupt keine Probleme.

Zweitens finde ich sehr wohl, dass man auch in Kundenprojekten darauf verzichten kann. Und sollte. ich schreibe seit Monaten in allen Angeboten ganz klar "Eine gesonderte Optimierung für den IE 6 erfolgt nicht.". Spätestens, wenn ich dem Kunden mitteile, dass eine Optimierung für einen 8 Jahre alten Browser den Preis für die Website - trotz ggf. vorhandener Nicht-Funktionalität - exorbitant in die Höhe treibt, ist Ruhe im Karton. Denn klar ist auch: Wenn der Kunde das möchte, muss er es bezahlen.

Wenn es genug Webworker gibt, die IE6 nur noch gegen Aufwand berücksichtigen, gibt es eine Chance, ihn bald loszuwerden. Und nur dann. Kollegen - packt den IE6 in die Mottenkiste!

Grüße,

Christian

[Stephan]

Hallo Michael,

ich sehe das ähnlich wie Christian. Damit eine Seite auch noch im IE6 gut aussieht hängt ganz allein vom CSS ab, für das man selbst verantwortlich ist. Kennt man die Lücken und Tücken des IE6 – und das sollte man in dem Falle – sieht eine in TYPOlight erstellte Website sogar browserübergreifend gleich aus! Je nach Umfang kostet es dann allerdings mehr oder weniger Zeit. Man sollte ein Fehldarstellung im IE6 also nicht auf TYPOlight schieben, denn der generierte HTML-Quellcode ist W3C-konform.

Dann möchte ich noch kurz auf deinen Link von hyperkontext.at eingehen. Dort werden Klassen im Stile von .class1.class2.class3 aneinandergekettet. Das hat gleich zwei Nachteile: zum einen der IE6 versteht es nicht, was immer mehr zu vernachlässigen ist und zum anderen bremst es die Geschwindigkeit, was viel wichtiger ist. Je weniger Selektoren man für eine Deklaration verwendet desto performanter ist das ganze. Es gab da vor einiger Zeit mal einen Artikel von Ingo Chao dazu, den ich leider just nicht finden kann. Unter Verwendung des Firefox Plugins Google Page Speed werden zu viele benutze Selektoren auf einmal übrigens auch angemeckert.

Vielleicht verstehe ich dich auch falsch, aber ich glaube du wirfst da außerdem zwei unterschiedliche Dinge in einen Topf bzw. verwechselst da etwas. Eine Mehrfachvergabe von Klassen wie es z.B. in TYPOlight mit <div class="mod_login one_column tableless logout block"> gemacht wird, hat nichts mit einer Verkettung von Selektoren im CSS-Code (s.o.) zu tun. Die Mehrfachvergabe erlaubt es lediglich, das <div> mittels verschiedener Klassen anzusprechen und das versteht auch der IE6!

[okapi]

Eine Mehrfachvergabe von Klassen wie es z.B. in TYPOlight mit <div class="mod_login one_column tableless logout block"> gemacht wird, hat nichts mit einer Verkettung von Selektoren im CSS-Code (s.o.) zu tun. Die Mehrfachvergabe erlaubt es lediglich, das <div> mittels verschiedener Klassen anzusprechen und das versteht auch der IE6!

Danke für dein Eingehen auf meine Zweifel... möglicherweise verstehe ich da was falsch. Wenn ich das Beispiel des Login-Modul nehme: wozu dienen denn fünf einzelne CSS_Klassen, wenn nicht dazu, dadurch konkrete Eigenschaften zu definieren?
Also, ".mod_login.block {margin-bottom:30px;} gilt nur für die "block"-Klasse des Login Moduls und nicht für andere "block"-Klassen.
Das sind doch Mehrfachklassen?
Bitte gib mir ein Beispiel für die Verwendung dieser Klassen ohne Verkettung, welche der IE6 ja nicht versteht.

Michael

[okapi]

Das sehe ich gleich doppelt anders.

Erstens kannst Du auch mit den im Quelltext stehenden Mehrfachklassen problemlos IE6-kompatible Seiten erstellen. Es zwingt Dich ja niemand, Formatierungen einzusetzen, die der IE6 nicht versteht bzw. falsch interpretiert. Sicherlich wird man oft nicht um eine ie6fixes.css oder sowas herumkommen, aber es geht prima. Sehr viele TL-Seiten machen im IE6 überhaupt keine Probleme.

Zweitens finde ich sehr wohl, dass man auch in Kundenprojekten darauf verzichten kann. Und sollte. ich schreibe seit Monaten in allen Angeboten ganz klar "Eine gesonderte Optimierung für den IE 6 erfolgt nicht.". Spätestens, wenn ich dem Kunden mitteile, dass eine Optimierung für einen 8 Jahre alten Browser den Preis für die Website - trotz ggf. vorhandener Nicht-Funktionalität - exorbitant in die Höhe treibt, ist Ruhe im Karton. Denn klar ist auch: Wenn der Kunde das möchte, muss er es bezahlen.

Wenn es genug Webworker gibt, die IE6 nur noch gegen Aufwand berücksichtigen, gibt es eine Chance, ihn bald loszuwerden. Und nur dann. Kollegen - packt den IE6 in die Mottenkiste!

Grüße,

Christian

Christian, ich teile deine Meinung, es ist wohl auch eine Frage des Mutes, solche Bedingungen an seine Kunden zu stellen
Ich muss dir aber sicher nicht erzählen, wie wenig Einblick/Verständnis von Seiten eines Anwenders diesbezüglich zu erwarten ist.

Wie ich Mehrfachklassen für die Darstellung im IE6 verwirklichen kann, wüsste ich natürlich gerne. Kannst du mir da ein Beispiel geben?

.klasse01.klasse02 {border:1px solid #990000;}

Michael

[Stephan]

Klassen können ja im Vergleich zu IDs mehrfach vergeben werden. So geschieht das auch in TYPOlight. Z.B die Klasse .block wirst du bei vielen Elementen wiederfinden. Und hier liegt auch schon der Vorteil der Mehrfachvergabe von Klassen: die Modularität. Du definierst in deinem Stylesheet einmal die Klasse .block { overflow: hidden; } und kannst sie auf alle Elemente anwenden, die diese Overflow-Eigenschaft besitzen sollen. Möchtest du außerdem, dass das Login einspaltig sein soll, so wird zudem noch die Klasse .one_column vergeben, usw. Das Gute daran ist, dass man so nicht für jedes Element eine neue Definition ins Stylesheet schreiben muss und die Datei größer und größer wird sowie die Webseite immer langsamer und langsamer.

Diese Definition .mod_login.block {margin-bottom:30px;} – man beachte: kein Leerzeichen zwischen den Selektoren – macht in meinen Augen wenig Sinn (genau wie generell alle Verkettungen). Würde man stattdessen .mod_login .block {margin-bottom:30px;} – hier nun mit Leerzeichen – benutzen, so würde es bedeuten, dass nur die Klasse .block innerhalb des Elements mit der Klasse .mod_login angesprochen würde. Andere Elemente mit .block würden davon nicht betroffen sein. Der springende Punkt ist wie gesagt das Leerzeichen! Für den IE6 solltest du die Selektoren nicht ohne LZ verketten, sondern reihe sie mit LZ aneinander. Oder anders ausgedrückt, gib ihnen eine Hierarchie.

Ein zugegeben nicht sehr sinnvolles Beispiel könnte so aussehen (bitte nicht nutzen, soll nur zum Verdeutlichen sein):

html body .mod_navigation ul li a { color: #f00; }

Kürzer könnte man es auch so schreiben:

.mod_navigation a { color: #f00; }

In beiden Fällen bekommt das <a>-Tag, also der Link, innerhalb des Navigationsmoduls eine Farbe. Im ersten Fall wird der Link nur präziser definiert: Der Link <a> innerhalb des Listenelements <li> innerhalb der Liste <ul> innerhalb des Elements mit der Klasse .mod_navigation innerhalb von body innerhalb von html. Ich hoffe, du verstehst, worauf ich hinaus will.

Wenn es immer noch nicht ganz klar ist oder ich deine Frage nicht genau beantwortet habe, dann versuch ich es gern auch noch ein weiteres Mal.

[okapi]

Würde man stattdessen .mod_login .block {margin-bottom:30px;} – hier nun mit Leerzeichen – benutzen, so würde es bedeuten, dass nur die Klasse .block innerhalb des Elements mit der Klasse .mod_login angesprochen würde. Andere Elemente mit .block würden davon nicht betroffen sein. Der springende Punkt ist wie gesagt das Leerzeichen! Für den IE6 solltest du die Selektoren nicht ohne LZ verketten, sondern reihe sie mit LZ aneinander.

Hallo Stephan,
leider funktioniert das nicht (Firefox 3.5.2).
.mod_login .block {margin-bottom:30px;} zeigt keinerlei Wirkung,
.mod_login.block {margin-bottom:30px;} schon.

Gruß
Michael

[Stephan]

Mein Beispiel oben sollte dir nur die Unterschiede aufzeigen ohne auf den Vorhaben genauer einzugehen. Es war deswegen allgemein gehalten.

Damit deinem Wunsch entsprechend das Login-Modul einen unteren Abstand bekommt, sollte deshalb das hier ausreichen:

.mod_login { margin-bottom: 30px; }

Die Klasse .block benötigst du in der Zuweisung gar nicht, genauso wenig wie .one_column, .tableless oder .logout. Je simpler, desto besser.

[okapi]

Vielen Dank,
so hab ich's dann auch gemacht!

Gruß
Michael