CSS が柔軟に!AMP が style 属性のインラインスタイルに対応

AMPがstyle属性の使用を許可

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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.

amp-sidebarで発生するエラー

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;
}

@keyframesfilterclip-path を指定すると、アニメーションが動きます( Chrome 69 で確認)。

AMP ページの @keyframesclip-path が動く様子は、「画像を徐々に表示する CSS アニメーション」でご覧いただけます( AMP ページに移動します)。

AMP にキャッシュされているページでも、動いています。

以前は、@keyframesclip-path は動かなかったのに。

仕様が変わったのか、CSS が効いてしまうバグなのか、調べても分かりませんでした。