Create browserlist for websites

[ire]

Background

To develop our websites we need to decide on specific browsers each website will support.

​Browserlist is a library to share supported browsers list between different front-end tools. For example, it can be used with eslint/stylelint to lint our JavaScript/CSS within an IDE, or it can be used with autoprefixer to automatically add vendor prefixes to CSS.

Browserlist config can be written as a .browserlistrc file, or included in package.json (preferred method). For example:

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 10"
  ]
}

This configuration denotes support for:

• Any browser with greater than 1% global usage
• The last 2 versions of every major browser
• Internet Explorer 10

What to change

1. Create browserlist configs for each website and include in the package.json in each repository.

• eyeo.com
• help.eyeo.com
• adblockplus.org
• adblockbrowser.org
• acceptableads.com
• acceptableads.org (?)

2. Include a default browserlist config in website-defaults

[ire]

I believe we already have this default browser support:

last 2 versions
IE 9

But this isn't the case across all websites, and it's not entirely clear which ones support what.

[juliandoucette]

Note: We can base > 1% on our own website data (I asked our data team if we could export it in a compatible format - I didn't follow up because other priorities got in the way.)

[juliandoucette]

Note: I think that the following browser support is unspoken:

last 2 versions
IE 8

• abp.org
• abb.org
• eyeo.com
• help center

last 2 versions
IE 9

• aa.com

---

However, I chose to include respond.js, html5shiv, and ie8.js and avoid using CSS that is not supported by IE 8 progressively on aa.com just-in-case I get IE 8 support for ~free/cheap.

[greiner]

Not sure whether it's still relevant but initially we decided to support all platforms that our products are available for so that any of our users can access our websites. So, as far as I can see from our code, that'd translate to at least:

• Firefox 51
• Chrome 49
• Opera 36
• Edge 40
• Safari 7
• IE 8
• SeaMonkey 2.48

Note the discrepancy with ​adblockplus.org/requirements though.

[ire]

Thanks for the input

@juliandoucette: Can you CC someone from the data team who can help here? (And anyone else I might have missed)

[ire]

Replying to greiner:

• Edge 40

Edge is only on 15 :p

[greiner]

Replying to ire:

Edge is only on 15 :p

I misinterpreted ​this line so it's Edge 10. Thanks for pointing that out.

[ire]

Not sure whether it's still relevant but initially we decided to support all platforms that our products are available for so that any of our users can access our websites.

I think this makes sense, but we should look at the statistics. We may not actually have to support as far back as every platform our products are available for every site.

I misinterpreted ​this line so it's Edge 10.

I think you mean 12? The versions for Edge are a bit weird, the version numbers started where IE stopped so the first version of Edge is actually 12.

[juliandoucette]

Browsers currently supported by the latest version of Debian (which I run):

• Epiphany Browser 3.22.7 ( WebKit 2.16.3) (This is my default browser)
• Firefox ESR 52.2.0 (64-bit)
• Chromium 59.0.3071.86 (Developer Build)
• Midori 0.4.3 (Also WebKit, Lighter than Epiphany?, Buggier than Epiphany?)

This is relevant because:

• We should support ​Firefox ESR?
• We should support Chromium (Instead of chrome?)
• There are many WebKit browsers out there (desktop, mobile)

Note:

We should also work DPI into our browser requirements somehow.

[greiner]

Replying to ire:

I think you mean 12? The versions for Edge are a bit weird, the version numbers started where IE stopped so the first version of Edge is actually 12.

Admittedly, I'm not too familiar with Edge's versioning scheme and ​its release history on Wikipedia isn't of too much help either. According to that Edge is currently at version 40 while its rendering engine (EdgeHTML) is at version 15.

Sebastian could probably clear things up but given all that information it looks like we're supporting Edge 40+ (i.e. EdgeHTML 15) that we verified working with ​Windows 10 Insider Preview 15063 up to Windows version 12.

[juliandoucette]

See ​https://gitlab.com/eyeo/website-boilerplate/commit/812e977525a992655b87d084dbd1108211f716f2

It's not obvious where/how to put this. I think website-boilerplate is a good choice. I formatted it in such a way that one can comment out irrelevant parts e.g. if you are creating a website for eyeo and not abp or abb.

[juliandoucette]

(I shouldn't have closed this until it's actually being used across the websites listed in the description.)

(I requested data from our data team to perform the > 1% query for eyeo websites.)

[ire]

Replying to juliandoucette:

See ​https://gitlab.com/eyeo/website-boilerplate/commit/812e977525a992655b87d084dbd1108211f716f2

Great, thanks Julian!

It's not obvious where/how to put this. I think website-boilerplate is a good choice. I formatted it in such a way that one can comment out irrelevant parts e.g. if you are creating a website for eyeo and not abp or abb.

A file should also be added to each repository for the existing websites. Considering that we are still waiting for the browser usage statistics ​Hub Issue 3221, perhaps we should wait before doing this though.

[ire]

@all Since we now have the [browser usage statistics](​http://hub.eyeo.com/issues/3221#note-13) I think we should revisit this. I suggest we have a meeting to discuss/finalise our browser support requirements so we can move forward quickly.

[abpbot]

A commit referencing this issue has landed:
​Issue 5462 - Created browserlist config for websites