Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#5462 closed change (fixed)

Create browserlist for websites

Reported by: ire Assignee:
Priority: P3 Milestone:
Module: Websites Keywords:
Cc: juliandoucette, wspee, saroyanm, greiner, jeen Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

https://codereview.adblockplus.org/29632563/

Description

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 (?)
  1. Include a default browserlist config in website-defaults

Change History (21)

comment:1 Changed 2 years ago by ire

  • Cc jeen added

comment:2 Changed 2 years ago by 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.

comment:3 Changed 2 years ago by 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.)

comment:4 Changed 2 years ago by 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.

comment:5 follow-up: Changed 2 years ago by 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.

comment:6 Changed 2 years ago by 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)

comment:7 in reply to: ↑ 5 ; follow-up: Changed 2 years ago by ire

Replying to greiner:

  • Edge 40

Edge is only on 15 :p

comment:8 in reply to: ↑ 7 Changed 2 years ago by greiner

Replying to ire:

Edge is only on 15 :p

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

comment:9 follow-up: Changed 2 years ago by 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.

comment:10 Changed 2 years ago by 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.

Last edited 2 years ago by juliandoucette (previous) (diff)

comment:11 in reply to: ↑ 9 Changed 2 years ago by 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.

comment:12 Changed 2 years ago by ire

  • Priority changed from P2 to P3

comment:13 Changed 2 years ago by juliandoucette

  • Owner set to juliandoucette
  • Ready set

comment:14 follow-up: Changed 2 years ago by juliandoucette

  • Resolution set to fixed
  • Status changed from new to closed

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.

comment:15 Changed 2 years ago by juliandoucette

  • Resolution fixed deleted
  • Status changed from closed to reopened

(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.)

comment:16 in reply to: ↑ 14 Changed 2 years ago by 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.

comment:17 Changed 2 years ago by juliandoucette

  • Owner juliandoucette deleted

comment:18 Changed 2 years ago by 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.

comment:19 Changed 2 years ago by abpbot

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

comment:20 Changed 2 years ago by juliandoucette

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:21 Changed 2 years ago by juliandoucette

  • Review URL(s) modified (diff)
Note: See TracTickets for help on using tickets.