Question

我找到了以下 CSS样板代码需要使用AMP。它做了什么？

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; style amp-boilerplate＆gt; body {-webkit-animation：-amp-start 8s steps（1，end）0s 1 normal normal; -moz-animation：-amp-start 8s steps（1，end）0s 1正常两者; -ms-animation：-amp-start 8s步骤（1，结束）0s 1正常两者;动画：-amp-start 8s步骤（1，结束）0s 1 normal normal} @  -  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}到{visibility：visible}} @  -  o-keyframes -amp-start {from {visibility：hidden} to {visibility：visible}} @keyframes -amp-start {from {visibility：hidden} to { visibility：visible}}＆lt; / style＆gt;＆lt; noscript＆gt;＆lt; style amp-boilerplate＆gt; body {-webkit-animation：none; -moz-animation：none; -ms-animation：none; animati上：无}＆LT; /风格＆GT;＆LT; / NOSCRIPT＆GT;

＆＃的xD;＆＃XA;

＆＃的xD; ＆＃xA; 
＆＃xA;＆＃xA;  有谁知道在AMP页面中包含上述css代码的原因？ 
＆＃xA;＆＃ xA; 和
＆＃xA;＆＃xA;  我可以写＆lt;样式amp-boilerplate =“amp-boilerplate”＆gt; 而不是＆lt;样式amp-boilerplate＆gt; ？ ＆＃xA;

Answer 1

有谁知道在AMP页面中包含上述css代码的原因？

此代码本身用于隐藏页面直到完全呈现，然后将其淡入以提供更高的感知性能指标。如果您询问标记本身，<style amp-boilerplate>，则由Google内部用于命令解析DOM和CSSOM。

我可以写＆lt; style amp-boilerplate =“amp-boilerplate”＆gt;而不是＆lt;样式amp-boilerplate＆gt; ？

是的，您可以将标记名称作为标记的值，它仍将通过AMP验证。但是，建议不要这样做，因为AMP规范可能随时发生变化，这可能不再有效。

我已通过在实时页面上使用AMP验证工具并在内部同时使用NodeJS验证器和Python验证器来确认这一点。

Answer 2

我可以写style amp-boilerplate="amp-boilerplate"代替style amp-boilerplate="amp-boilerplate"吗？

是不是试图用同样的东西替换最初的style？我没有看到任何区别。

查看this website以了解有关AMP的更多信息。

基本上;

虽然AMP HTML页面中的大多数标签都是常规HTML标签，但某些HTML标签会替换为AMP专用标签（另请参阅AMP规范中的HTML标签）。这些称为AMP HTML组件的自定义元素使常见模式易于以高效的方式实现。

（引自我链接的网站）。

希望这可以帮助你。

包含<style amp-boilerplate =“”>的原因是什么

2 个答案: