4

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?

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
Mohamed Hussain
  • 7,433
  • 14
  • 55
  • 85

2 Answers2

19

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

AM Douglas
  • 1,873
  • 1
  • 13
  • 17
  • 1
    You may also not declare the `type` attribute on `button` elements. Just a heads up. – AM Douglas Oct 08 '15 at 14:54
  • 3
    This is anecdotal, because the AMP validator is a piece of crap, but after spending some time doing away with some invalid selectors, I can confirm that `:first-child`,`:last-child`,`:before`,`:after` pseudo-elements, and direct descendent (`>`) selectors all pass validation. – AM Douglas Oct 08 '15 at 15:11
  • Thanks Cesar; however, I must warn you that I've not kept my answer up to date with the spec over time, so my answer may not be 100% accurate any more. I'd cross-reference with [the most up to date info](https://www.ampproject.org/docs/reference/spec.html) ([also viewable here on github](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#stylesheets)) – AM Douglas Sep 22 '16 at 18:35
  • It pretty much is, made a dummy page with your specs and worked great. Got me on the right path. Problem I face now knowing how AMP works is do I want to revamp my entire site off bootstrap:( – Cesar Bielich Sep 22 '16 at 18:55
  • If you do decide to move away from Bootstrap, perhaps an alternative would be useful. [Min.css](http://mincss.com) or something like it would fit within the max size for the amp-custom stylesheet, avoid violating rules, and give a Bootstrappy look and feel — with a little embellishment. – AM Douglas Sep 22 '16 at 19:27
  • I'm assuming this is all CSS and no JS – Cesar Bielich Sep 22 '16 at 19:28
  • It is indeed, though I've not tried it because I tend to roll my own CSS with each project I do. [Sometimes CSS can be enough though.](https://dev.amdouglas.com/amphtml-examples/nojs-carousel/#div1) – AM Douglas Sep 22 '16 at 19:30
  • Yeah I can live without the JS just need to restructure those pages that have it. No more jstables:( – Cesar Bielich Sep 22 '16 at 19:31
  • Any alternatives to JS tables with CSS? – Cesar Bielich Sep 22 '16 at 19:33
  • Are you thinking about AMPing [the site in your profile](https://www.wordgamedictionary.com)? You could use some really, *really* hacky CSS to achieve a similar effect as pagination on tables, but honestly I wouldn't recommend it. Best bet would be to create components and load them with amp-iframe custom elements. It can be done: as an experiment, I built a fully functional web forum which passed AMP validation, by loading CRUD forms in amp-iframes. – AM Douglas Sep 22 '16 at 19:51
  • yeah thats the site, I am going to try the amp-iframe thing – Cesar Bielich Sep 22 '16 at 20:06
  • @amdouglas. Could you check this link. http://stackoverflow.com/questions/42199925/external-style-sheet-is-not-working-in-amp-pages. I stuck in AMP. – Varun Sharma Feb 23 '17 at 04:59
0

"transition" css property is not disallowed, it's only restricted to GPU-accelerated properties (currently opacity, transform and -vendorPrefix-transform).

https://www.ampproject.org/docs/guides/responsive/style_pages

Nurgiel
  • 170
  • 4
  • 12