Mohamed Hussain Mohamed Hussain - 3 months ago 21
CSS Question

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?

Answer

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