CSS-Eigenschaften mit mehreren Werten und optionalen benutzerdefinierten Eigenschaftswerten

Stellen Sie sich vor, Sie haben ein Element mit einer mehrwertigen CSS-Eigenschaft, wie z. B. transform: optionale Custom-Property-Werte

.el {
  transform: translate(100px) scale(1.5) skew(5deg);
}

Stellen Sie sich nun vor, Sie möchten nicht *immer* alle transform-Werte anwenden, sodass einige optional sind. Sie könnten an optionale benutzerdefinierte Eigenschaftswerte in CSS denken

.el {
  /*         |-- default ---| |-- optional --| */
  transform: translate(100px) var(--transform);
}

Aber überraschenderweise funktioniert die Verwendung optionaler benutzerdefinierter Eigenschaftswerte auf diese Weise nicht wie beabsichtigt. Wenn die Variable --transform *nicht* definiert ist, wird die gesamte Eigenschaft nicht angewendet. Ich habe einen kleinen "Trick", um das zu beheben, und er sieht so aus

.el {
  transform: translate(100px) var(--transform, );
}

Bemerken Sie den Unterschied? Dort ist ein Fallback definiert, der auf einen **leeren Wert gesetzt** ist: (, )

Das ist der Trick und er ist sehr nützlich! Hier sagt die Spezifikation dazu

Als Ausnahme von den üblichen Komma-Auslassungsregeln, die erfordern, dass Kommas weggelassen werden, wenn sie keine Werte trennen, muss ein bloßes Komma ohne nachfolgende Elemente in var() als gültig behandelt werden und einen leeren Fallback-Wert angeben.

Dies steht in gewisser Weise in spiritueller Beziehung zum The CSS Custom Property Toggle Trick, der die Tatsache nutzt, dass eine benutzerdefinierte Eigenschaft den Wert eines Leerzeichens hat.

Demo

Wie gesagt, das ist nützlich und funktioniert für jede CSS-Eigenschaft mit mehreren Werten. Die folgende Demo zeigt es neben dem transform-Beispiel, das wir gerade besprochen haben, auch mit text-shadow, background und filter.

Sehen Sie den Pen CSS var – Fallback To Nothing von Yair Even Or (@vsync) auf CodePen.

Einige Eigenschaften, die mehrere Werte akzeptieren, wie z. B. text-shadow, erfordern eine spezielle Behandlung, da sie nur mit einem Komma-Trennzeichen funktionieren. In diesen Fällen wissen Sie als Code-Autor, dass die benutzerdefinierte CSS-Eigenschaft nur in einer Situation verwendet werden soll, in der bereits ein Wert definiert ist, an dem die benutzerdefinierte Eigenschaft verwendet wird. Dann sollte direkt vor dem ersten Wert ein Komma in die benutzerdefinierte Eigenschaft eingefügt werden, wie hier

--text-shadow: ,0 0 5px black;

Dies hemmt natürlich die Möglichkeit, diese Variable an Stellen zu verwenden, an denen sie der einzige Wert einer Eigenschaft ist. Das kann jedoch gelöst werden, indem "Schichten" von Variablen zu Abstraktionszwecken erstellt werden, d. h. die benutzerdefinierte Eigenschaft verweist auf untergeordnete benutzerdefinierte Eigenschaften.

Vorsicht vor Sass-Compiler

Bei der Untersuchung dieses Tricks habe ich einen Fehler im Sass-Compiler entdeckt, der den leeren Fallback-Wert (,) entfernt, was gegen die Spezifikation verstößt. Ich habe den Fehler gemeldet und hoffe, dass er bald behoben wird.

Als vorübergehende Lösung kann ein Fallback verwendet werden, der keine Darstellung verursacht, wie z. B.

transform: translate(100px) var(--transform, scale(1));