What is the reason for including <style amp-boilerplate>

Question

I found the following CSS boilerplate code required to use AMP. What does it do?

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

Can anyone know the reason for including above css code in AMP pages ?

and

Can I write < style amp-boilerplate="amp-boilerplate"> instead of < style amp-boilerplate> ?

Answer 1

Can anyone know the reason for including above css code in AMP pages ?

This code itself is to hide the page until it is fully rendered, and then fade it in to give a higher perceived performance metric. If you are asking about the tag itself, the <style amp-boilerplate>, that is used internally by Google to order the parsing of the DOM and CSSOM.

Can I write < style amp-boilerplate="amp-boilerplate"> instead of < style amp-boilerplate> ?

Yes, you can put the tag name as the value of the tag and it will still pass AMP validation. However, this is not recommended, as the AMP spec could change at any time, and this would possibly no longer validate.

I have confirmed this by using the AMP validator tool both on a live page, and internally using both the NodeJS validator and Python validator.

Answer 2

Can I write style amp-boilerplate="amp-boilerplate" instead of style amp-boilerplate="amp-boilerplate" ?

Isn't that trying to replace the initial style with the same thing? I don't see any difference.

Check out this website to learn more about AMP.

Basically;

Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.

(quoted from the website I linked).

Hope this helps you out.