AMP HTML 支持哪些 CSS 规则？

What CSS rules does AMP HTML support?

我已阅读 https://github.com/ampproject/amphtml/blob/master/docs/create_page.md 关于 CSS 的用法，但我不确定格式允许哪些 CSS 选择器。 selectors/properties有什么限制吗？

样式声明可以放在 <html> 中的任何地方还是只能放在 <head> 中？

是否可以包含任何外部样式表？

From the Official AMP GitHub Documentation:

  • 您可以在 DOM 的 <head> 中包含 1 <style> 标签。您必须将 amp-custom 附加到 <style> 标签，如下所示：<style amp-custom>your style rules here</style>

  • 您不能更改 body 元素上的 margin 属性。

  • 您不能加载外部样式表或通过 @import

    • 导入样式表

  • 您不能向元素添加样式属性。

  • 您不能使用 !important 限定词。

  • 您永远不能使用以下任何属性：

    • behavior:
    • overflow: scroll
    • overflow: auto
    • transition:
    • filter
    • animation
    • -moz-binding

  • 您可以使用以下选择器：

    • .class 例如.row
    • #id 例如#sidebar
    • tag-name 例如section
    • 选择器，选择器，例如.row, .clearfix 或 #sidebar, #main-body, article
    • 媒体查询，例如@media (max-width:48em){}

  • 您可以使用以下伪选择器：

    • :hover
    • :active
    • :visited

  • 除 button 外，您不得使用任何 input 元素（因为这些元素用于与 AMP 网络组件交互）。

  • 您有义务避免使用带有 -amp 或 -amp- 前缀的 class 名称，以免与 AMP 组件发生冲突。如果您愿意，可以覆盖这些组件的样式。

  • 您的样式规则不得超过 50KB。

  • 您可以通过列入白名单的字体供应商（... Google 字体）或通过 HTTP/HTTPS 通过@font-face 获取字体来获取字体资产——即不是通过 data: 或 JavaScript 插件（因为 JS 被禁止）。

"transition" css 属性 不是不允许的，它只限于 GPU 加速属性（目前不透明度、变换和 -vendorPrefix-transform）。

https://www.ampproject.org/docs/guides/responsive/style_pages