AMP Style & Layout

  • yang
  • 2021年8月5日

Supported CSS

Supported CSS：支持的CSS

与所有网页一样，AMP 页面使用 CSS 设置样式，但您不能引用外部样式表（自定义字体除外）。 由于性能影响，某些样式也被禁止。

样式可能存在于文档的头部或作为内联样式属性（请参阅向页面添加样式）。 但是您可以使用 CSS 预处理器和模板来构建静态页面以更好地管理您的内容。

注意 – AMP 组件带有默认样式，使创作响应式页面相当容易。 这些样式在 amp.css 中定义。

Disallowed styles

Disallowed styles：不允许的样式

AMP 页面中不允许使用以下样式：

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

Performance recommendations

Performance recommendations：限制使用的样式

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

限制使用的样式说明
transition 属性只能使用由 GPU 加速的属性（目前为 opacity、 transform 和 -vendorPrefix-transform）。
keyframes {…}只能使用由 GPU 加速的属性（目前为 opacity、 transform 和 -vendorPrefix-transform）。

The custom fonts exception

自定义字体属于例外情况：The custom fonts exception

AMP 网页不能包含外部样式表，但是自定义字体除外。详细了解 AMP 中的自定义字体

yang