Farbewerte in css als "Variable"?

[Matze]

Hallo zusammen :hi:

Ich bastel gerade eine Webseite, bei der 3 Bereiche immer eine einheitliche Farbe haben müssen. Um diesen Farbwert zu ändern muss ich 3 Änderungen in den css-Dateien vornehmen, was ich eigentlich nicht gerne hätte. Eine php-Lösung (Variablen in einer css_color.php deaklarieren und bei der Erstellung des HTML-Codes zuweisen) möchte ich nicht nutzen, da sonst der Sinn, das ganze in Stylesheet-Dateien zu verwalten, verfehlt wird.

Leider gibt es in css selbst keine Variablen, wie würde ihr das am sinnvollsten Lösen?

[marabu]

Hallo Matthias,

das C in CSS steht doch für Cascading - warum definierst du nicht einen speziellen Style, den du dann an deine drei Bereiche bindest?

Grüße vom marabu

[Matze]

Hallo marabu

Zitat:

Zitat von marabu

das C in CSS steht doch für Cascading - warum definierst du nicht einen speziellen Style, den du dann an deine drei Bereiche bindest?

Das Problem ist jedoch, dass es sich einmal um border-top, einmal um border-bottom und einmal um background-color handelt.

[jfheins]

Du könntest dir ein php-Script schreiben, dass dann die CSS-Daten ausgibt ;)

(Dann wird auch der Sinn nicht verfehlt ... oder wie meintest du das ???)

[Matze]

Zitat:

Zitat von jfheins

Du könntest dir ein php-Script schreiben, dass dann die CSS-Daten ausgibt ;)

Das könnte ich schon, aber ich möchte das alles in css-dateien verwalten.

Zitat:

Zitat von jfheins

(Dann wird auch der Sinn nicht verfehlt ... oder wie meintest du das ???)

Grund ist der, dass dann auch die Leute, denen ich den Code aushändige, sofort verstehen, wie das ganze aufgebaut ist. Das Hinzufügen von Klassen ist auch deutlich komfortabler, wenn ich keinen Umweg über php gehe.

[jfheins]

Wenn du in eine .htaccess ein

Code:

AddType application/x-httpd-php .css

Machst, kannste sogar die Dateiendung css benutzen ;)

Ich dachte dann an sowas wie

Code:

<?php // CSS-Datei
$farbe = '#00FF00';
?>

body
   {
   background-color: <?php echo $farbe; ?>;
   font-family: Helvetica,Arial,sans-serif;
   text-align: center;
      }

Oder die css-Datei seperat und dann mit PHp Platzhalter wie {VAR|bgcolor} parsen ;)

[Matze]

Hi, danke. Ja ich wüsste schon, wie das geht. ;)

Nur gefällt mir diese Lösung nicht. Wenn es wirklich nicht anders geht, mache ich das evtl. so, ansonsten wäre mir eine reine css Lösung deutlich lieber.

[Cyberbob]

Hi

Man kann in css die styles auch aufteilen.

etwa so:

body {color: white;}
td {color: red;}
input {width: 50;}

body, td, input {background-color: blue;}

[Mystic]

Ich löse das mit einem Haupt-Stylesheet in der ersten Farbe sowie je ein Zusatz-Stylesheet für jede Farbe, welches nur die nötigen Änderungen enthält.

Soll die Seite die erste Farbe haben, bindest du nur das Haupt-Stylesheet ein. Soll sie eine andere Farbe haben, bindest du das Haupt-Stylesheet und das entsprechende Zusatz-Stylesheet ein. Das Zusatz-Stylesheet muss nach dem Haupt-Stylesheet deklariert werden.

[Matze]

@Cyberbob: Da ich 3 unterschiedlichen Eigenschaften den Farbwert zuweisen muss, bringt mir das nicht viel. ;)

@Mystic: Das klingt ja kompliziert, aber ich sehe es mir morgen an, danke.

[Phoenix]

Das ist ohne weiteres so leider nicht möglich.

Da haben sich schon andere den Kopf drüber zerbrochen, und das kann man sehr gut hier nachlesen: http://www.thestyleworks.de/tut-art/css-constants.shtml

Dort werden 2 Lösungen vorgestellt: Einmal eine PHP-Lösung und einmal per Server-Side includes.

Dann noch eine Sache, über die ich letztens per Zufall gestolpert bin, und die mir sehr gefallen hat (nachdem ich da erstmal ne Weile brauchte um durchzusteigen): http://www.highresolution.info/webde..._struktur.html

Dort besteht das in der Seite eingebundene css- ausschliesslich aus @import - Anweisung.

Zuerst werden Grundlegende Dinge eingebunden wie z.b. das CSS resettet (alle paddings, margins auf 0, dann noch nen Hack damit der der IE damit nicht gleich in den Super-Zoom Modus geht etc..), dann wird das Design durch sogenannte Mods eingebunden, die an bestimmten Stellen die CSS-Werte überschreiben.

Das geht dann soweit, dass Du tatsächlich das komplette Layout definieren kannst, und dann in einem weiteren @import noch eine Datei hast, in der nur noch (ausschliesslich) die Farbwerte definiert werden.

Das ist im Prinzip das, was Mystic vorgeschlagen hat, nur wahrscheinlich to it's extends ausgereizt :)

Edit Nachtrag: Ich finde letzters deswegen so geschickt, weil man diese Basisdinge eh eigentlich für jede Seite die man macht braucht, und solche Sachen dann immer wieder verwenden kann. Z.b. macht man ein Mod in dem nur die Navigationsklassen beschrieben sind - alle Seiten die diese Art von Navigation haben sollen bekommen diese Datei als include und fertig. Das erleichtert es ungemein, bereits bestehenden CSS-Code später wiederzuverwenden.

[Matze]

@Sebastian: Das klingt sehr interessant. Wenn ich die Webseite an sich einigermaßen fertig habe, was leider noch ein Weilchen dauert, dann versuche ich, dass css mittels @import zu gestalten.

Nachtrag: Danke. ;)