使动态 CSS 自定义属性脱节答案

【问题标题】：Moving dynamic CSS custom property out of line使动态 CSS 自定义属性脱节
【发布时间】：2022-02-22 06:11:55
【问题描述】：

我正在尝试实施 CSP 以强制没有内联样式。我有最后一项是纯 CSS 星级。使用内联样式，我可以使用通过 php 调用数据库填充的自定义属性来渲染星星（见下文）。但我不知道如何将其排除在外以符合安全最佳实践。

CSS

:root {
     --star-size: 60px;
     --star-color: #fff;
     --star-background: #fc0;
}

 .Stars {
     --percent: calc(var(--rating) / 5 * 100%);
     display: inline-block;
     font-size: 20px;
     font-family: Times;
     line-height: 1;
}
 .Stars::before {
     content: '★★★★★';
     letter-spacing: 3px;
     background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

HTML

<td><div class="Stars" style="--rating: <?php echo htmlspecialchars($row['RATING']); ?>;"></div></td>

【问题讨论】：

您真正需要多精确的渐变填充？只需为每个渐变步骤制定单独的规则。例如，如果你有 5 颗星并且你不支持分数，你可能只需要 6 条规则（也占零）。如果你支持一半，11 条规则。如果你支持宿舍，21）。除此之外，任何人都可以真正区分吗？然后在 PHP 中，只是圆形。
这就是我最终做的：

标签： php html css

【解决方案1】：

我不知道如何使用 css 的数学功能，但静态定义每个星号是可行的。

[starrating="1"]{
     --percent: 20%;
}
[starrating="2"]{
     --percent: 40%;
}
[starrating="3"]{
     --percent: 60%;
}
[starrating="4"]{
     --percent: 80%;
}
[starrating="5"]{
     --percent: 100%;
}

 .Stars {
/*   --percent: calc(var(--rating) / 5 * 100%);*/
     display: inline-block;
     font-size: 20px;
     font-family: Times;
     line-height: 1;
     --star-size: 60px;
     --star-color: #fff;
     --star-background: #fc0;
}
 .Stars::before {
     content: '★★★★★';
     letter-spacing: 3px;
     background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}```

【讨论】：