Kann ich eine benutzerdefinierte Farbdefinition erstellen, die ich zwischen CSS, JS und HTML austauschen kann?

Question

Ich habe eine bläuliche Farbe, die ich an vielen Stellen in meiner App verwenden möchte, und im Moment kopiere ich sie und füge sie zwischen Stilen in meinem CSS ein. Gibt es eine Möglichkeit, eine Konstante wie die Standardfarben, "blau", "rot" usw. zu definieren, die ich zwischen meinem CSS, meinem HTML und meinem JS teilen könnte?

Ich würde gerne sagen können (irgendwo, vorzugsweise CSS)

myblue = #33CC99

in CSS sagen...

background-color:myblue;

in HTML sagen...

<td color="myblue"/>

und in JavaScript

tag.style.backgroundColor = myblue;

Ich vermute, dass dies unmöglich ist und Google hat nichts ergeben, also hat jemand eine Idee? Ich bezweifle, dass ich die einzige Person bin, die auf dieses Problem gestoßen ist.

Answer 1

Wie andere Benutzer festgestellt haben, kann man dies nicht direkt in HTML, JS oder CSS tun, es sei denn, man übergibt alle HTML-, JS- und CSS-Inhalte über ein CGI/PHP/ASP-Skript - was eigentlich kein schlechter Ansatz ist, da er leicht zu pflegen ist.

Wenn Sie einen Query-String im Verweis auf eingebundene CSS-/JS-Dateien verwenden - z. B. "/css/stylesheet.php?timestamp=2010-01-01+00:00:00" -, dann werden fast alle Clients Ihre CSS-/JS-Dateien aggressiv zwischenspeichern, wodurch jegliche Auswirkungen auf die Last, die das Parsen in einer Skriptsprache haben kann, zunichte gemacht werden (wenn die Website nicht besonders stark frequentiert ist, würde ich mich damit nicht zu sehr beschäftigen).

Wenn Sie Apache verwenden (was wahrscheinlich ist), wäre ein alternativer Ansatz die Verwendung von etwas wie mod_set um alle HTML-, JS- und CSS-Dateien im Handumdrehen für Sie neu zu schreiben. Dies kann schwieriger zu unterstützen sein, wenn Sie mit der Konfiguration von Apache nicht vertraut sind (oder einen anderen Webserver verwenden).

In Bezug auf die Benennung von Tags:

Bei beiden Ansätzen schlage ich vor, ein klares Tagging-System zu verwenden, um Ihre dynamischen Variablen zu kennzeichnen (z.B. %MyBlue%) und zu erwägen, dass die Variablennamen repräsentativ sind (z.B. %HeadingBackgroundColor%, %FontColor%, auch wenn beide auf %MyBlue% gesetzt sind), da dies verhindern kann, dass die Dinge später haarig werden (wenn Sie feststellen, dass die Änderung eines Wertes beabsichtigte Konsequenzen hat).

Die Verwendung repräsentativerer Namen mag auf den ersten Blick unnötig langatmig erscheinen, führt aber in vielen Fällen zu Problemen, weil die Farben auf ungewollte Weise miteinander kollidieren, wenn sie sich deutlich vom ursprünglichen Schema unterscheiden (dies trifft auf viele Mainstream-Software zu, die sich skinnen lässt, weil der Autor davon ausging, dass %Wert1% und %Wert2% immer zusammenpassen würden, ebenso wie %Wert1% und %Wert3% - was bedeutet, dass die Möglichkeiten für die Gestaltung von Themen durch eine ungewollte Abhängigkeit stark eingeschränkt sind).

Answer 2

Ich tue dies zum Zeitpunkt der Erstellung, indem ich meine CSS-Dateien durch Freemarker laufen lasse.

Answer 3

Ich bin mir nicht sicher, was Ihr Ziel ist. Wenn es darum geht, die Auswahl eines von mehreren Themen für eine Webseite zu ermöglichen, könnten Sie einfach mehrere CSS-Dateien und ein Cookie/Sitzungsvariable/Datenbank für das vom Benutzer bevorzugte Stylesheet haben. Dann könnten Sie einfach Folgendes tun

 <link rel=<? echo stylepref; ?> type='text/css'>

oder etwas in dieser Richtung

Wenn Sie die Website vollständig an Ihre Bedürfnisse anpassen möchten, ist eine der oben genannten Antworten erforderlich.

Answer 4

Es gibt kein Konzept von "Variablen" in CSS, aber ich würde dringend empfehlen no Es gibt keinen guten Grund, warum Sie nicht alle Ihre Stilinformationen in Ihrem CSS-Sheet als CSS-Klassen definieren können. Wenn Sie das tun, und dann nur besagte Klassen in HTML und Javascript anwenden, ist das eine große Erleichterung in Bezug auf Kopieren und Einfügen.

Zweitens, denken Sie daran, dass Sie mehr als eine CSS-Klasse für ein Element definieren können, z. B.

<div class='blue-text white-background'>my content</div>

Sie können diese dann unabhängig voneinander in CSS definieren, a la:

.blue-text { color : Blue; }
.white-background { background-color: white;}

und Sie können sogar Regeln erstellen, die nur wirksam werden, wenn beide angewandt werden:

.blue-text.white-background { color : AliceBlue; }

Wenn Sie die Farbauswahl dynamisch generieren lassen wollen, gibt es nur eine Möglichkeit, wie andere vorgeschlagen haben, nämlich entweder Ihre Dateien vor der Bereitstellung vorzuverarbeiten oder das CSS dynamisch zu generieren und mit der Sprache Ihrer Wahl zu bedienen.

Answer 5

Auf der reinen Client-Seite können Sie mit CSS-Gruppierungsselektoren die gleiche Farbe auf viele verschiedene Elemente anwenden:

p, .red, #sub, div a:link { color: #f00; }