What's with the <style amp-boilerplate> code?

You might be wondering why you need to include the <style amp-boilerplate> code in every page. Even AMP's creator and tech lead, Malte Ubl, described this code as an atrocity! Unfortunately, it's a necessary evil; a hack developed by the AMP project team to avoid the infamous flash of unstyled content while the AMP page is loading.

It works like this. First, the AMP page content is hidden while it loads. Then, when the AMP-JS library has loaded, it will unhide the page after it has finished rendering it. This presents a problem, however. If the AMP-JS library was ever unavailable when a user requested the page, then the page would stay blank forever. This would be an unacceptable user experience, even if it happened only rarely.

The trick, then, is to use a CSS keyframe animation as a timeout function: if the AMP-JS library fails to make the content visible, then the CSS animation will make it visible automatically after a few seconds, and the user will still get to see some content. A simplified version of this trick, without the vendor prefixes, is shown as follows:

body { 
  animation: amp-timeout 0s 8s 1 normal forwards; 
} 
@key-frames amp-timeout { 
  0%    {opacity: 0;} 
  100%  {opacity: 1;} 
}