CSS: Farbe als "Globale Variable" in CSS-Datei verwenden

[Steffen Schmidt]

Angenommen, man hat eine Art "Corporate Identity" für seine Website
definiert, die sich über -..naja, sagen wir..- 8 feste Farben
definiert.
Nun gibt es da zig Dutzend Elemente in der CSS-Datei, die mal für
hier, mal da diese 8 Farben verwenden. Wenn ich mir nun überlge, Farbe
3 gefällt mir nicht mehr, ersetze sie durch Farbe 3a, dann müsste ich
durch die ganze CSS-Datei gehen, und jedes Aufkommen der Farbe 3 durch
3a ersetzen. Schöner wäre es, wenn es ginge, am Anfang eine Variable
zu definieren, die die Farbe hält, und in jedem Element nur die
Variable einzusetzen. Dann müsste man für eine Farbersetzung nur am
Anfang der Variableninitialisierung einen neuen Initialwert geben. So,
ist jeder noch im Kontext dabei, oder soll ich nochmal von vorne
anfangen? *g*
Geht sowas überhaupt auf halbwegs elegante Weise? Wenn ja, wie?
Habe davon mal irgendwo gelesen, dass man das via PHP lösen könne, man
müsse da jedoch einen angepassten Content-Header mitsenden. (*Hä?*)
Wenn jemand dieses Problem in irgendeiner Weise funktionierend gelöst
hat, vielleicht könnte er mir den entscheidenden Hinweis (Snippet,
Link, ...) geben...
Danke im Voraus! :o)

[Christine Kuehnel]

Post by Steffen Schmidt
Angenommen, man hat eine Art "Corporate Identity" für seine Website
definiert, die sich über -..naja, sagen wir..- 8 feste Farben
definiert.
[...]
durch die ganze CSS-Datei gehen, und jedes Aufkommen der Farbe 3 durch
3a ersetzen.

Was per "Suchen/Ersetzen" eigentlich jeder Editor erledigen sollte.

Post by Steffen Schmidt
Schöner wäre es, wenn es ginge, am Anfang eine Variable
zu definieren, die die Farbe hält, und in jedem Element nur die
Variable einzusetzen.

CSS ist keine Programmiersprache. Von daher denke ich, dass nicht nur
ich keine solche Moeglichkeit kenne.

Aber wie waere es z.B. so:

H1, #blafasel, .allesWasNochErsteFarbeHat { color: green;)
H3, #trallala, .allesWasNochZweiteFarbeHat { color: red;)
...
H1 { ... alles andere zu H1 ... }
#blafasel {...}
...

Du verstehst, was ich meine?

Christine Kuehnel

[Eric B. Bednarz]

Post by Steffen Schmidt
Nun gibt es da zig Dutzend Elemente in der CSS-Datei, die mal für
hier, mal da diese 8 Farben verwenden. Wenn ich mir nun überlge, Farbe
3 gefällt mir nicht mehr, ersetze sie durch Farbe 3a, dann müsste ich
durch die ganze CSS-Datei gehen, und jedes Aufkommen der Farbe 3 durch
3a ersetzen. Schöner wäre es, wenn es ginge, am Anfang eine Variable
zu definieren, die die Farbe hält, und in jedem Element nur die
Variable einzusetzen. [...]
Geht sowas überhaupt auf halbwegs elegante Weise? Wenn ja, wie?

Mit lokalem oder serverseitigem preprocessing.

Post by Steffen Schmidt
Habe davon mal irgendwo gelesen, dass man das via PHP lösen könne,

corporate_colors.inc:

<?php
$farbe_1 = '#rgb';
?>

corporate_style.css:

<?php
include "corporate_colors.inc";
?>

.foobar
{
color: <?php echo $farbe_1; ?>;
}

Wahrscheinlich kann man sich bessere Namen fuer Variablen einfallen
lassen.

Post by Steffen Schmidt
man
müsse da jedoch einen angepassten Content-Header mitsenden. (*Hä?*)

<?php
header ("Content-Type: text/css; charset=utf-8");
?>

Oder welche Kodierung dir sonst zusagen mag; oder du regelst mit einem
Konfigurationsbestand im CSS Verzeichnis das PHP Bestaende vom Server
als text/css versendet werden oder CSS Bestaende als PHP behandelt
werden. Oder was auch immer praktisch ist.

[Daniel Kirsch]

Post by Steffen Schmidt
Nun gibt es da zig Dutzend Elemente in der CSS-Datei, die mal für
hier, mal da diese 8 Farben verwenden. Wenn ich mir nun überlge, Farbe
3 gefällt mir nicht mehr, ersetze sie durch Farbe 3a, dann müsste ich
durch die ganze CSS-Datei gehen, und jedes Aufkommen der Farbe 3 durch
3a ersetzen. Schöner wäre es, wenn es ginge, am Anfang eine Variable
zu definieren, die die Farbe hält, und in jedem Element nur die
Variable einzusetzen.

Variablen lassen sich leider nicht via CSS setzen. Allerdings kannst Du
einem Element mehrere Styles mit Leerzeichen getrennt zuweisen. Damit
kannst Du sehr elegant arbeiten und beispielsweise Farbangaben von den
anderen Angaben trennen:

<div class="divstyle schrift1 farbe3">Schnullibulliy<div>

Das Element hat nun sowohl die Eigenschaften von divstyle als auch
schrift1 und farbe3:

.divstyle {
border-width:1px;
border-style:solid;
margin:3px;
padding:5px;
}

.schrift1 {
font-family:arial;
font-size:14px;
line-height:1.3em;
}

.farbe3 {
background-color:#fee;
border-color:#888;
color:#008;
}

Grüße
Daniel

[Alexander Waldmann]

Post by Daniel Kirsch
Variablen lassen sich leider nicht via CSS setzen. Allerdings kannst
Du einem Element mehrere Styles mit Leerzeichen getrennt zuweisen.
Damit kannst Du sehr elegant arbeiten und beispielsweise Farbangaben
<div class="divstyle schrift1 farbe3">Schnullibulliy<div>
Das Element hat nun sowohl die Eigenschaften von divstyle als auch

Ich wusste gar nicht, dass man einem Element mehrere Klassen zuweisen
kann? Habe immer verquerere Stylesheets geschrieben, um sowas
hinzubekommen. Ist das von allen Browsern vernünftig unterstützt, oder
haben einige Browser da so Ihre Macken?

mit freundlichen Grüßen
Alexander Waldmann

[Heiko Rech]

Steffen Schmidt wrote:

[ Farben in CSS Datei ersetzen ]

Also jetzt mal ehrlich:

Klar kann man das mit PHP, ASP, Java, C++ oder was auch immer bestimmt
lösen. Aber es geht schneller mit einem Editor über Suchen und Ersetzen die
Werte alle auf einmal zu ändern. Wenn es sein muss auch in vielen Dateien
in vielen Verzeichnissen. Alles auf einen Schlag. Es geht sogar schneller,
als dieses Posting zu schreiben und diesen Tread zu lesen.

Aber manche mögen es halt kompliziert.

Heiko

[Alexander Skwar]

Post by Heiko Rech
Aber manche mögen es halt kompliziert.

Ansichtssache. Ich finde css.php?farbe=gelb und dann in css.php

************************************************************************************
<?php
header('Content-Type: text/css; charset=iso-8859-1');
?>

a { background-color: <?php echo $farbe;?> }

************************************************************************************

nicht sonderlich schwer.

Alexander Skwar

[Markus Ceh]

Nun ja, dann muss man halt css.php?farbe=gelb durch
css.farbe?farbe=blau ersetzen. Am besten mit einem Editor, der über
mehrere Dateien hinweg ersetzen kann.
Der Sinn des ganzen entzieht sich mir momentan noch. Oder ist
css.php?farbe=gelb einfach nur Cooler weil es ja richtig programmiert
ist?

Also mal abgesehen von der Tatsache, dass ich das alles für Quatsch
halte (Wieso nicht alle gleichen Farbangaben im Stylesheet
zusammenfassen, wie schon zig mal vorgeschlagen!?) würde ein Editor, der
über mehrere Dateien hinweg Änderungen machen kann mich auch
interessieren.
(btw. denke ich gerade an einen _text_-Editor - nur um sicher zu gehen
:)

Hast du da mal einen Link, o.ä., Heiko?

Gruß
Markus

[Heiko Rech]

Post by Markus Ceh
würde ein Editor, der
über mehrere Dateien hinweg Änderungen machen kann mich auch
interessieren.
(btw. denke ich gerade an einen _text_-Editor - nur um sicher zu gehen
:)
Hast du da mal einen Link, o.ä., Heiko?

Kommt auf das OS an:

Phase5 HTML Editor ->Windows
Bleufish -> Linux
Vi->Linux/Windows
Emacs -> Linux/Windows
Homesite -> Windows
PFE und Ultraedit können es sicherlich auch -> Windows

Google kennt noch mehr.

Heiko

[Markus Ceh]

Post by Heiko Rech
Phase5 HTML Editor ->Windows
Bleufish -> Linux
Vi->Linux/Windows
Emacs -> Linux/Windows
Homesite -> Windows
PFE und Ultraedit können es sicherlich auch -> Windows

Mmh, ja genau das wollte ich verhindern mit dem Hinweis auf
_text_-Editor :)

Ich meinte eigentlich keinen speziellen html-Editor, sondern einen
plain-text-Editor (okay, vermutlich verschwimmen da die Grenzen etwas
... wenn es welche gibt)

Aber vielleicht sollte ich doch endlich mal Phase5 ausprobieren. hat
vielleicht doch den ein oder anderen Vorteil...

Gruß
Markus

[Heiko Luettges]

Post by Markus Ceh

Post by Heiko Rech
Phase5 HTML Editor ->Windows
Bleufish -> Linux
Vi->Linux/Windows
Emacs -> Linux/Windows
Homesite -> Windows
PFE und Ultraedit können es sicherlich auch -> Windows

Mmh, ja genau das wollte ich verhindern mit dem Hinweis auf
_text_-Editor :)
Ich meinte eigentlich keinen speziellen html-Editor, sondern einen
plain-text-Editor (okay, vermutlich verschwimmen da die Grenzen etwas
... wenn es welche gibt)

Aehm...

vi und emacs sind reine plaintext-Editoren. Allerdings gibt es dafuer
jede Menge Zubehoer und Einstellmoeglichkeiten (Syntaxhighlighing, um
mal eines der trivialsten Sachen zu nennen).

Den vi (bzw. ein Editor der bischen komfortabler ist) findest Du unter
<http://www.vim.org>
Unter anderem kann er seit Version 6.0 folding, d.h. bestimmte
Textbereiche koennen einfach ausgeblendet werden (ideal beim
Programmieren und langen if-else oder bei langen divs). Ein kleinen
Einblick dazu gibt es unter:
<http://www.pl-berichte.de/t_programme/vim_fold.html>

mfg

Heiko

[Dave Kliczbor]

Post by Markus Ceh
Ich meinte eigentlich keinen speziellen html-Editor, sondern einen
plain-text-Editor (okay, vermutlich verschwimmen da die Grenzen etwas
... wenn es welche gibt)
Aber vielleicht sollte ich doch endlich mal Phase5 ausprobieren. hat
vielleicht doch den ein oder anderen Vorteil...

Dann nimm den kleinen Bruder von Phase5. Nennt sich Proton und besteht
eigentlich nur aus dem Texteditor des Phase5.
Kann Syntaxhighlighting für viele Sprachen, ist ansonsten aber der
subjektiv beste Plain-Text-Editor, den ich kenne.
Den hätte ich gern unter Linux.

cu
Dave KLiczbor

[Markus Ceh]

Post by Dave Kliczbor
Dann nimm den kleinen Bruder von Phase5. Nennt sich Proton und besteht
eigentlich nur aus dem Texteditor des Phase5.
Kann Syntaxhighlighting für viele Sprachen, ist ansonsten aber der
subjektiv beste Plain-Text-Editor, den ich kenne.
Den hätte ich gern unter Linux.

Jetzt hab ich schon Phase5 installiert. Die meisten Funktionien werde
ich nicht brauchen, aber erstmal in Ruhe schaun, was man damit alles so
anfangen kann. Hauptsache es fuscht mir nicht im Quelltext rum, á la
Frontpage o.ä. Das mag ich gar nicht! Hab gern die totale Kontrolle :-)

Gruß
Markus

[Lutz Illigen]

Post by Markus Ceh
Jetzt hab ich schon Phase5 installiert.

Auch die akutelle von www.qhaut.de?

Lutz

[Gabriele Jesdinsky]

Hauptsache es fuscht mir nicht im Quelltext rum, á la Frontpage o.ä.

kam bei mir in den 4 Jahren, wo ich es benutze, noch nie vor.
Bei FrontPage übrigens auch nicht -
sofern man weiß, was eine Quelltext-Ansicht ist, versteht sich. ;-)

Der Vorteil von Phase5 ist, dass man damit auch *unzählige Zeilen*
aktualisieren kann (e.g. Navigation) und dass die Auswahl der
einzubeziehenden Verzeichnisse schneller & einfacher ist
und alles intuitiv. :-)

Gruß Gabi

[Markus Ceh]

Post by Gabriele Jesdinsky

Hauptsache es fuscht mir nicht im Quelltext rum, á la Frontpage o.ä.

kam bei mir in den 4 Jahren, wo ich es benutze, noch nie vor.
Bei FrontPage übrigens auch nicht -
sofern man weiß, was eine Quelltext-Ansicht ist, versteht sich. ;-)

Ich hab gegen Ende meiner kurzen Frontpagephase auch immer häufiger die
Quelltextansicht benutzt, war dann aber doch verblüfft, wieviel sich da
von Geisterhand wieder veränderte. Naja, ist zu lange her, als das ich
das noch genau nachvollziehen könnte oder wollte :-)

Gruß
Markus

[Markus Ceh]

aus seiner Sicht zwar richtig repariert, aber eben doch falsch, weil
es (noch) nicht so weit denkt wie ich. ;-))

Ja, eigenmächtig was reparieren ist aber genau das, was es nicht soll.
Meine Fehler korrigiere ich gerne selbst, um auch was dabei zu lernen.
Naja, auf meinem Computer ist es jetzt seit fast 2 Jahren nicht mehr
installiert gewesen und das bleibt es auch.
Ich installiere aber sowieso nur ungern unötige Software ... wie
Frontpage ;-)

Gruß
Markus

[Gabriele Jesdinsky]

installiere aber sowieso nur ungern unötige Software ... wie Frontpage ;-)

Tja, gegen Bevormundung bin ich auch allergisch. :o(

Aber es kommt mitunter auch auf die Art des Contents an:
Ich brauche so viele individuelle Anpassungen pro Seite, dass ich an
FrontPage's *Normal-Ansicht* hänge wie an der Nadel.

Nach Tests etlicher Alternativen fand ich für meine Zwecke FP bislang
als das kleinste Übel, aber falls du zufällig schon etwas ähnlich
Komfortables kennst, behalte es bitte nicht für dich. :-)

Gruß Gabi

[Steffen Schmidt]

Post by Gabriele Jesdinsky
Ich brauche so viele individuelle Anpassungen pro Seite, dass ich an
FrontPage's *Normal-Ansicht* hänge wie an der Nadel.

Ich habe ganz am Anfang meine ersten Gehversuche mit Frontpage
gemacht. Habe auch kurzzeitig damals mal eine Trial von Dreamweaver
ausprobiert, und ziemlich schnell wieder entsorgt. Seit langem
schreibe ich alles grundsätzlich nur noch in einem ganz normalen
Texteditor (bei mir speziell: UltraEdit)

[Markus Ceh]

Post by Steffen Schmidt
Ich habe ganz am Anfang meine ersten Gehversuche mit Frontpage
gemacht. Habe auch kurzzeitig damals mal eine Trial von Dreamweaver
ausprobiert, und ziemlich schnell wieder entsorgt. Seit langem
schreibe ich alles grundsätzlich nur noch in einem ganz normalen
Texteditor (bei mir speziell: UltraEdit)

dito! Ich habe auch völlig Ahnungslos damals mit Frontpage angefangen
und bin dann aber zum Glück recht schnell auf selfhtml und diese NG
gestoßen, woraufhin ich dann FP schnell entsorgt habe. Seitdem benutze
ich auch nur noch plain-Text Editoren und seit vorgestern sporadisch
Phase5 :-)

Gruß
Markus

[Gabriele Jesdinsky]

Post by Steffen Schmidt
Texteditor (bei mir speziell: UltraEdit)

Neben Phase5 auch mein Favorit!

[Da ich zum Einarbeiten in Software wohl erst Zeit finde, wenn ich
mich zur Ruhe setze (in frühestens 48 Jahren, so Gott will), benutze
ich etliche Programme gleichzeitig, je nachdem, wo ich die benötigte
Funktion auf Anhieb gefunden habe. ;-)]

Leider gibt es aber auch Fälle, wo es ohne Normalansicht einfach nicht
schnell genug geht: Z.B. *unregelmäßig* aufgebaute Tabellen[1].

Post by Steffen Schmidt
Dreamweaver ausprobiert, und ziemlich schnell wieder entsorgt.

ACK; wer mit den vielen Fensterchen und umständlichen Eingaben die
Nerven behält und arbeiten kann, verdient Respekt! :-)

Gruß Gabi

[Martin Gerhard]

Post by Gabriele Jesdinsky
[...]

Post by Steffen Schmidt
Dreamweaver ausprobiert, und ziemlich schnell wieder entsorgt.

ACK; wer mit den vielen Fensterchen und umständlichen Eingaben die
Nerven behält und arbeiten kann, verdient Respekt! :-)

Oh, vielen Dank!

Aber was ich eigentlich wissen will, da hier ja scheint's FP-Experten
anwesend sind: Kann man eine in FP (ohne diese FP-Extensions)
aufgebaute Site noch irgendwie retten? Oder lieber gleich alles neu
machen? Hintergrund ist, dass ich ein paar Änderungen auf einer sehr
umfangreichen, mit FP aufgebauten Site machen soll. Aber der Code ist
ja dermaßen kaputt, dass es sich gar nicht so einfach darstellt. Z.B.
gibt's überhaupt keine Hyperlinks, sondern alles wird per JavaScript
geöffnet, haufenweise center-Tags, die falsch verschachtelt sind,
nicht geschlossene Tags uswusf.

Das gleiche wüsste ich auch gerne über Sites, die mit GoLive erstellt
wurden. Da habe ich auch so einen Patienten. Die gesamte
CSSCRIPT-Geschichte von GoLive ist für mich unverständlich. Vielleicht
kann mir dazu jemand auch noch was sagen: Neu machen? Sind viele Seiten...

Gruß
Martin

[Gabriele Jesdinsky]

[FrontPage] nicht geschlossene Tags uswusf.
[GoLive] CSSCRIPT

AFAICS geht das in der Tat am schnellsten mit 'Alles auf Anfang'. :o(

Wenn möglich, mache ich zuerst die Hauptseiten der Rubriken und die
meistgelesenen, dann in aller Ruhe den Rest bei Aktualisierung resp.
systematisch z.B. von A-Z:

Wie es drinnen aussieht, interessiert niemanden. ;-)

Gruß Gabi

[Martin Gerhard]

Post by Gabriele Jesdinsky

[FrontPage] nicht geschlossene Tags uswusf.
[GoLive] CSSCRIPT

AFAICS geht das in der Tat am schnellsten mit 'Alles auf Anfang'. :o(

Alles klar, ich dacht's mir ja schon.

Hab' Dank!
Martin

[Markus Ceh]

[zur Ruhe setzen](in frühestens 48 Jahren, so Gott will)

Dann bist du wie alt? Meine sehr begrenzten Mathefähigkeiten sind
verwirrterdings gerade endgültig zusammengebrochen...

Leider gibt es aber auch Fälle, wo es ohne Normalansicht einfach nicht
schnell genug geht: Z.B. *unregelmäßig* aufgebaute Tabellen[1].

Och, mit der Zeit kann man auch im Text-Editor Tabellen einfach so
runterschreiben und die funktionieren dann auf Anhieb ;-)

Gruß
Markus

[Gabriele Jesdinsky]

Post by Markus Ceh

[zur Ruhe setzen](in frühestens 48 Jahren, so Gott will)

Dann bist du wie alt?

42 :o)

Gruß Gabi

[Gabriele Jesdinsky]

dann rüber in den Text-Editor, und dann wird kräftig aufgeräumt. *g*

FP2004 soll ja in der Hinsicht besser werden, aber abwarten:

Seit ich nach mechanischem FestplattenCrash vermutlich durch
StromAusfall [Büro in NewBundesland ist wie eins in NewYork ;o)]
mal WinXP installiert habe, trauere ich schon Win98 nach...

Gruß Gabi

[Steffen Schmidt]

Post by Markus Ceh
würde ein Editor, der
über mehrere Dateien hinweg Änderungen machen kann mich auch
interessieren.

http://www.funduc.com/search_replace.htm

(Für Windows)

[Markus Ceh]

Post by Steffen Schmidt

Post by Markus Ceh
würde ein Editor, der
über mehrere Dateien hinweg Änderungen machen kann mich auch
interessieren.

http://www.funduc.com/search_replace.htm

Ja, in etwa sowas meinte ich. Ich seh mir das mal an...

Danke!
Gruß
Markus

[Mayken]

Hi Markus,

Post by Markus Ceh
zusammenfassen, wie schon zig mal vorgeschlagen!?) würde ein Editor,
der über mehrere Dateien hinweg Änderungen machen kann mich auch
interessieren.

oops, ich dachte das wäre Standard!? Welcher von den Bekannteren kann
das nicht?

Post by Markus Ceh
(btw. denke ich gerade an einen _text_-Editor - nur um sicher zu gehen
:)

Weiß jetzt nicht was Du darunter verstehst oder ausschließen möchtest
und vermute mal, daß Du einfach meinst im Quelltext statt mit Generator
zu arbeiten:

Aus dem Bauch:
* HomeSite (kann aber nicht wirklich XHTML) auf jeden Fall.
* Phase5 sollte (weiß ich nicht, habe ich lange nicht mehr benutzt).
* EditPlus IMHO (habe ich ganz früher benutzt und weiß ich nicht mehr.
Ist ausgesprochen nett und breit einsetzbar)
* Visual Studio (deutlich nicht empfehlenswert für w3.org-konformes
webdesign, aber nutze ich um nicht ständig wechseln zu müssen)

Und dann gibt's noch das Ding von dem CSS-Guru, fast so teuer wie
HomeSite, aber da haben wieder andere Sachen genervt:
http://www.bradsoft.com/topstyle/

Ciao
Mayken

[Alexander Skwar]

Post by Markus Ceh
Hast du da mal einen Link, o.ä., Heiko?

Darf ich auch?

vim -> http://www.vim.org/

Alexander Skwar

[Nicole Simon]

Post by Markus Ceh
würde ein Editor, der
über mehrere Dateien hinweg Änderungen machen kann mich auch
interessieren.

Notetab, m.W. auch in der Freewareversion.
www.notetab.com

hth
Nicole

[Goetz Hoffart]

Post by Heiko Rech
Klar kann man das mit PHP, ASP, Java, C++ oder was auch immer bestimmt
lösen. Aber es geht schneller mit einem Editor über Suchen und Ersetzen die
Werte alle auf einmal zu ändern.

Das Problem ist, wenn aus einer Farbe zwei werden.

Also:

farbe1 {
color: rgb(10,20,30);
}

farbe2 {
color: rgb(10,20,30);
}

... soll zu rgb(30,50,30) und rgb(10,20,40) werden. Da nutzt einem
Suchen&Ersetzen nichts, da wären mir Konstanten zur Definition lieber.

Grüße
Götz

[Christine Kuehnel]

Post by Goetz Hoffart
Das Problem ist, wenn aus einer Farbe zwei werden.

Womit du bei meinen Vorschlag oder dem von Eric (
***@email.bednarz.nl ) bist.

Christine Kuehnel

[Mayken]

Hi Steffen,

Post by Steffen Schmidt
Angenommen, man hat eine Art "Corporate Identity" für seine Website

was man nicht nur annehmen sondern immer tun sollte, auch wenn's keine
Corporate ist ;-)

Post by Steffen Schmidt
definiert, die sich über -..naja, sagen wir..- 8 feste Farben
definiert.

Sehr sinnvoll. Ich gehe noch weiter und sortiere diese Farben von
vornherein in Rubriken:

* Grundfarbe (meistens Hintergrund, allgemeiner Farbeindruck),
* 1. Schmuckfarbe (Überschriften etc.),
* 2. Schmuckfarbe (Farbbereich für Links und aktive Elemente).
* eventuell 3. Farbe, die nur vereinzelt inline als Marker für
"Achtung"-Hinweise etc. verwandt wird
* reduzierte Selbstzweck-Farbe für neben dem eigentlichen Thema liegende
"Verwaltungselemente" wie Copyright etc.

Post by Steffen Schmidt
Nun gibt es da zig Dutzend Elemente in der CSS-Datei, die mal für
hier, mal da diese 8 Farben verwenden. Wenn ich mir nun überlge, Farbe
3 gefällt mir nicht mehr, ersetze sie durch Farbe 3a, dann müsste ich

Kann ich keine Quelle mehr für angeben (doch, mein Einstieg in CSS
begann mit http://www.amazon.de/exec/obidos/ASIN/3860633988/ ;-)), aber
ich habe das von Anfang (HTML) an anders gelesen/gelernt und lege
insbesondere aus Deinem Bedarf in der CSS immer eine extra-Farb-Rubrik
an (bzw. kopiere die Struktur aus ollen CSS-files), in der für _alles_
nur die Farben festgelegt werden.

Du mußt auch in CSS nicht alles in eine Reihe schreiben, sondern kannst
exzessiv schalten und kommentieren: Einmal Farbe definieren und _alles_
sauber strukturiert davor bzw. darüber, das diese Farbe hat.

Ein Farbwechsel ist in meinem Fall dann wirklich nur eine einzige
Ersetzung..

Tipp am Rande: Ich setze außerdem beim Basteln vor die eigentlichen
Definitionen einen ausführlichen Kommentar mit sämtlichen angedachten
und vorausgewählten Farben mit dem Klarnamen und der #Nummer und kann
dann problemlos ausprobieren und neu zuordnen.

Aber Obacht seit XHTML: Hier ist es nicht mehr erlaubt, die
(Vordergrund-)Farbe allein ohne Angabe einer Hintergrundfarbe zu
definieren und wird als invalid abgemeckert. Da ich meistens
Vordergrund-Farben-Elemente auf unterschiedlichen Hintergrund-Bereichen
benutze, definiere ich in einem weiteren Block nochmal _alle_ Classen
und IDs, deren Vordergrundfarbe ich an anderer Stelle definiert habe,
als transparent. Es ist w3.org-valid, aber ich bin nicht sicher, ob es
guter Stil ist.

Die Farben (bzw. generell alle Definitionen) so zusammenzufassen wurde
damals als guter Stil empfohlen (weil eben auch schlanker), wird aber
heute in den w3.org-Quelldateien nicht angewandt (jedenfalls dort, wo
ich mal Stichprobenartig geguckt hatte).

Ciao
Mayken
[Disclaimer: Wenn ich hier etwas schreibe, bitte nicht die verrottete
M$-Groupie-site als Beispiel heranziehen, die ist mega-Asbach und vieles
würde man heute anders machen]

[Martin Stehle]

Hallo Steffen,

Post by Steffen Schmidt
Wenn ich mir nun überlge, Farbe
3 gefällt mir nicht mehr, ersetze sie durch Farbe 3a, dann müsste ich
durch die ganze CSS-Datei gehen, und jedes Aufkommen der Farbe 3 durch
3a ersetzen.

Hier hilft die Möglichkeit, mehrere Selektoren zu einer Gruppe mit
derselben Deklaration zusammenfassen zu können.

Siehe http://www.w3.org/TR/REC-CSS2/selector.html#grouping

Wird das mit allen Rulesets durchgemacht, wird der Code aufgeräumt und
z.B. Redudanzen getilgt, ohne dass dabei seine Funktionalität geändert
wird (wird bei Programmiersprachen "Refactoring" genannt). Dabei
kannst du die 8 Farben im Code optisch näher bringen und hast so eine
Übersicht von ihnen.

Es bleibt jedoch bei Mehrfachsetzungen, wenn derselbe Wert in
unterschiedlichen Attributen (z.B. identischer Farbwert für
Hintergrund und Border) vorkommt. Dann helfen dir die anderen
Lösungen, die bereits genannt wurden.

M.

[Andreas Borutta]

Mayken schrieb:

[Gruppierte Selektoren zur Erhöhung der Übersichtlichkeit bei der
Gestaltung mit Farben]

super, gewußt wo, also immer noch guter Stil. Wundert mich nur, es in
den dort verwendeten css-files nicht oder kaum gefunden zu haben.

Welche Struktur im Stylesheet als übersichtlich empfunden wird, darüber
werden verschiedene Autoren verschiedene Ansichten haben.

Manche Werkzeuge zum Editieren von Stilvorlagen bieten die Möglichkeit
die Reihenfolge von Selektoren per Befehl automatisch zu wechseln.
Topstyle kann z. B. logisch oder alphabetisch anordnen.

Ob es auch Werkzeuge für die erwähnte Erstellung von gruppierten
Selektoren nur für Deklarationen, die Farben betreffen, gibt, weiß ich
nicht.


Eine einfache Möglichkeit sich selber gegenüber Rechenschaft abzulegen,
welche Farben überhaupt im Stylesheet genutzt werden ist, sie schlicht
ganz oben als Kommentar zu erwähnen:

/*Alle verwendeten Farben*/
/*black; /*Vordergrundfarbe 1 - Schwarz*/
/*rgb(0,90,156); /*Vordergrundfarbe 2 - Blauton*/
/*rgb(210,106,0); /*Vordergrundfarbe 3 - Rostbraunton*/
/*rgb(255,255,244); /*Hintergrundfarbe 1 - Beigeton*/
/*rgb(255,255,102); /*Hintergrundfarbe 2 - Gelbton*/
...

a:link{
background: rgb(255,255,244); /*Hintergrundfarbe 1 - Beigeton*/
color: rgb(0,90,156); /*Vordergrundfarbe 2 - Blauton*/
}
...

Soll eine Farbe verändert werden, kann für das schon erwähnte
"Suchen&Ersetzen" gleich der ganze Zeichenblock inklusive Kommentar mit
Bezeichnung benutzt werden.

Andreas

[Mayken]

Hi Stefan,

Das haengt ganz von der Anwendung ab. Ich habe ein Stylesheet fuer

ich hatte stark gekürzt, guck noch mal in sein post, was er wo
auskommentiert ...

angesprochenen vhost mit vollkommen unterschiedlichen Farbschemata

... und das kann über aussagekräftige _und_ eindeutige Benamsung der
Klassen und Ids (besser) gelöst werden.

Farbe besetzt werden. In so einem Stylesheet kann man mit
Suchen/Ersetzen spaeter kaum mehr sinnvoll Aenderungen vornehmen.

Nur die Ausgangsfrage war, wie man ersetzen kann. Die Antworten waren
überwiegend, nicht zu ersetzen sondern durch Organisation einen
automatischen Ersetzungsvorgang überflüssig zu machen, in dem rubriziert
und gruppiert wird.

Ich faende es sehr schoen, von Anfang an so gearbeitet zu haben, wie

Die meisten müssen ihre schlechten Erfahrungen selber machen ... ;-)

Ciao
Mayken

[Mayken]

Ich halte es für sinnvoll, daß bei Verwendung eines HTML-Editors mit
zwei Arten von _Eingabe_fenstern, das Fenster mit dem Quellcode
_ständig_ offen zu halten. Beide Fenster laufen synchron.

ich nicht.
Weil es dazu verführt hauptsächlich im Generator-Fenster zu arbeiten
anstatt dort nur Sachen einzugeben, die er auf Anhieb im Quellcode nicht
gebacken bekommt.

[ Keine Ahnung, was das nun darstellen soll ]

Dies dazu in der gebotenen Kürze ;-)
Dieses Beispiel betraf eine Stilvorlage ohne nach Farbdeklarationen
gruppierten Selektoren.

Es ist unabhängig davon redundant. Es reicht die Farbe einmal an
zentraler Stelle zu kommentieren ...

Dann würde ich die Farben nicht in einem Kommentar am Anfang der Seite

... er hatte dort in dem in Bezug genommen Post einen anderen
Hintergrund.

auflisten, sondern ausschließlich in der Regel kommentieren.

Was überflüssig ist, insbesondere wenn es Überschneidungen gibt.

Aber ich merke schon, daß Du die Ursprungsposts nicht vollständig
gelesen hast und wir streckenweise aneinander vorbeireden und/oder
deutlich unterschiedliche Ansichten zu Organisation haben ;->

Ciao
Mayken

[Andreas Borutta]

Post by Mayken

Dieses Beispiel betraf eine Stilvorlage ohne nach Farbdeklarationen
gruppierten Selektoren.

Es ist unabhängig davon redundant. Es reicht die Farbe einmal an
zentraler Stelle zu kommentieren ...

Du wirst schon bei Struktureditorfenstern schwach, ich halte sogar die
Üppigkeit eines Stylesheets aus. ;-)

Post by Mayken
Aber ich merke schon, daß Du die Ursprungsposts nicht vollständig
gelesen hast und wir streckenweise aneinander vorbeireden und/oder
deutlich unterschiedliche Ansichten zu Organisation haben ;->

Poste oder nenne doch mal ein Stylesheet, welches für Dich ideal mit
Farben umgeht.

Andreas