AMP：如何在不使用 style="width" 的情况下在 CSS 中进行调查？

Question

我有一个来自 CSS 调查的进度条，在 HTML 标签内我有一个 style="width" 所以我不需要类喜欢 .width-99 { width: 99%;} 的所有值。

现在，我必须制作它的 amp 版本，我想知道是否有另一种方法可以在没有 .width-99 { width: 99%;} 的情况下制作进度条。甚至因为我的代码应该尽可能精简。

我的另一个选择是在 AMP 版本中禁用它，但这也不理想。

我的代码：

.survey {
 font-size: 1.9rem;
}

.survey-bar {
 display: inline-block;

 width: 91%;
 height: 3.8rem;

 border-radius: 4px;

 background: #EBEBEB;
}

.results {
 display: flex;

 margin-top: .5rem;

 align-items: center;
 justify-content: space-between;
}


.results span {
 display: inline-block;

 height: 3.8rem;

 border-radius: 4px;

 background: #777;
}

.results span.winner {
 display: flex;

 align-items: center;
 justify-content: flex-end;
}

/* 'tick' icon */
.results span.winner:before {
 padding-right: .5rem;

 font-family: 'icomoon';
 font-size: 2.7rem;
 color: #FFF;

 content: '\e90e';
}

<div class="results">
    15%
    <div class="survey-bar">
        <span style="width: 15%"></span>
    </div>
</div>
<p>It was popularised in the 1960s</p>
<div class="results">
    80%
    <div class="survey-bar">
        <span style="width: 80%" class="winner"></span>
    </div>
</div>
<p>Letraset sheets containing Lorem Ipsum passages</p>
<div class="results">
    5%
    <div class="survey-bar">
        <span style="width: 5%"></span>
    </div>
</div>

编辑： AMP 表示加速移动页面。

一些规则：

我必须将页面的所有 CSS 内联
我只能在所有页面中使用一个 CSS 内联

没有 AMP 的网站：LINK

AMP 版本：LINK

Answer 1

我在 Github 上找到 this open issue 并且真的禁止每页使用多个内联 CSS。

因此，就我而言，我将删除所有样式，只保留文本。

AMP：如何在不使用 style="width" 的情况下在 CSS 中进行调查？

AMP: how to do a Survey in CSS without using style="width"?

html

css

survey

amp-html