投稿日:2019/01/28
更新日:2019/02/08
公式ドキュメントを読むのが確実だが、情報量が多いので掻い摘んで紹介する。
!importantもstyle属性も無効ということはAMPネイティブなインラインスタイルを上書きする手段がないということ。
50000バイトを超えたCSSを突っ込むとどうなるのかというと、有効なAMP HTMLではないとみなされ通常のスマホページに遷移するだけ。
AMP ページを検証する
AMP HTMLにアクセスして、URLの後ろに
CSSはインラインstyle[amp-custom]タグでの追加のみ
以下タグで囲われたインラインでのstyleタグのみ許可される。<style amp-custom>
</style>
要素にインラインで書かれたstyle属性は許可されない。
!important、CSSハックは無効
上記のとおり。*display: none; のようなCSSハックも構文エラーとなる。!importantもstyle属性も無効ということはAMPネイティブなインラインスタイルを上書きする手段がないということ。
style[amp-custom]タグの中は50000バイトまで
意外と制限が厳しいのでセレクタ入れ子数は最初の設計時点で抑える、とか考慮が必要。50000バイトを超えたCSSを突っ込むとどうなるのかというと、有効なAMP HTMLではないとみなされ通常のスマホページに遷移するだけ。
検証ページ
Chromeで検証可能。AMP ページを検証する
AMP HTMLにアクセスして、URLの後ろに
#development=1
を付けるだけ。