Acceptance Criteria

• Decide on browserslist values for Codex CSS output

Background

I've introduced browserslist-config-wikimedia as part of my work on T289804. Our existing browserslist settings has two configurations available: basic and modern.

The basic configuration contains the following browsers:

'Chrome >= 31',
'Firefox >= 27',
'Opera >= 18',
'Edge >= 12',
'IE >= 9',
'Safari >= 9.1',
'iOS >= 9',
'Android >= 4.3'

The modern configuration contains these browsers (still quite legacy-friendly):

'last 2 Chrome versions',
'last 2 Firefox versions',
'last 2 Opera versions',
'last 2 Edge versions',
'IE >= 11',
'Safari >= 9.1',
'iOS >= 9',
'Android >= 4.3'

The salient difference to me is IE9 vs IE11 support. My question is, which one of these settings is right for Codex (or do we need to define a new one)?

We know that Codex CSS will need to support cases where the Vue components themselves cannot function, so that the appropriate styles get applied to elements used for fallback or progressive-enhancement functionality. However, is going back all the way to IE9 going to be too limiting? For example, IE9 support in CSS means we cannot use Flexbox at all – vendor prefixes are not sufficient. CSS animations are similarly off-limits (though in that case graceful degradation behavior is probably fine).

Even if we stick to "modern" configuration, we'll still need to avoid usage of some useful CSS featuers like all, unset, CSS math functions, object-fit / object-position, etc.

Here's a complete list of what features are and are not supported across IE 9, 10, and 11:
https://caniuse.com/?compare=ie+9,ie+10,ie+11&compareCats=all