4

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

样式声明可以放在任何地方<html>还是只放在<head>?

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

4

2 回答 2

19

来自官方 AMP GitHub 文档：

  • 您可以在 DOM中包含1 个 <style>标签。<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 Web 组件交互）。

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

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

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

于 2015-10-08T13:13:19.333 回答
0

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

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

于 2016-12-08T11:40:56.943 回答