AMP

支持的 CSS

和所有网页一样,AMP 网页也通过 CSS 来设定样式,但是您无法引用外部样式表(自定义字体除外)。 此外,由于性能会受到影响,某些样式不允许使用;内嵌样式属性也不允许使用。

所有样式都必须放置在文档的标头部分(请参阅向网页中添加样式)。 但是您可以使用 CSS 预处理器和模板来构建静态网页,以便更好地管理您的内容。

AMP 组件本身具有默认的样式,使自适应网页的创建过程变得容易。 这些样式在 amp.css 中进行了定义。

禁止使用的样式

AMP 网页中不允许出现以下样式:

禁止使用的样式 说明
内嵌样式属性 所有样式都必须在网页的 <head> 部分进行定义,并位于 <style amp-custom> 标记中。
!important 限定符 禁止使用该限定符。 这是 AMP 网页能够强制实施其元素尺寸设定规则的必要条件。
<link rel=”stylesheet”> 禁止使用,但 自定义字体除外。
-amp- 类和 i-amp- 标记名称 在开发者定义的样式表中,类名称不能以字符串 -amp- 开头。 这些类专门预留给系统在 AMP 运行时使用。此外,面向用户的样式表不能针对 -amp- 类和 i-amp 标记引用 CSS 选择器。

限制使用的样式

以下样式可以使用,但是在支持的值方面存在限制:

限制使用的样式 说明
transition 属性 只能使用由 GPU 加速的属性(目前为 opacitytransform-vendorPrefix-transform)。
@keyframes {...} 只能使用由 GPU 加速的属性(目前为 opacitytransform-vendorPrefix-transform)。

自定义字体属于例外情况

AMP 网页不能包含外部样式表,但是自定义字体除外。

详细了解 AMP 中的自定义字体

使用 CSS 预处理器

预处理器生成的输出内容在 AMP 网页中的效果和在其他网页中的效果一样。例如,amp.dev 网站使用 Sass。(我们使用 Grow 来构建构成 amp.dev 网站的静态 AMP 网页。)

在使用预处理器时,请特别注意您所包含的内容;请仅加载您的网页会使用的内容。 例如,head.html 包含所有必要的 AMP 标记和内嵌的 CSS(来自 *.scss 源文件)。 它还包含 amp-youtube 的自定义元素脚本,以及其他内容,以便网站上的很多网页都可以包含嵌入式 YouTube 视频。



<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>AMP Project</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

要查看上述代码如何转变成带有格式的 AMP HTML,请在 amp.dev 中查看任何网页的源代码。 (在 Chrome 中,点击右键并选择 View Page Source。)