Höhe der Vorschau im Wiki vergrößern

[Rolf B]

Hallo Matthias,

sorry, nein. Ich weiß nicht, ob die Spezifikatoren mal sowas im Sinn hatten, aber die aktuelle CSS Values Level 3 Spec sagt es anders. Sie sagt vor allem, dass attr() außerhalb der content-Eigenschaft "at risk" sei, d.h. es kommt so schnell noch nicht oder kann sich noch ändern.

.icon {
  /* this works NOT, it's contrary to the Spec! */
  --scale: attr(data-foo);

  font-size: calc(var(--scale) * 1rem);
}

Problem ist, dass attr(data-foo) per Default einen String liefert, keine Zahl, und var(--scale) den String nicht in eine Zahl konvertiert. Problem ist weiter, dass attr in einer custom property Zuweisung noch nicht funktioniert.

Statt dessen dieser Blick in die Zukunft:

<style>
.icon {
  /* this IS SPECCED TO work, but doesn't (yet) */
  --scale: attr(data-foo number, 10);

  font-size: calc(var(--scale) * 1rem);
}
</style>
...
<div class="icon" data-foo="42">😀</div>

und auch dies

<style>
.icon {
  /* this IS SPECCED TO work, but doesn't (yet) */
  --scale: attr(data-foo length, 10em);

  font-size: calc(var(--scale));
}
</style>
...
<div class="icon" data-foo="4em">😀</div>

Wenn die Implementierung von attr() absehbar wäre, würd ich dazu ja was bloggen. Aber bei "at risk" - hm, könnte vergeblich oder viel zu früh sein.

Rolf