我已阅读https://github.com/ampproject/amphtml/blob/master/docs/create_page.md关于CSS的用法,但我不确定该格式允许的CSS选择器。选择器/属性是否有任何限制?
样式声明可以放在<html>
的任何位置,还是只放在<head>
?
是否可以包含任何外部样式表?
答案 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