整数的 CSS attr()：解决这个问题的好方法是什么？答案

【问题标题】：CSS attr() for integers: What is a good way to solve this?整数的 CSS attr()：解决这个问题的好方法是什么？
【发布时间】：2018-07-17 15:35:20
【问题描述】：

PHP 模板：

  <div 
class="el" 
data-spacetop="<?php echo $spacetop; ?>" 
data-spaceleft="<?php echo $spaceleft; ?>" 
data-spacetopmobile="<?php echo $spacetopmobile; ?>" 
data-spaceleftmobile="<?php echo $spaceleftmobile; ?>"></div>

HTML：

<div class="el" data-spacetop="228" data-spaceleft="876" data-spacetopmobile="90" data-spaceleftmobile="20"></div>

CSS：

 .el {
        padding-top: attr(data-spacetop) px;
        padding-left: attr(data-spaceleft) px;
    }

@media screen and (max-width:600px) {
    .el {
        padding-top: attr(data-spacetopmobile) px;
        padding-left: attr(data-spaceleftmobile) px;
    }
}

如果这行得通，那就太好了。不幸的是，它没有，尽管 W3C 草案已经存在很长时间了 (https://caniuse.com/#feat=css3-attr)。

你会如何解决这个问题？不幸的是，内联媒体查询也不支持。

【问题讨论】：

我猜你可以使用 Javascript 来做到这一点，检测窗口大小并应用内联样式

标签： php html css media-queries attr

【解决方案1】：

如果您需要支持现代浏览器，您可以使用新的闪亮CSS custom properties 而不是data-attributes 和attr()

Codepen demo

标记

<div class="el" 
style="
   --spacetop:40px;
   --spaceleft:20px;
   --spacetopmobile:10px;
   --spaceleftmobile:5px
"></div>

CSS

.el {
  border: 1px #bc9 dashed;
  padding-top: var(--spacetop);
  padding-left: var(--spaceleft);
}

@media screen and (max-width:600px) {
  .el {
    padding-top: var(--spacetopmobile);
    padding-left: var(--spaceleftmobile);
  }
}

【讨论】：

不是 CSS 变量，而是自定义属性？
嗯 .. 可能已经习惯了法语单词 :) 并进行系统翻译：/
好主意！它只是不支持的IE11吗？
不错的 CSS 唯一解决方案！希望对此的支持更好；没有 Internet Explorer 支持，只有 edge (15)
好吧，也不是完全错误，它们也被称为变量 :) developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

【解决方案2】：

这个语法是正确的：

padding-top: attr(data-spacetop px);

和

padding-top: attr(data-spacetop px,fallback);

但在上述两种方法中使用该属性，主流浏览器不支持。

【讨论】：