CSS-Variablen sind immer ein heißes Thema, wenn über die „Zukunft von CSS“ gesprochen wird. Sie sind tatsächlich nativ erhältlich, aber ihre Verwendung in der Produktion (ohne ein CSS- Präprozessor-Framework) liegt noch in weiter Ferne. Es gibt jedoch eine Funktion, die tatsächlich bereits einige Browserunterstützung hat und ein CSS-Variablen-Gefühl vermittelt, und das ist der Wert currentColor.
Es funktioniert so
div {
color: red;
border: 5px solid currentcolor;
box-shadow: 0 0 5px solid currentcolor;
}Ich habe davon auf einem Panel auf der SXSW 2011 über CSS3 mit Stephanie & Greg Rewis, Estelle Weyl und Christopher Schmitt erfahren. Eine Google-Suche ergab den Artikel von Divya Manian, die sagt
[…] Sie können diesen Wert verwenden, um anzugeben, dass Sie den Wert von color für andere Eigenschaften verwenden möchten, die einen Farbwert akzeptieren: Rahmen, Schatten, Konturen oder Hintergründe.
Dieser Wert wurde erstmals 2009 von Opera unterstützt, seitdem von Firefox 3.5+, Chrome 1+ und Safari 4+.
Hier sind die Spezifikationen und die Can I Use Informationen.
Es folgt der Kaskade
body { color: red; }
div { border: 5px solid currentcolor; }Man kann es nicht austricksen.
Nehmen wir an, Sie möchten die variable Qualität nutzen, aber dann die Farbe für den eigentlichen Text zurücksetzen… das funktioniert nicht
div {
color: red;
border: 5px solid currentcolor;
box-shadow: 0 0 5px currentcolor;
color: black;
}Alles wird schwarz.
Anwendungsfälle
- Verwendung in Animationen
- Button-Ränder und SVG-Füllungen, die dem Text entsprechen
- Interface-Design, das Farben komponentenumfassend erbt.
Chris: Wissen Sie zufällig, ob sich das vom einfachen Weglassen des Farbwertes des Rahmens unterscheidet (wie unten gezeigt)? Ich mache das schon lange so, ohne wirklich darüber nachzudenken – es funktioniert einfach.
body { color: red; }
div { border: 5px solid; }
Das funktioniert immer noch, wie Sie wissen. Es gab einfach keine Möglichkeit, dieses Verhalten explizit zu deklarieren, und ich denke, currentColor ist eine Reaktion darauf.
Ja, wenn Sie sich die Kommentare in diesem Beitrag ansehen, erwähnen die Leute eine Reihe von Elementen, die die Farbe von der `color`-Eigenschaft „erben“. Grundsätzlich tut dies alles im Vordergrund, einschließlich Rahmen, Text, Listenpunkten, Alt-Text bei Bildern (wenn das Bild fehlt) und sogar das HR-Element übernimmt den Wert von der `color`-Eigenschaft. Ich ging davon aus, dass dies auch Auswirkungen auf auf einem Canvas gezeichnete Elemente hätte, aber ich glaube, das war zu viel meiner Annahmen. :)
Das scheint im Grunde zu sein, wie currentColor funktioniert, wie Chris erwähnt – eine „Reaktion“ auf dieses bereits bestehende Verhalten. Also jetzt ist es, glaube ich, nicht mehr nur auf die Vordergrundelemente beschränkt, sondern auf alles, was einen Farbwert akzeptiert.
Chris,
Verwenden Sie ein Präprozessor-Framework für die Arbeit, die Sie tun? Wenn nicht, warum nicht?
-Theo
Ja, das würde ich auch gerne wissen :D Ich habe in letzter Zeit darüber nachgedacht, mich mit SASS und Compass zu beschäftigen, bin mir aber nicht sicher, ob das für mich ein guter Schritt wäre. Chris, bitte sagen Sie uns etwas über Ihre Haltung zu Präprozessor-Frameworks. :)
Ich bin kein Fan von Präprozessor-Frameworks =\ Ich genieße es nie, eine neue Syntax zu lernen, um etwas zu tun, das ich bereits gut machen kann.
Im vergangenen Jahr habe ich PHP verwendet, um mein CSS beim Entwickeln zu rendern, und dann die generierte Quelle beim Livegang in eine style.css-Datei kopiert und eingefügt.
Ich habe diesen schicken Artikel gefunden, der den Prozess beschreibt. Aber ich kann eine Skriptsprache verwenden, die ich bereits kenne (PHP), und ich kann meine eigenen Funktionen erstellen, um mein CSS mit beliebig vielen Argumenten zu generieren. Das ist auf diese Weise selbsterklärender und weniger restriktiv.
http://www.impressivewebs.com/dynamic-css3/
Beachten Sie, dass ich dies nicht im Live-Quellcode verwende, da es eine Header-Umschreibung erfordert, die einige Server nicht mögen. Behalten Sie diese Technik also auf einem lokalen Entwicklungsserver bei.
Viele Grüße :)
– Brandtley
Ich benutze sie noch nicht für die Mehrheit meiner Arbeit. Es gibt viele Gründe… ich sollte wohl einen Beitrag darüber schreiben. Teilweise geformte Ideen
– Ich habe nicht das Gefühl, dass ich viel Zeit sparen würde oder Probleme lösen würde, die ich sonst nicht lösen kann
– Es wäre schwierig, sie in einige meiner Team-Workflows zu integrieren
Ich möchte überhaupt nicht negativ sein, denn ich liebe die Syntax. Wenn CSS nativ so wäre, wäre das eine enorme Verbesserung.
@Chris: Ich sehe eine hervorragende Umfragefrage für nächsten Monat :-)
„Verwenden Sie ein Präprozessor-Framework für Ihre CSS-Arbeit?“
– Ja, ständig
– Ja, ab und zu
– Nein, ich entscheide mich dagegen
– Ein *was* für CSS?
Ich benutze StaticMatic, um Inhalte usw. zu generieren, und es funktioniert wirklich für schnelles Prototyping. Wie die meisten Dinge – es gibt Stärken und Schwächen – aber ich muss sagen, ich habe eine ziemlich nützliche _base.sass-Sammlung von SASS-Mixins. (Fühlen Sie sich frei, sie mitzunehmen: https://github.com/andrewdc/hidden_rebel_base)
Im Allgemeinen – ich habe sehr positive Erfahrungen mit SASS, Compass, Staticmatic usw. gemacht. Das liegt vielleicht daran, dass die meisten meiner komplexen Dinge separat erstellt und dann in eine Website integriert werden, …vielleicht passt dieser Workflow also nicht zu jedem.
Wie Chris erwähnt – in einem teambasierten Workflow – kann die direkte Verwendung eines Frameworks unübersichtlich werden, wenn mehrere Designer beteiligt sind und einige es benutzen und andere nicht.
Ich verwende SASS und Compass extensiv in meinen Rails-Anwendungen. Sie helfen wirklich dabei, Ihr Markup semantischer zu gestalten, da Sie gängige Strategien direkt in jede CSS-Deklaration einfügen können, ohne auf eine Klasse wie „rounded“ zurückgreifen zu müssen.
Ich bin jedoch Entwickler, kein Designer, daher könnte das etwas mit der Anziehungskraft für mich zu tun haben.
Übrigens verwendet das SCSS-Format in SASS die gleiche Syntax wie reines CSS, nur dass Sie Funktionen einfügen und Deklarationen verschachteln können.
Es funktioniert bei mir gut in Chrome 10 http://jsfiddle.net/laukstein/2ysAr/6/
Funktioniert mit border, aber nicht mit -webkit-box-shadow (http://jsfiddle.net/n8chy/) – ich glaube, das bedeutet, dass es nicht implementiert ist, da das `border-color`-Verhalten lange vor der Implementierung dieses `currentColor`-Dings existierte.
Ja, es funktioniert für Rahmen und alles, wo das Nicht-Spezifizieren von Farbe früher als aktuelle Farbe galt: http://jsfiddle.net/2ysAr/show/ und es funktioniert in allen Browsern. Ich glaube nicht, dass der Standardwert für `box-shadow` die aktuelle Farbe ist, sondern eine vom UA gewählte Farbe. Das wird also nicht zutreffen.
Der Anwendungsfall, den Sie gesucht haben = ein skurriler CSS Tricks-Beitrag über currentColor :)
Meh, ich benutze einfach PHP als Variablen, wenn ich sie so sehr brauche, einfach, schmerzlos und ohne sich um die Unterstützung kümmern zu müssen.
In der Tat. Auf die gleiche Weise, wie wir PHP verwenden, um dynamisches JavaScript zu erstellen, funktioniert es auch mit CSS.
woahh! so schwer zu verstehen das css.. Ich bin Anfänger : (
Beachten Sie, dass es von IE9+ unterstützt wird.