Комбинация calc() с attr() в CSS

Мне было интересно, могу ли я объединить функцию 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));
}

Проект говорит, что он должен работать, но в моем случае (Chrome 31.0.1650.63 m и Firefox 25.0.1) это не так. Есть два случая:

Я сделал это неправильно
Пока не поддерживается

Какая сделка?

Пример скрипта

Ответы

Ответ 1

В настоящий момент attr() не поддерживается по умолчанию в любом крупном браузере для любых атрибутов, кроме "контента". Подробнее об этом читайте здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Ответ 2

Похоже, что существует способ с помощью var s

.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, которую я делаю, я чувствую, что это будет ключом к этой проблеме.

Ответ 3

В настоящий момент функция 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>