AMP validation error: "The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect."

Question

I copied and pasted the mandated code from here. This is from the page source:

  <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>

I am still getting the following validation error:

The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md)

Any hint will be greatly appreciated.

I haven't worked a lot with AMP, is this the only style tag you have inside the head tag? — Arun Kumar Mohan
No, there are other styles. I thought styles were allowed. If not, the validation should complain about it. — Hong
Can you post a gist of your other style tags? I think they are missing the amp-custom attribute — Arun Kumar Mohan
I am terribly sorry but I have realized that I copied a wrong error message. I have corrected it. Thank you for trying to lend a hand here. My apology again. — Hong

Craig Scott Craig Scott · Accepted Answer · 2018-08-09T02:13:45

AMP expects the boilerplate to remain minified. I just pasted your boilerplate code into an AMP Playground document and got the exact same error you are getting.

Just to confirm it is the minifying, I minified your boilerplate from your post and it worked.

<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>

Edit:

I did a little more playing around. You can add returns before and after the opening and closing tags. Adding any returns or spaces to the CSS itself appears to be prohibited.

<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>

Here is a link explaining the AMP Boilerplate code and allowed changes. Basically you can only add white space immediately after the tags, and you can add more white space where it already exists.

AMP HTML documents must contain the following boilerplate in their head tag. Validation is currently done with regular expressions, so it's important to keep mutations as minimal as possible. Currently, allowed mutations are: (1) inserting arbitrary whitespace immediately after the style tag opens, and immediately before it closes; (2) replacing any space in the snippet below with arbitrary whitespace.

AMP validation error: "The mandatory text inside tag 'head > style[amp-boilerplate]' is missing or incorrect."

1 Answers