AMP：style = "width"を使用せずにCSSでアンケートを行う方法は？

Question

私はCSSで作られた調査の進捗バーを持っています.HTMLタグの内側にはstyle="width"がありますので、すべての値に対して.width-99 { width: 99%;}のようなクラスは必要ありません。

ここではアンプバージョンを作成する必要があり、.width-99 { width: 99%;}のものがないとプログレスバーを実行する別の方法があるかどうかを知りたいと思っていました。私のコードはできるだけリーンでなければならないからです。

私の他の選択肢は、AMPバージョンで無効にすることですが、それは理想的でもありません。

マイコード：

.survey { 
 
\t font-size: 1.9rem; 
 
} 
 

 
.survey-bar { 
 
\t display: inline-block; 
 

 
\t width: 91%; 
 
\t height: 3.8rem; 
 

 
\t border-radius: 4px; 
 

 
\t background: #EBEBEB; 
 
} 
 

 
.results { 
 
\t display: flex; 
 

 
\t margin-top: .5rem; 
 

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

 

 
.results span { 
 
\t display: inline-block; 
 

 
\t height: 3.8rem; 
 

 
\t border-radius: 4px; 
 

 
\t background: #777; 
 
} 
 

 
.results span.winner { 
 
\t display: flex; 
 

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

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

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

 
\t 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>

---

EDIT： AMPが加速モバイルページを意味します。

いくつかのルール：LINK

：

• は、私は私だけ

サイトAMPなく、すべてのページに1つのCSSをインラインで使用することができます

ページのインラインのすべてのCSSを配置する必要があります

AMPバージョン：LINK

Answer 1

I Githubでthis open issueを見つけ、ページあたり複数のインラインCSSを使用することは本当に禁止されています。

私の場合は、すべてのスタイルを削除し、テキストのみを残します。