包含<style amp-boilerplate>的原因是什么
What is the reason for including <style amp-boilerplate>
我发现以下 CSS boilerplate code 是使用 AMP 所必需的。它有什么作用?
<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>
有谁知道在 AMP 页面中包含上述 css 代码的原因吗?
和
我可以写 < style amp-boilerplate="amp-boilerplate">
而不是 < style amp-boilerplate>
吗?
Can I write style amp-boilerplate="amp-boilerplate"
instead of style amp-boilerplate="amp-boilerplate"
?
那不是想把开头的style
换成同样的东西吗?我看不出有什么区别。
查看 this website 以了解有关 AMP 的更多信息。
基本上;
Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.
(引自我链接的网站)。
希望这对您有所帮助。
Can anyone know the reason for including above css code in AMP pages ?
这段代码本身是为了隐藏页面,直到它完全呈现,然后淡入以提供更高的感知性能指标。如果您询问标签本身,<style amp-boilerplate>
,Google 在内部使用它来命令 DOM 和 CSSOM 的解析。
Can I write < style amp-boilerplate="amp-boilerplate"> instead of < style amp-boilerplate> ?
是的,您可以将标签名称作为标签的值,它仍然会通过 AMP 验证。但是,不建议这样做,因为 AMP 规范可能随时更改,并且这可能不再有效。
我已经通过在实时页面上使用 AMP 验证器工具以及在内部使用 NodeJS 验证器和 Python 验证器来确认这一点。
我发现以下 CSS boilerplate code 是使用 AMP 所必需的。它有什么作用?
<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>
有谁知道在 AMP 页面中包含上述 css 代码的原因吗?
和
我可以写 < style amp-boilerplate="amp-boilerplate">
而不是 < style amp-boilerplate>
吗?
Can I write
style amp-boilerplate="amp-boilerplate"
instead ofstyle amp-boilerplate="amp-boilerplate"
?
那不是想把开头的style
换成同样的东西吗?我看不出有什么区别。
查看 this website 以了解有关 AMP 的更多信息。
基本上;
Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.
(引自我链接的网站)。
希望这对您有所帮助。
Can anyone know the reason for including above css code in AMP pages ?
这段代码本身是为了隐藏页面,直到它完全呈现,然后淡入以提供更高的感知性能指标。如果您询问标签本身,<style amp-boilerplate>
,Google 在内部使用它来命令 DOM 和 CSSOM 的解析。
Can I write < style amp-boilerplate="amp-boilerplate"> instead of < style amp-boilerplate> ?
是的,您可以将标签名称作为标签的值,它仍然会通过 AMP 验证。但是,不建议这样做,因为 AMP 规范可能随时更改,并且这可能不再有效。
我已经通过在实时页面上使用 AMP 验证器工具以及在内部使用 NodeJS 验证器和 Python 验证器来确认这一点。