Autoprefixer: `font-family: system-ui;` support

Created on 29 Dec 2016 · 17Comments · Source: postcss/autoprefixer

See https://github.com/Fyrd/caniuse/issues/2918 for caniuse feature inclusion.

It would be nice if autoprefixer replaced font-family: system-ui; with this:

font-family: system-ui, 
    -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;

(adapted from https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ )

support

Source

jltrv

👍9

Most helpful comment

I think extending system-ui to the complete font list from above can be problematic. There is not “the one” list that is correct IMO, it’s just a best practice for now and may be different depending on the user base. The linked Smashing Magazine article itself notes that “this is not future-proof” and “The list targets the most popular browsers and operating systems, but it doesn’t target all of them”.

I think it would be nice if autoprefixer extends system-ui to only system-ui, -apple-system, BlinkMacSystemFont which are all equivalent AFAIK and that would be some kind of “prefixing”. The list of fallback fonts should be up to the CSS author (or to cssnext).

ausi on 29 Dec 2016

👍7

All 17 comments

Technically it is not a prefix :-/. But I agree that it is useful and people may expect it from Autoprefixer.

Is system-ui is standard value? Will browsers support it in future?

ai on 29 Dec 2016

It's been approved by the whatwg ( https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui ) and it's supported in chrome 56 (currently in beta).

jltrv on 29 Dec 2016

I asked a community for feedback https://twitter.com/autoprefixer/status/814506174468984832

ai on 29 Dec 2016

Maybe we should add it to postcss-cssnext. I think it is a better place for standard polyfills. But let’s wait a feedback from Twitter users.

ai on 29 Dec 2016

ausi on 29 Dec 2016

👍7

I'd love to see this added, and prefer @ausi's suggestion. Unfurl it to just the system font names that the vendors have exposed, and leave everything else to author preference.

vasuvasu on 29 Dec 2016

I think autoprefixer should only deal with the prefix and private value.

Input:

font-family: system-ui, sans-serif;

Output:

font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

yisibl on 30 Dec 2016

👍6

@yisibl good idea!

@jltrv could you start with PR to caniuse with data for prefixes?

ai on 30 Dec 2016

@ai working on it

jltrv on 31 Dec 2016

🎉2

I decide, that it is not a Autoprefixer deal. You could make a custom PostCSS plugin and we will add it to cssnext and add links from Autoprefixer docs.

Do you need help with it?

ai on 19 Jan 2017

@ai Is there a specific reason why you decided that way?

I think expanding system-ui to system-ui, -apple-system, BlinkMacSystemFont would be a good fit for autoprefixer.

ausi on 19 Jan 2017

@ausi I think polyfill is much better solution for this problem. Linux and Android users are important too, but system-ui, -apple-system, BlinkMacSystemFont doesn’t cover them.

ai on 19 Jan 2017

AFAIK system-ui will be supported on Linux and Android too according to Chrome Platform Status.

ausi on 19 Jan 2017

For your information, I just composed a postcss plugin postcss-font-family-system-ui to transform

body {
  font-family: system-ui;
}

into

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
}