AMP では、これまで style 属性が使えませんでした。
使ってしまうと、もれなく AMP エラーが出ていました。
しかし、2018 年 7 月より、AMP でも style 属性が使えるようになりました。
例えば、このように書いて試してみます。
<p style="color: red;">AMP で style 属性が使えるよ！</p>すると、こう表示されます。
AMP で style 属性が使えるよ！
AMP ページでも、AMP エラーが出ることなく、文字色に style 属性で指定した赤が反映されます。
この記事の AMP ページには、下記の URL から移動できます。
https://firstlayout.net/amp-corresponds-to-style-attribute/?amp=1
AMP テストの検証結果は合格。
https://search.google.com/test/amp?id=W02e92S5nMQ2omO8fCXhsA
style 属性は、AMP コンポーネントにも指定が可能です。
私が試した限り、指定する CSS プロパティや値に制限はありませんでした。
どこにでも、どの CSS プロパティでも、style 属性で指定できます。
AMP での CSS の指定が、柔軟になりました。
HTML への直接の指定は避ける
ただ、AMP で使えるようになっても、HTML へ直接 style 属性を指定するのは避けるべきです。
理由は、CSS の不要な重複につながるため。
何度も何度も同じ指定があるのは、無駄でしかありません。
また、メンテナンス性が大幅に低下する恐れがあります。
可能な限り使用しないのが堅実です。
ちなみに、通常ページでも、できるだけ HTML に style 属性を使わないのが無難です。PageSpeed Insights は、非推奨としています。
対応したことで起こっているバグ
AMP が style 属性に対応したことにより、一部でバグが発生しています。
amp-sidebar コンポーネントを使うと、Chrome デベロッパーツールのコンソールに下記のエラーが出る場合があります。
Inline styles with `top`, `bottom` and other CSS rules are not supported yet for fixed or sticky elements (#14186). Unexpected behavior may occur.
Google のエンジニアによれば、AMP runtime が誤検知しているのだそう。
そして、このエラーは無視して構わないとのこと。
AMP エラーは出ないため、問題はありません。
AMP における CSS の制限
style 属性は使えるようになりましたが、AMP では CSS に関するいくつかの制限があります。
まず、許可されている CSS のサイズは、50 キロバイトまでです。
わずかでも超えてしまうと、AMP エラーが出ます。
これは、AMP の最大の魅力である、高速なレンダリングに欠かせない制限です。
また、下記の 3 つは許可されていません。
!importantの使用-amp-とi-ampをセレクターに指定- 一部のフォントを除き
<link rel=”stylesheet”>でのスタイルシートの読み込み
いずれも使ってしまうと、AMP エラーが出ます。
AMP の CSS に関する参考ページ
AMP の CSS に関する詳細な情報は、下記のページでご覧いただけます。
いずれも日本語に翻訳されたページがありますが、最新情報が反映されていません。
翻訳ページには古い情報が書かれているため、注意が必要です。
また、Restricted styles に書かれている transition プロパティと @keyframes の制限は、変わった可能性があります。
例えば、transition プロパティに color などを使っても、ちゃんと効きます（ Chrome 69 で確認）。
.sample {
color: red;
transition: color .3s cubic-bezier(.4, 0, .2, 1);
}
.sample:hover {
color: blue;
}@keyframes に filter や clip-path を指定すると、アニメーションが動きます（ Chrome 69 で確認）。
AMP ページの @keyframes で clip-path が動く様子は、「画像を徐々に表示する CSS アニメーション」でご覧いただけます（ AMP ページに移動します）。
AMP にキャッシュされているページでも、動いています。
以前は、@keyframes で clip-path は動かなかったのに。
仕様が変わったのか、CSS が効いてしまうバグなのか、調べても分かりませんでした。