Wert aus Attribut im CSS verwendbar? Also calc() und attr() kombinierbar?

[MudGuard]

Hi,

mit attr(title) kann man ja z.B. im content-Property auf den Wert des title-Attributs zugreifen. Kann man aber auch in einer calc-Expression mit einem Attributwert rechnen?

Wenn ich z.B.

<span data-priority="7">bla</span>

habe, daß ich dann z.B.

span[data-priority] { 
    border-width: calc(attr(data-priority) * 2px); 
    border-style:solid; 
    border-color:red; 
}

eine 14px starke border bekomme und bei

<span data-priority="1">bla</span>

eine 2px starke border?

Bei mir kommt dieselbe Border wie ganz ohne border-width-Angabe.

Grundsätzlich klappt's mit dem Rechnen, ersetze ich das attr(data-priority) durch z.B. 5, bekomme ich eine 10px starke border.

Daher die Frage:

mache ich was falsch (wenn ja: was?), oder geht das gar nicht mit dem attr() im calc()?

cu,
Andreas a/k/a MudGuard

[Christian Kruse]

Hallo MudGuard,

Kann man aber auch in einer calc-Expression mit einem Attributwert rechnen?

Es ist vorgesehen, aber die Browserunterstützung ist nicht existent. IIRC sagt die MDN, dass attr() zur Zeit von den major browsers nur für content unterstützt wird.

Edit: nein, sie sagt, die Unterstützung in etwas anderem als content sei experimentell. Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/attr.

LG,
CK

[Matthias Apsel]

Hallo MudGuard,

Vergleiche in deinen Entwicklertools z.B.

outline: calc(7 * 2px) solid;

mit

outline: calc("7" * 2px) solid;

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Vergleiche in deinen Entwicklertools z.B.

outline: calc(7 * 2px) solid;

mit

outline: calc("7" * 2px) solid;

Ja, das wird sich mit der Umsetzung der CSS3-Funktion ändern:

Note: In CSS2.1 [CSS21], the attr() expression always returns a string. In CSS3, the attr() expression can return many different types.

LG,
CK

[MudGuard]

Hi,

Danke Euch beiden. Liegt also nicht an mir …

einen cast-Operator oder eine cast-Funktion gibt's vermutlich auch nicht …

Schade, dann muß ich halt x Selektoren mit handausgerechneten Werten bauen a la

[data-priority="1"] { border-width: 2px; }
[data-priority="2"] { border-width: 4px; }
[data-priority="3"] { border-width: 6px; }
/* ... */

cu,
Andreas a/k/a MudGuard

[Christian Kruse]

Hallo MudGuard,

einen cast-Operator oder eine cast-Funktion gibt's vermutlich auch nicht …

Wenn die CSS3-Funktion umgesetzt ist, wirst du sowas schreiben können: span[data-priority] { border-width: calc(attr(data-priority number) * 2px); }

Schade, dann muß ich halt x Selektoren mit handausgerechneten Werten bauen a la

Zur Zeit ja, denke ich auch.

LG,
CK

[Gunnar Bittersmann]

@@MudGuard

Schade, dann muß ich halt x Selektoren mit handausgerechneten Werten bauen

x Selektoren ja, handausgerechnete Werte nein:

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

span[data-priority="1"] { --data-priority: 1 }
span[data-priority="2"] { --data-priority: 2 }
span[data-priority="3"] { --data-priority: 3 }
span[data-priority="4"] { --data-priority: 4 }
span[data-priority="5"] { --data-priority: 5 }
span[data-priority="6"] { --data-priority: 6 }
span[data-priority="7"] { --data-priority: 7 }

Und das mit den x Selektoren kann man einem Präprozessor überlassen:

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

@for $i from 1 through 7
{
	span[data-priority="#{$i}"] { --data-priority: $i }
}

Dann kann man natürlich auch gleich die Berechnung dem Präprozessor überlassen:

span[data-priority]
{
	border-style: solid; 
	border-color: red;
}

@for $i from 1 through 7
{
	span[data-priority="#{$i}"] { border-width: $i  * 2px }
}

LLAP 🖖

PS: Kann man den Syntaxhighlighter updaten oder gegen einen funktionierenden austauschen?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

x Selektoren ja, handausgerechnete Werte nein:

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

span[data-priority="1"] { --data-priority: 1 }
span[data-priority="2"] { --data-priority: 2 }
span[data-priority="3"] { --data-priority: 3 }
span[data-priority="4"] { --data-priority: 4 }
span[data-priority="5"] { --data-priority: 5 }
span[data-priority="6"] { --data-priority: 6 }
span[data-priority="7"] { --data-priority: 7 }

Hier könnte man auf die Idee kommen, die Regeln mit den x Selektoren zu sparen und
statt <span data-priority="1">
gleich <span style="--data-priority: 1"> usw.
im Markup zu notieren.

Netter Versuch, geht aber nicht.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

span[data-priority="1"] { --data-priority: 1 }
span[data-priority="2"] { --data-priority: 2 }
span[data-priority="3"] { --data-priority: 3 }

Wo wäre der Vorteil gegenüber

[data-priority="1"] { border-width: 2px; }
[data-priority="2"] { border-width: 4px; }
[data-priority="3"] { border-width: 6px; }

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

span[data-priority="1"] { --data-priority: 1 }
span[data-priority="2"] { --data-priority: 2 }
span[data-priority="3"] { --data-priority: 3 }

Wo wäre der Vorteil gegenüber

[data-priority="1"] { border-width: 2px; }
[data-priority="2"] { border-width: 4px; }
[data-priority="3"] { border-width: 6px; }

• offensichtlicher, wie sich die border-width ergibt
• DRY - wenn ich die Berechnung ändere, dann nur an einem Ort

LG,
CK

[Gunnar Bittersmann]

@@Matthias Apsel

span[data-priority]
{
	border-width: calc(var(--data-priority) * 2px);
	border-style: solid; 
	border-color: red;
}

span[data-priority="1"] { --data-priority: 1 }
span[data-priority="2"] { --data-priority: 2 }
span[data-priority="3"] { --data-priority: 3 }

Wo wäre der Vorteil gegenüber

[data-priority="1"] { border-width: 2px; }
[data-priority="2"] { border-width: 4px; }
[data-priority="3"] { border-width: 6px; }

Dass man die Berechnung dem Rechner überlässt. (No pun intended.™️)

Es wären ja auch kompliziertere Operationen als * 2px denkbar.

LLAP 🖖