Search code examples
cssamp-html

What CSS rules does AMP HTML support?

I have read https://github.com/ampproject/amphtml/blob/master/docs/create_page.md about the usage of CSS, but am not sure what CSS selectors the format allows. Are there any restrictions on selectors/properties?

Can style declarations be placed anywhere in <html> or only in <head>?

Is it possible to include any external stylesheets?

Solution

  • From the Official AMP GitHub Documentation:

    • You may include 1 <style> tag in the <head> of the DOM. You must append amp-custom to the <style> tag like this: <style amp-custom>your style rules here</style>

    • You may not alter the margin property on the body element.

    • You may not load an external stylesheet or import one via @import

    • You may not add style attributes to elements.

    • You may not use the !important qualifier.

    • You may never use any of the following properties:

      • behavior:
      • overflow: scroll
      • overflow: auto
      • transition:
      • filter
      • animation
      • -moz-binding

    • You may use the following selectors:

      • .class e.g. .row
      • #id e.g. #sidebar
      • tag-name e.g. section
      • selector, selector e.g. .row, .clearfix or #sidebar, #main-body, article
      • media queries e.g. @media (max-width:48em){}

    • You may use the following pseudo-selectors:

      • :hover
      • :active
      • :visited

    • You may not use any input elements with the exception of button (as these are used to interact with AMP Web Components).

    • You are obliged to avoid using class names prefixed with -amp or -amp- to avoid conflicting with AMP components. You can override the styles of these components if you wish.

    • Your style rules must not exceed 50KB.

    • You may acquire font assets either through a whitelisted font vendor (... Google Fonts) or by fetching the font through @font-face via HTTP/HTTPS — i.e. not via data: or JavaScript plugin (since JS is banned).