AMP HTML支持什么CSS规则?

时间:2015-10-08 10:47:42

标签: css amp-html

我已阅读https://github.com/ampproject/amphtml/blob/master/docs/create_page.md关于CSS的用法,但我不确定该格式允许的CSS选择器。选择器/属性是否有任何限制?

样式声明可以放在<html>的任何位置,还是只放在<head>

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

2 个答案:

答案 0 :(得分:17)

From the Official AMP GitHub Documentation:

  • 您可以在DOM的<style>中添加 1 <head>标记。您必须将amp-custom附加到<style>标记,如下所示:<style amp-custom>your style rules here</style>

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

  • 您无法加载外部样式表或通过@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
  • input外,您不能使用任何button元素(因为这些元素用于与AMP网络组件交互)。

  • 您必须避免使用前缀为-amp-amp-的类名,以避免与AMP组件发生冲突。如果愿意,您可以覆盖这些组件的样式。

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

  • 您可以通过白名单字体供应商(... Google字体)获取字体资源,也可以通过HTTP / HTTPS通过@ font-face获取字体 - 即不通过data:或JavaScript插件(因为JS被禁止)。

答案 1 :(得分:0)

&#34;过渡&#34; css属性不被禁止,它仅限于GPU加速属性(目前不透明度,变换和-vendorPrefix-transform)。

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