We need some CSS guidelines for AMP

[nicl]

Which features do we support/not support.

Because it is AMP and mobile, we can probably be a bit more aggressive here than for the main site.

We can also make our lives easier by targeting a non-responsive design, as the current AMP does - i.e. no media-queries!

I.e. at least the following rules:

• CSS bundle must be <50kb (this is part of the AMP standard)
• no media-queries, target mobile breakpoint only
• other AMP restrictions (https://www.ampproject.org/docs/design/responsive/style_pages) - these are actually not onerous and include helpful restrictions like no !important allowed
• use flex and grid for layout over floats and tables

Is this sensible? Can we expand these rules?

caniuse seems broken for me at the moment unfortunately but I'll update when it's loading with browser support for flex/grid on mobile devices. But maybe @SiAdcock or @GHaberis know what's sensible here?

cc @AWare @MatthewJWalls @philmcmahon!?

Update: main concern for css grid support is Opera mini which is at 2.33% globally (although probably a lot less than that in our key markets) but also iOS Safari 10.2 (which is 1.27% in the UK).

On the other hand, flex is near universally supported so we could just use that in a lot of cases.

[SiAdcock]

I agree, it seems sensible to at least make explicit in our docs this minimal set of rules.

We haven't yet defined a browser support strategy, but I think it should be more explicit than the one in frontend. We have previously said we'd provide a good user experience for any browser from which we receive at least 0.2% of page views. This is probably a bigger conversation, but I don't think we should consider whether we go all-in with Grid until we have more clarity around which browsers we support.

Further to your investigation, according to Google Analytics:

• 0.51% of our page views come from Opera Mini
• 3.52% of our page views come from iOS Safari <= 10.2

However, I have no problem with saying Flex has enough support for us to not even think twice about using it.

[jamesgorrie]

Closing as mega old, we can bring it back to life if it comes up again.