自定义 noscript 样式未通过 AMP 验证，将其与样板混淆

Question

我的 AMP HTML 页面上有几个元素有不透明度动画。我已将这些元素设置为具有 opacity: 0 的样式，因此我可以将它们淡入。

如果用户禁用了 javascript 并且元素无法淡入，我希望它们具有 opacity: 1.

我已经尝试在我的 <head> 中使用这个 HTML 来实现它：

<style amp-custom>      
   .bubble-animated {
    opacity: 0;
  }
</style>
<noscript>
  <style amp-custom>
    .bubble-animated {
      opacity: 1;
    }
  </style>
</noscript>

但是，我从 AMP 验证程序中收到以下两个错误：

属性 'amp-custom' 可能不会出现在标记 'noscript > style[amp-boilerplate] - old variant' 中。（在第二个 <style amp-custom> 标签上）
标签 'noscript enclosure for boilerplate' 在文档中出现了不止一次。（在实际样板 <noscript> 标签上）

我已经尝试了几个变体，但无法验证我的页面。此处提供了我网站的完整 HTML 页面：https://pastebin.com/uAMCcQur

实现这一目标的正确方法是什么？有可能吗？

Answer 1

改变

  footer {
    margin-top: 3rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
  }
</style><noscript>
  <style amp-custom>
    .bubble-animated {
      opacity: 1;
    }
  </style>
</noscript>

至

  footer {
    margin-top: 3rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
  }

   .bubble-animated {
      opacity: 1;
  }
</style>

Answer 2

您可以使用html标签上的属性来检查页面是否加载了AMP库的JS。

html 标签可能如下所示：

<html ⚡="" lang="de" amp-version="1531347091169" class="i-amphtml-singledoc i-amphtml-standalone" style="padding-top: 0px !important;">

属性 amp-version 可用于在您的 css 中进行检查，如下所示：

<style amp-custom>      
  html[amp-version] .bubble-animated {
    opacity: 0;
  }
</style>

自定义 noscript 样式未通过 AMP 验证，将其与样板混淆

Custom noscript style fails AMP validation, confusing it with boilerplate

amp-html