包含 <style amp-boilerplate> 的原因是什么答案

【问题标题】：What is the reason for including <style amp-boilerplate>包含 <style amp-boilerplate> 的原因是什么
【发布时间】：2016-07-30 18:48:40
【问题描述】：

我发现使用 AMP 需要以下 CSS boilerplate code。它有什么作用？

 &lt;style amp-boilerplate&gt;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}}&lt;/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;/style&gt;&lt;/noscript&gt;

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

和

我可以写< style amp-boilerplate="amp-boilerplate"> 而不是< style amp-boilerplate> 吗？

【问题讨论】：

标签： html css custom-attributes

【解决方案1】：

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

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

我可以写

是的，您可以将标签名称作为标签的值，它仍然会通过 AMP 验证。但是，不建议这样做，因为 AMP 规范可能随时更改，并且可能不再有效。

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

【讨论】：

先生 .. 您在答案的第一部分中将 amp-boilarplate 作为标签告知.. 它是标签还是属性？
从技术上讲，它是样式标签的一个属性，但 AMP 解释这些的方式也可能是它们自己的标签。出于您的目的，将其视为一个属性。我已经编辑了我的答案以减轻这种困惑。

【解决方案2】：

我可以写style amp-boilerplate="amp-boilerplate" 而不是style amp-boilerplate="amp-boilerplate" 吗？

这不是试图用相同的东西替换最初的style 吗？我看不出有什么不同。

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

基本上；

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

（引自我链接的网站）。

希望对你有所帮助。

【讨论】：

先生.. 非常抱歉.. 请立即查看问题。我用我想知道的正确信息更新了它。看到样板中的变化 - >样板=样板
现在更有意义了 :-) 正如@JonathanKempf 发布的那样，您可以进行更改，但确实不建议您这样做。