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

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

  1. 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

  2. Hallo MudGuard,

    Vergleiche in deinen Entwicklertools z.B.

    outline: calc(7 * 2px) solid;
    

    mit

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

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. 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

      1. 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

        1. 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

        2. @@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?

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          2. 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

            --
            Rosen sind rot.
            1. 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

            2. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory