CSS が柔軟に！AMP が style 属性のインラインスタイルに対応
style 属性を許可
AMP では、これまで style 属性が使えませんでした。使ってしまうと、もれなく AMP エラーが出ていました。
しかし、2018 年 7 月より、AMP でも style 属性が使えるようになりました。
参考：[Master feature] Support inline CSS · Issue #14072 · ampproject/amphtml
例えば、このように書いて試した AMP Playground での デモ をご覧いただけます。
<p style="color: red;">AMP で style 属性が使えるよ！</p>
AMP エラーが出ることなく、style 属性で指定した赤が文字色に反映されます。
style 属性は、AMP コンポーネントにも指定が可能です。私が試した限り、指定する CSS プロパティや値に制限はありませんでした。どこにでも、どの CSS プロパティでも style 属性で指定できます。
AMP での CSS の指定が柔軟になりました。
HTML への直接の指定は避ける
ただ、AMP で使えるようになっても HTML へ直接 style 属性を指定するのは避けるべきです。
理由は、CSS の不要な重複につながるため。何度も何度も同じ指定があるのは、無駄でしかありません。また、メンテナンス性が低下する恐れがあります。可能な限り使用しないのが堅実です。
尚、非 AMP ページでも、できるだけ HTML に style 属性を使わないのが無難です。PageSpeed Insights は、非推奨としています。
AMP における CSS の制限
style 属性は使えるようになりましたが、AMP では CSS に関するいくつかの制限があります。
まず、許可されている CSS のサイズは、75 キロバイトまでです。わずかでも超えてしまうと、AMP エラーが出ます。
ただし、2019 年 1 月より @keyframes は <style amp-keyframes> タグにも書けるようになり、この <style amp-keyframes> 内に書く CSS はサイズ制限の対象外です。
参考：AMP の第 3 の CSS 指定方法 amp-keyframes
また、下記の 3 つは許可されていません。
!importantの使用。-amp-とi-ampをセレクターに指定。- 一部のフォントを除き
<link rel=”stylesheet”>でのスタイルシートの読み込み。
いずれも使ってしまうと、AMP エラーが出ます。
尚、<link rel=”stylesheet”> でのスタイルシートの読み込みを許可されている一部のフォントとは、下記の 5 つです。
| フォント提供サービス名 | 許可されている URL |
|---|---|
| Typography.com | https://cloud.typography.com |
| Fonts.com | https://fast.fonts.net |
| Google Fonts | https://fonts.googleapis.com |
| Typekit | https://use.typekit.net |
| Font Awesome |
|
参考ページ
AMP の CSS に関する詳細な情報は、下記のページでご覧いただけます。
ただし、Performance recommendations に書かれている transition プロパティと @keyframes の制限は、変わった可能性があります。
執筆時点では、transition は opacity と transform のみが対象と書かれています。しかし、color などに指定しても効きます。
.sample {
color: red;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sample:hover {
color: blue;
}
実際に transition に color を指定した デモ があります。<button> にマウスポインターを乗せれば、テキストの色が 5 秒（transition-duration が 5s）をかけて赤から青に変化します。AMP エラーにはなりません。
@keyframes も opacity と transform のみが対象と書かれています。ただ、filter や clip-path を指定しても AMP エラーが出ることなくアニメーションが動きます。@keyframes で clip-path が動く様子は デモ でご覧いただけます。このアニメーションは、画像を徐々に表示する CSS アニメーション で紹介しています。
以前は、@keyframes で clip-path は動きませんでした。仕様が変わったのか、CSS が効いてしまうバグなのか、調べても分かりませんでした。