web-dev-qa-db-ja.com

CSSでcalc（）をattr（）と組み合わせる

私は、calc（）関数をattr（）関数と組み合わせて、次のようなことを実現できるかどうか疑問に思っていました。

<div class="content" data-x="1">
    This box should have a width of 100px
</div>

<div class="content" data-x="2">
    This box should have a width of 200px
</div>

<div class="content" data-x="3">
    This box should have a width of 300px
</div>

[〜＃〜] css [〜＃〜]

.content{
    //Fallback. If no calc is supported, just leave it at 100px
    width: 100px;
}


.content[data-x]{
    // Multiply the width of the element by the factor of data-x
    width: calc(100px * attr(data-x));
}

draft は動作するはずですが、私の場合（Chrome 31.0.1650.63 mおよびFirefox 25.0.1）は動作しません。その場合、次の2つのケースがあります。

  1. 私はそれを間違えた
  2. まだサポートされていません

どうしたんだ？

例Fiddle

csscss3css-calc
31
Loupax

現在、attr（）は、「content」以外の属性について、主要なブラウザではデフォルトでサポートされていません。詳細については、こちらをご覧ください： https://developer.mozilla.org/en-US/docs/Web/CSS/attr

23
jede

回避策があるようです sing vars

_.content{
    --x: 1;
    width: calc(100px * var(--x));
    background: #f00;
}

[data-x="1"] { --x: 1; }
[data-x="2"] { --x: 2; }
[data-x="3"] { --x: 3; }

/*doesn't look like this works unfortunately
[data-x] { --x: attr(data-x); }
seems to set all the widths to some really large number*/
_

コメントアウトされたセクションは完璧だったでしょうし、これはあなたのアイデアがうまくいかなかった理由と同じかもしれませんが、cssはjavascript（_'2' * 3 //=6_ ）。
attr()は、数字ではなく文字列を返します。これは、.content:after { content:var(--x) };を追加することで確認できます。何も出力されません。--xは数字で、contentは文字列を受け入れます。

キャストするCSS関数がある場合、それがこの問題の鍵になると思います。

キャストのように見える （まあ、通訳） CSS4 にあるものになり、次のように単純になります

_.content{
    width: calc(100px * attr(data-x number, 1));
    background: #f00;
}
_

これまで、この実験的な仕様でさえサポートしているブラウザはありませんが、サポートしているときに更新します。

18
Hashbrown

現時点では、attr（）関数はChromeで機能していません。

ほぼナイスな解決策は、CSS変数を使用することです。

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
         --module-size: 100px;
         --data-x:1; /* Default value */
       }

      .content{
          width: calc(var(--module-size) * var(--data-x));
          border: 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="content" style="--data-x:1">
        This box should have a width of 100px
    </div>

    <div class="content" style="--data-x:2">
        This box should have a width of 200px
    </div>

    <div class="content"  style="--data-x:3">
        This box should have a width of 300px
    </div>
  </body>
</html>
6
Simon Rigét