Material: docs: improve browser support documentation

[mgol]

Actual Behavior:

• What is the issue? * README says: "Angular Material is targeted for all browsers with versions n-1; where n is the current browser version."
• What is the expected behavior? It should spell out supported IE versions explicitly. It's not clear what "n-1 where n is the current browser version" means with respect to IE as IE, while version 11 still receives security fixes, is not developed anymore and has been succeeded by Microsoft Edge. This sentence could both be understood as that IE 10+ is supported (as current IE is 11) or as if no IE was supported (since IE has been superseded by Edge and last 2 Edge versions are 13 and 14). I also think it'd be better to spell out concrete browser versions that this project supports; otherwise someone can find a niche browser (like Konqueror with the KHTML engine) and complain we don't support it's latest or previous version.

[devversion]

I think that is a reasonable issue. @ThomasBurleson what are your thoughts on this?

[mgol]

An update from the meeting: The image in README should have visible red boxes with IE 9 & 10.

Also, IMO we should have sth like that on the site. Not all library users will visit GitHub & read the README. For comparison, this is the Angular 2 browser compat site:
https://angular.io/docs/ts/latest/guide/browser-support.html.
This is Angular 1:
https://docs.angularjs.org/misc/faq#what-browsers-does-angular-work-with-.
This is jQuery:
https://jquery.com/browser-support/

[mgol]

Another problem with what's currently in README is that it only shows you a snapshot of the state when this screenshot was taken and not what the general strategy is. For example, does the library only support the latest version of each browser, two latest? Or maybe Chrome is treated differently as Chrome 49 exists in the image? What about Safari? Is 9.1 still supported as shown in the image or is only the latest version supported (as the screenshot was taken when Safari 9.1 was the latest stable version and the only stable one marked in red)?

This is all very unclear, an explicit list like the one in Angular 2 docs would be better.

[Splaktar]

We improved upon this a little bit in the README in https://github.com/angular/material/pull/11083, but I agree that more needs to be done.

I also agree that we need to get something clear into the docs site that states what the browser support is.

[Splaktar]

TODOs

• [x] Come up with a new 'official' list of supported browsers
• [x] Update docs site to include a list of supported browser versions using a simple table like https://angular.io/guide/browser-support
• [x] Update the README with the new list of supported browsers
• [x] Remove the caniuse screenshot from the README
• [x] Add autoprefixer config to README

[Splaktar]

Here's our current autoprefixer config:

    'last 2 versions',
    'not ie <= 10',
    'not ie_mob <= 10',
    'last 4 Android versions',
    'Safari >= 8'

[mgol]

I think it'd be useful to make sure the Autoprefixer config and the docs around what browsers are supported stayed in sync somehow - either enforced or via convention, e.g. by putting comments in all places reminding people modifying one place to make sure relevant changes are reflected in others. Perhaps that could be made a 5th item on the TODO list.

[Splaktar]

I think that it makes sense to link to / embed this config in the README.

I am not sure that it would be appropriate in the docs site.

We should probably look at moving it out of https://github.com/angular/material/blob/v1.1.9/scripts/gulp-utils.js#L308-L317 and putting it in a browserslist key in package.json. This seems to be the recommendation in their docs as well.

[Splaktar]

Angular Material moved off of gulp-autoprefix to a Stylelint plugin for applying some custom prefixes due to conflicts with internal Google tooling. Here is their autoprefix config:

"last 2 versions", 
"not ie <= 10", 
"not ie_mob <= 10"

[Splaktar]

I don't think that we can continue to support Safari >= 8. Here's the outcome of our current config which reports 86.6% global coverage.

As mentioned in https://github.com/angular/material/issues/10345#issuecomment-400062705, even supporting the last 4 versions of Safari would only include 10, 10.1, 11, and 11.1. Would it be best to go with this last 4 versions approach with Safari and iOS?

Angular seems to specifically support the "2 most recent major versions" which currently aligns with this last 4 versions strategy in autoprefixer.

I'm going to play with http://browserl.ist a bit more to try and come up with a reasonable config.

[Splaktar]

last 2 versions, not dead, > 0.5% seems to be a reasonable configuration. It would increase our global coverage from 86.6% to 90.48%. You can see the supported browsers here.

But then looking at the autoprefixer default, this seems like an even better configuration: > 0.5%, last 2 versions, Firefox ESR, not dead. This has 90.93% global coverage.

Current settings

• 86.6% coverage and 573 KB of CSS

Autoprefixer default

• 90.93% coverage and 438 KB of CSS

In order to work around a bug in browserslist (https://github.com/browserslist/browserslist/issues/266), we'll need to use the following equivalent configuration:

    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not ie <= 10",
    "not ie_mob <= 10",
    "not bb <= 10",
    "not op_mob <= 12.1"

[Splaktar]

In order to compare this new proposed AngularJS Material browser support with Angular Material's browser support, these two links can be used:

• The new AngularJS Material config would support these browsers.
• Angular Material supports these browsers.
  
  
  
  • Which have a reduced global coverage of 85.18% and include dead browsers like Blackberry and Opera Mobile 12.1. Angular Material also doesn’t support the Firefox ESR, Android 4.4, Safari 10.3, Samsung 4, Opera 51 which the new AngularJS Material config does support.
  
  

[mgol]

• Angular Material supports these browsers.
  
  
  
  • Which have a reduced global coverage of 85.18% and include dead browsers like Blackberry and Opera Mobile 12.1. Angular Material also doesn’t support the Firefox ESR, Android 4.4, Safari 10.3, Samsung 4, Opera 51 which the new AngularJS Material config does support.
  
  

I agree with your findings. Specifying "last 2 versions" with no percentage (or "not dead") restriction adds unneded dead browsers to the query. OTH, Firefox ESR seems a worthy addition as it may be used in some corporate environments.