Externe Css Datei platzsparend definieren!?

[Curry]

Moin moin
Ich habe folgendes in meiner CSS Datei stehen wobei ich fest davon ausgehe dass es möglich ist die zweite CSS Definition als Zusatz von der ersten zu benutzen:

.textformat_fenster_titel
       {
 text-transform: uppercase;
 padding-top: 2px;
 font-size: 12px;
 color: ffffff;
       }

.textformat_fenster_titel_center
       {
 text-transform: uppercase;
 padding-top: 2px;
 font-size: 12px;
 color: ffffff;
 text-align: center;
       }

Im zweiten CSS-Tag wurde lediglich das
text-align: center;
hinzugefügt.

Mein HTML-Tag siegt folgendermassen aus
<td class="textformat_fenster_titel" ......</td>
und
<td class="textformat_fenster_titel_center" ......</td>

Könnte ich nicht anstatt

.textformat_fenster_titel_center
        {
 text-transform: uppercase;
 padding-top: 2px;
 font-size: 12px;
 color: ffffff;
 text-align: center;
       }

sowas wie

.textformat_fenster_titel.center
        {
        text-align: center;
       }

nehmen und im HTML Queltext eifnach nur den Zusatz center zum eigentliche CSS-Tag einfügen?

Danke für eure Hilfe und alle frohe Weinachten!
Curry

[KD-one]

Hallo Curry,

sowas wie

.textformat_fenster_titel.center
        {
        text-align: center;
       }

nehmen und im HTML Queltext eifnach nur den Zusatz center zum eigentliche CSS-Tag einfügen?

Nein, nicht in der Form, wie du das willst, aber du könntest erstmal kürzere Klassennamen definieren. Es gibt Browser, die auf Unterstriche im Klassennamen allergisch reagieren.
Desweiteren hindert dich nichts daran, obige Formatierung zu definieren und dann beide Definitionen in der Zuweisung zu verwenden.
<td class="klasse1 klasse2"> ......</td>

Gruß

Kurt

[Thomas Luethi]

Hallo,

Könnte ich nicht anstatt
       .textformat_fenster_titel_center { }
sowas wie
       .textformat_fenster_titel.center { text-align: center; }
nehmen und im HTML Queltext eifnach nur den Zusatz center zum eigentliche CSS-Tag einfügen?

Du kannst:
1. Mit Verschachtelungs-Selektoren arbeiten
  .textformat_fenster_titel .center /* beachte den Leerschlag vor dem Punkt */
   => Elemente mit der Klasse "center" die in Elementen
   mit der Klasse "textformat_fenster_titel" enthalten sind.

2. Einem HTML-Element mehrere Klassen geben (Leerzeichen-getrennt)
   <p class="textformat_fenster_titel center">
   (Funktioniert allerdings nicht in Netscape 4, falls Dich das interessiert... :-)

Lies doch nochmal:
http://selfhtml.teamone.de/css/formate/zentrale.htm
http://www.w3.org/TR/REC-CSS2/selector.html

Noch drei Kommentare zu Deinem CSS:

Netscape 4.x hat Probleme mit Klassennamen, die Underscores ("_") enthalten,
deshalb sollte man sie vermeiden, auch wenn sie neuerdings erlaubt sind.

Zur Vordergrundfarbe solltest Du immer auch eine Hintergrundfarbe definieren.

Und "center" als Klassenname finde ich nicht besonders sinnvoll. Erlaubt ist er aber.

Gruesse,

Thomas

[Curry]

Danke funktioniert wunderbar!
Auf Netscape 4.0 läuft hier sowieso nichts von daher werde ich die Unterstriche verwenden die von Apple Rechner übrigens genauso gut akzeptiert werden.
Der Tip, dass man mehrere CSS Definitionen pro HTML-Tag verwenden darf und ich glaube der leztere, die Einstellungen des vorderen bei gleichen Befehlen überschreibt ist sehr gut zu gebrauchen!

@ Thomas
Die Hintergrundfarbe wurde direkt im HTML Tag definiert, ich weiss zwar nicht warum hat aber einen guten Grund gehabt glaube ich ;)

[Thomas Luethi]

Hallo,

Die Hintergrundfarbe wurde direkt im HTML Tag definiert, ich weiss zwar nicht warum hat aber einen guten Grund gehabt glaube ich ;)

Farbgebung ueber HTML ist total veraltet und schlecht.

Du solltest in CSS immer _an der gleichen Stelle_ beide Farben
(Vorder-/Hintergrund) definieren.

Sonst kann es zu "Konflikten" und Problemen kommen,
naemlich dann, wenn ein Browser die eine Angabe/Regel nicht
beruecksichtigt, die andere aber schon.

Oder auch, wenn gar nichts definiert ist, und die
Einstellung des Benutzers zum Einsatz kommt.

Beispiel 1:
Der Benutzer hat die Einstellungen: Weisse Schrift auf dunkelblauem Hintergrund.
Du definierst nur Schriftfarbe dunkelgrau.
=> dunkelgraue Schrift auf dunkelblauem Hintergrund.

Beispiel 2:

body { color:#000000; background-color:#eeeeee; }
div#inhalt>p { color:#dddddd; background-color:#000033; }
p.wichtig { background-color:#330000; }

<div id="inhalt">
  <p>Normaler Absatz... </p>
  <p class="wichtig">Wichtiger Absatz ...</p>
</div>

Wenn nun ein Browser die zweite CSS-Regel nicht versteht,
dann ist der Wichtige Absatz wie folgt gefaerbt:

Vordergrundfarbe: Schwarz #000000 (von body geerbt).
Hintergrundfarbe: Dunkelrot #330000; (aus p.wichtig)

---

Ergaenzend dazu:
"If You Pick One Color, Pick Them All"
http://www.w3.org/2003/07/30-color

Das heisst, wenn man ueberhaupt Farben angibt,
dann sollte man alle Farben angeben, naemlich

• Vordergrundfarbe fuer den normalen Text
• Hintergrundfarbe fuer die ganze Seite
• Vorder- und Hintergrundfarbe fuer die
     verschiedenen Link-Zustaende, mindestens
     fuer besuchte und unbesuchte Links.

Gruesse,

Thomas

[Cyx23]

Hallo,

Ergaenzend dazu:
"If You Pick One Color, Pick Them All"

zunächst hast du natürlich Recht, und es könnte problemtisch sein Farbangaben per HTML und CSS zu mischen.

Ansonsten ist "If You Pick One Color, Pick Them All" (nur) eine Faustregel; auch die manchmal auftretenden Warnungen des W3C Validators sind eben nur Warnungen die Farbangaben erstmal zu überprüfen. Da ist es meist nicht sinnvoll den CSS-Code mit redundanten Angaben wie background-color:transparent zuzumüllen nur um die Warnungen nicht mehr zu erhalten.

• Vorder- und Hintergrundfarbe fuer die
     verschiedenen Link-Zustaende, mindestens
     fuer besuchte und unbesuchte Links.

Gibt es da wahrscheinliche Browsereinstellungen die eine Vererbung der Hintergrundfarbe unterbinden?

Grüsse

Cyx23

[Thomas Luethi]

Hallo,

Da ist es meist nicht sinnvoll den CSS-Code mit redundanten Angaben wie background-color:transparent zuzumüllen nur um die Warnungen nicht mehr zu erhalten.

Es ist nicht nur nicht sinnvoll, es ist gefaehrlich!

Wenn man transparent oder inherit nimmt, geht
man ja davon aus, dass die richtige Farbe
vererbt wird. Und genau darauf kann man
sich nicht verlassen.
Kommt noch dazu, dass einige alte Browser
bei transparent oder inherit irgendeinen
bestimmten Farbton nehmen (z.B. ein
dunkles Gruen oder so). Durch diese Bugs
wird es erst recht zum Gluecksspiel...

• Vorder- und Hintergrundfarbe fuer die
     verschiedenen Link-Zustaende, mindestens
     fuer besuchte und unbesuchte Links.

Gibt es da wahrscheinliche Browsereinstellungen die eine Vererbung der Hintergrundfarbe unterbinden?

Das kann ich jetzt nicht sagen.

Sofern man _nirgends_ andere Farben angibt, duerfte
auch folgendes stabil und zuverlaessig sein:

html, body { color: #000; background: #fff; }
a:link { color: #037; }
a:visited { color: #636; }

Sobald man aber fuer irgendein Element eine Hintergrundfarbe setzt, z.B.
p { color:#fff; background-color:#003; }
und dann einen Link in diesem Element hat:
<p>Blabla <a href="...">Link</a> blabla.</p>
dann hat man ein Problem...

=> Es ist einfach am sichersten, immer beide Farben anzugeben.

Gruesse,

Thomas

[Curry]

Danke erstmal für die Tips, ich werde mir im Nachhinein die Seite nochmal angucken wenn sie fertig ist und unbrauchbare und fehlende Tags entfernen und ergänzen.

Sonst kann es zu "Konflikten" und Problemen kommen,
naemlich dann, wenn ein Browser die eine Angabe/Regel nicht
beruecksichtigt, die andere aber schon.

Es gibt auf der Website die ich Upgrade vielleicht 0.1 % die Netscape 4 und Versionen dadrunter benutzten.
Auf den von mir getesteten Browsern und Rechnern gab es bis jetzt keine Probleme.
Was ich damit sagen will ich werde nicht für 0,1 % oder vielleicht auch 1 % nochmal doppelt soviel Zeit für die Site investieren.

Oder auch, wenn gar nichts definiert ist, und die
Einstellung des Benutzers zum Einsatz kommt.

Ich weiss noch nicht mal wie man die Standard Einstellungen des Browsers umgehen soll wobei ich zu den eher "wissenden" Leuten im Netz und im Umgang mit solchen Software Programmen gehöre.

Farbgebung ueber HTML ist total veraltet und schlecht.

Du solltest in CSS immer _an der gleichen Stelle_ beide Farben
(Vorder-/Hintergrund) definieren.

Mag sein, dass vieles veraltet und schlecht ist aber dann sind auch 99,9 % der Webseiten im Netz veraltet und schlecht.

[Thomas Luethi]

Hallo,

Danke erstmal für die Tips, ich werde mir im Nachhinein die Seite nochmal angucken wenn sie fertig ist und unbrauchbare und fehlende Tags entfernen und ergänzen.

Du solltest _frueh_ im Entwicklungsprozess die Seite gruendlich pruefen,
z.B. mit dem HTML- und dem CSS-Validator des W3C.

Und durch die Trennung von Struktur/Inhalt (HTML) und Layout (CSS)
tust Du Dir selbst einen Gefallen.
Wenn Du es richtig machst, kannst Du damit richtig viel Zeit sparen.

Es gibt auf der Website die ich Upgrade vielleicht 0.1 % die Netscape 4 und Versionen dadrunter benutzten.

Es geht nicht um Netscape 4.
Es geht darum, dass viele Browser nur Teile von CSS verstehen.

In meinem Beispiel hatte ich folgenden Selektor: div#inhalt>p

div#inhalt>p { color:#dddddd; background-color:#000033; }

Der wird z.B. von Mozilla normal verstanden, von MS IE bis heute (6.0) nicht.

Wenn ich jetzt nur unter Mozilla entwickle, denke ich vielleicht gar
nicht mehr daran, und sehe auch nicht, dass es Probleme gibt.

Es ist mir schon klar, dass man auf vielen Browsern und
Betriebssystemen testet, aber man kann _nie_ alle Browser
testen.
_Deshalb_ ist es sicherer und stabiler, wenn man die
Vorder- und Hintergrundfarbe immer gemeinsam angibt.

Auf den von mir getesteten Browsern und Rechnern gab es bis jetzt keine Probleme.
Was ich damit sagen will ich werde nicht für 0,1 % oder vielleicht auch 1 % nochmal doppelt soviel Zeit für die Site investieren.

Also bitte: die paar Farbangaben kosten ein paar Minuten,
das ist alles. Dafuer kannst Du nachher sicher sein, dass
der Text immer genuegend Kontrast hat. Und ruhig schlafen;-)

Ich weiss noch nicht mal wie man die Standard Einstellungen des Browsers umgehen soll wobei ich zu den eher "wissenden" Leuten im Netz und im Umgang mit solchen Software Programmen gehöre.

Das ist ein schlechtes Argument.
Sich selbst sollte man eh nie als Massstab nehmen.

Zudem: Es spielt ueberhaupt IMHO keine Rolle, wieviele
Benutzer von dem Problem theoretisch betroffen sind,
wenn man das Problem mit einer sauberer Arbeitsweise
und kleinem Aufwand sicher vermeiden kann.

Wenn Deine Seite nicht alle Farben angibt und deshalb
auf einem Browser mit anderen Standardfarben schlecht
oder unbrauchbar angezeigt wird, dann bist _Du_ dafuer
verantwortlich.

Farbgebung ueber HTML ist total veraltet und schlecht.
Du solltest in CSS immer _an der gleichen Stelle_ beide Farben
(Vorder-/Hintergrund) definieren.
Mag sein, dass vieles veraltet und schlecht ist aber dann sind auch 99,9 % der Webseiten im Netz veraltet und schlecht.

1. Millionen Fliegen ...
2. Die Zahl scheint mir doch _sehr_ hoch, auch fuer eine erfundene Zahl;-)
Es gibt mittlerweilen viele gute Sites (auch groessere), die begriffen haben,
dass CSS besser ist.

Gruesse,

Thomas

[molily]

body { color:#000000; background-color:#eeeeee; }
div#inhalt>p { color:#dddddd; background-color:#000033; }
p.wichtig { background-color:#330000; }

Das ist natürlich ziemlich konstruiert, so weit dürfte es gar nicht kommen. Um Probleme in solchen Fällen zu verhindern, sollte die Ursache beseitigt werden, nicht an den Symptomen herumgedoktert werden. Die angemessene Reaktion wäre also zunächst einmal, nicht zusätzliche Deklarationen einzufügen, sondern die Regeln und das Adressierungkonzept insgesamt anzupassen. Das hieße hier etwa, die Selektoren auf ein gemeinsames Niveau zu bringen, welches als vergleichsweise sicher gilt. Dann kann immer noch zur Sicherheit die beschriebene Vorgehensweise angewendet werden. Andersherum würde das Stylesheet letztlich inkompatibel bleiben und durch die vollen Farbangaben würde nur ein Randproblem behandelt.