書名： AMP：Building Accelerated Mobile Pages
作者名： Ruadhan O'Donoghue
本章字數： 163字
更新時間： 2021-07-08 10:04:01

Using CSS in AMP pages

We're not finished converting our page to AMP just yet; let's deal with the validation error that mentions the style sheet next:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'style.css'.

One of the ways that AMP achieves its speed is by forbidding linked external style sheets. This means that all CSS must be inlined in the <head> of your AMP page. Open up the style sheet, and copy-paste all of the CSS rules you find into the AMP document. You'll need to wrap this CSS in a <style amp-custom> tag like this:

<style amp-custom>
  html, body, ul {
    margin:0;
    padding:0;
  }
  ...
</style>

You can only have one <style> tag in your AMP document, and it must include the amp-custom attribute.

Inlined CSS is limited to 50 KB per page, which is considered enough to style a single page

If you reload the page now, you should see that the CSS validation error message is now resolved.

官术网_书友最值得收藏!

AMP：Building Accelerated Mobile Pages

Using CSS in AMP pages