Search code examples
amp-html

Custom noscript style fails AMP validation, confusing it with boilerplate

I have an opacity animation on my AMP HTML page on a couple of elements. I have styled these elements to have opacity: 0 so I can fade them in.

In case the user has javascript disabled and the elements can't be faded in, I want them to have opacity: 1.

I've tried using this HTML in my <head> to achieve it:

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

However, I'm getting the following two errors from the AMP validator:

  • The attribute 'amp-custom' may not appear in tag 'noscript > style[amp-boilerplate] - old variant'. (on the second <style amp-custom> tag)
  • The tag 'noscript enclosure for boilerplate' appears more than once in the document. (on the actual boilerplate <noscript> tag)

I've tried a few variations of this, but I couldn't get my page to validate. A full HTML page of my site is available here: https://pastebin.com/uAMCcQur

What is the correct way to achieve this? Is it possible at all?

Solution

  • You can use the attributes on the html tag to check whether the JS of the AMP lib has loaded on the page.

    The html tag may look like this:

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

    The attribute amp-version can be used to check this in your css like this:

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