Farben zentral definieren ?

[ueliisa]

Hallo Liebe Forengemeinde

ich möchte alle im css verwendeten Farben zentral definieren. und diese dann quasi als "variablen" den verschiedenen color definitionen zuweisen.

Vorteil den ich mir erhoffe: beim ändern der Farben nur an einer stelle den wert zu ändern.

bis jetzt konnte ich noch nichts in dieser Art finden, hoffe mal einfach was überlesen zu haben ;-)

[Gonzo]

ich möchte alle im css verwendeten Farben zentral definieren. und diese dann quasi als "variablen" den verschiedenen color-definitionen zuweisen.

Variablen sind in CSS nicht vorgesehen, du müsstest so eine Funktionalität daher über Techniken wie SSI oder PHP realisieren.

Einzig die Definition einer Gruppe von CSS-Attributen als Klasse käme dem ungefähr in die Nähe, da einem HTML-Element mehrere Klassen gleichzeitig zugewiesen werden können, etwa so:

rot {
    color:#f00;
    background-color:#300;
}
fett {
    font-weight:bold;
}

<p class="rot fett">Ziemlich roter und fetter Text</p>

[Engin]

Hi Gonzo, <-:)

» rot {  

>     color:#f00;  
>     background-color:#300;  
> }  
> fett {  
>     font-weight:bold;  
> }

Da fehlt doch was!.!

Und an OP, du könntest deine CSS Datei via header angabe als PHP parsen lassen und in
dieser dann Variablen so wie in einer PHP Datei benutzen.

Grüße aus H im R,
Engin

[ueliisa]

Hei Alle

danke! interessant was da so alles zusammenkommt!

• stimmt  mit ersetzen geht es auch... - zentral wäre schön.

mehrere Klassen an ein Element, das könnte meine Salat schon mal etwas übersichtlicher gestalten - danke!

Hei Engin
wie sieht das genauer aus? wie müsste der Header aussehen.
Die Endung .css darf ich nicht ändern sonst ... und php braucht eben .php

gefällt mir aber grundsätzlich :-)

sehe es gibt noch viel zu lernen!
und Hoffnung 2 weiter Probleme in den griff zu bekommen
aber zuerst die Suche und allenfalls ein neuer thread

[Gunnar Bittersmann]

@@ueliisa:

Die Endung .css darf ich nicht ändern sonst ...

Wie kommst du darauf? Im HTTP-Kontext gibt es keine Endungen.

und php braucht eben .php

Auch das ist falsch. Du kannst deinen Server auch so konfigurieren, dass er auch Dateien mit anderen Endungen durch den PHP-Parser jagt. (Du solltest allerdings nicht alle '.css'-Dateien durch den PHP-Parser jagen, sondern nur die, die es nötig haben.)

Und es muss auch kein PHP sein, SSI reicht für diesen Zweck völlig.

Live long and prosper,
Gunnar

[Engin]

Hi ueliisa,

wie sieht das genauer aus? wie müsste der Header aussehen.
Die Endung .css darf ich nicht ändern sonst ... und php braucht eben .php

Nein, wie Gunnar schon erwähnt hat ist die Endung nicht das ausschlaggebende,
ich hab das letztens mit einer .js Datei gemacht,

<?PHP  
Header("content-type: application/x-javascript");  
?>

Die Datei endet auf .php, ansich ist es aber eine .js, in der Datei selbst steht nur Javascript und halt
ein Paar PHP variablen.

Für CSS denke ich mal müsste anstelle von application/x-javascript halt text/css rein,
bin mir aber nicht sicher, eine Suche sollte dich aber schnell ans Ziel bringen.

Grüße aus H im R,
Engin

[sph]

hi!

du könntest deine CSS Datei via header angabe als PHP parsen lassen und in
dieser dann Variablen so wie in einer PHP Datei benutzen.

... spricht da eigentlich was dagegen? also, ich hab das stellenweise so gemacht, scheint ja auch bestens zu funktionieren - und ich neige dazu mir das als default-css-methode anzugewöhnen.

nur stellt sich mir die frage: kann das probleme geben? irgendwie?

sicher, wenn php streikt, aber dann ist eine funktionsunfähige css-datei wohl noch meine geringste sorge ;)

grüße,

sph

[Engin]

Hi sph,

... spricht da eigentlich was dagegen? also, ich hab das stellenweise so gemacht, scheint ja auch bestens zu funktionieren - und ich neige dazu mir das als default-css-methode anzugewöhnen.
nur stellt sich mir die frage: kann das probleme geben? irgendwie?

Da bin ich überfragt, ich nutze diese Methode derzeit lediglich für eine Javascript Datei,
funktioniert auch Tadellos. Und wenn es Probleme geben sollte ist das auch nicht
Wild, da das Javascript nur ein Paar spielereien enthält.

Grüße aus H im R,
Engin

[Marc]

Hallo,

rot {
    color:#f00;
    background-color:#300;
}
fett {
    font-weight:bold;
}

<p class="rot fett">Ziemlich roter und fetter Text</p>

Klassen-Selectoren muss ein Punkt "." vorangestellt werden.

So sollte es sein:

CSS:

  
.rot {  
     color:#f00;  
     background-color:#300;  
 }  
  
.fett {  
     font-weight:bold;  
 }  

HTML:

  
<p class="rot fett">Ziemlich roter und fetter Text</p>  

Allerdings wäre es sehr ungeschickt Klassennamen zu verwenden, die eine physisches Darstellungsmerkmal beinhalten. Es kommt sehr häufig vor, dass man roten Text in einer anderen Farbe, fetten Text in einer anderen Gewichtung darstellen möchte. Dann müsste man in sämtlichen HTNL-Dokumenten oder Templates die Klassennamen austauschen oder man hat eine Klassse rot, die dafür sorgt, dass zum Beispeil Text grün wird...

Man sollte also Klassen verwenden, die sich auf den semantischen Zusammenhang des Elementes beziehen. Zum Beispiel also ein Absatz im div mit der ID "content".

Das sähe dann wie folgt aus:

CSS:

  
div#content p {  
     color:#f00;  
     background-color:#300;  
     font-weight:bold;  
 }  

HTML:

  
<div id="content">  
  <p>Ziemlich roter und fetter Text</p>  
</div>  

Vorteil - man benötigt in diesem Fall überhaupt gar keine Klasse mehr. Wenn man nicht jeden Text innerhalb eines Absatzes so gestalten will, sondern nur besonders wichtigen Text auf diese Weise hervorheben will, sollte man diesen entsprechend mit "strong" als das auszeichnen, was er ist, nämlich wichtiger Text. In die CSS-Datei gehört dann folgendes:

CSS:

  
div#content p strong {  
     color:#f00;  
     background-color:#300;  
     font-weight:bold;  
 }  

Viele Grüße,
Marc.

[Gunnar Bittersmann]

@@Gonzo:

Einzig die Definition einer Gruppe von CSS-Attributen als Klasse käme dem ungefähr in die Nähe

Nein. Auch die Gruppierung von Selektoren.

etwa so:
rot {
    color:#f00;
    background-color:#300;
}
fett {
    font-weight:bold;
}

<p class="rot fett">Ziemlich roter und fetter Text</p>

Nein, so keinesfalls. Die Benennungen der Klassen "rot" und "fett" sind reichlich unsinnig.

Live long and prosper,
Gunnar

[Gonzo]

.rot {
    color:#f00;

<p class="rot fett">Ziemlich roter und fetter Text</p>

Nein, so keinesfalls. Die Benennungen der Klassen "rot" und "fett" sind reichlich unsinnig.

Du hast vollkommen recht, ich ziehe das zurück und mache einen viel besseren Vorschlag:

.blau {
  color:#f00;
  background-color:#300;
}
.kugelrund {
  font-weight:bold;
}

[Steel]

Hi!

versuchs mit .markiert und .hervorgehoben oder aehnlichen Begriffen. Sonst hast du naemlich wirklich irgendwann .blau{color:red}

[Jonathan]

Hallo Steel,

versuchs mit .markiert und .hervorgehoben oder aehnlichen Begriffen.

Wobei man hervorheben generell besser mit em/strong-ähnlichen Elementen macht und sich dan solche Klassen sparen kann.

Jonathan

[Gonzo]

versuchs mit .markiert und .hervorgehoben oder aehnlichen Begriffen.

Wobei man hervorheben generell besser mit em/strong-ähnlichen Elementen macht und sich dan solche Klassen sparen kann.

Kinners, ihr entfernt euch mit Lichtgeschwindigkeit von der ursprünglichen Frage. Der Fragesteller möchte nicht irgendeine Textstelle hervorheben, sondern Farbschemata zentral verwalten.
Ich habe nicht behauptet, dass mein CSS-Vorschlag das Nonplusultra wäre, das war eine Notkrücke als Ersatz für das von mir davor vorgeschlagene SSI o.ä.

[mike78]

Hallo Liebe Forengemeinde

ich möchte alle im css verwendeten Farben zentral definieren. und diese dann quasi als "variablen" den verschiedenen color definitionen zuweisen.

Hi

Geht mit ein wenig PHP und .htaccess ...
Unter http://www.kick-image.at/weblog/07-02-2008/dynamisches-css ist eine Beschreibung inkl. Download-Links zu finden

[suit]

und was spricht gegen find & replace? - das beherrschen alle modernen editoren, so oft werden sich die farben nicht ändern

[Gunnar Bittersmann]

@@ueliisa:

ich möchte alle im css verwendeten Farben zentral definieren. und diese dann quasi als "variablen" den verschiedenen color definitionen zuweisen.

In CSS-Datei mit Variablen arbeiten

Live long and prosper,
Gunnar

[Jonathan]

Hallo ueliisa,

ich möchte alle im css verwendeten Farben zentral definieren. und diese dann quasi als "variablen" den verschiedenen color definitionen zuweisen.

Es gibt 2 ansätze.

Entweder per php (oder ner anderen programmiersprache) die entsprechenden Farben ausfüllen lassen, dabei möglichst aus performancegründen nicht direkt die dynamische Datei einbinden.

Oder den CSS-Code möglichst optimieren. Theoretisch kannst du alle Elemente, die eine bestimmte Farbe brauchen ja zusammenfassen, z.B.

.bla, #header, h1, h3, h5, #navigation, navigation > li > a, #footer a {background: #123643;}

Jonathan