Page MenuHomePhabricator

Determine browserslist settings for CSS support in Autoprefixer
Open, Needs TriagePublic


Acceptance Criteria

  • Decide on browserslist values for Codex CSS output


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:,ie+10,ie+11&compareCats=all

Event Timeline

IE 9 is blocking a few simplifcations Foundation wide, like, what you've shared on patch, usage of Flexbox in basic environment. We should focus on pushing decision on removing it from basic support.

Just to note that i've been using lots of flexbox in content over the last year and haven't heard any complaints. Then again, i am someone who actually disables flex rules in the inspector to check if something is still somewhat usable for ppl without flex.

I wonder if we should re-name our current modern configuration to basic (since it still includes IE11), and then create a new modern setting for ES6-compatible browsers; we could use the former where we know we need to support no-JS & legacy usage, and the latter for places like interactive dashboards/special pages which simply won't be delivered to legacy browsers at all.

I agree that flexbox at least seems like something we ought to be able to use everywhere with confidence in the year 2021.

See also T293298: Remove IE9 & IE10 from basic support, which would push them (rightfully) into unknown 'Grade X' territory.

We should follow basic browserslist support for CSS on tooling level. The modern path for ES6-compatible also sounds rightful to me, we can always define overrides after the reference (here to explicitly remove IE11 from the table).