What browser are supported by pf4?

Support
#1

Hello,

We are investing in moving foreman from pf3 to pf4 and it is not clear to us what browsers are supported by pf4.

When looking at the documentation, looks like pf4 supports chrome, firefox, safari, and edge but only the latest versions:
https://www.patternfly.org/v4/get-started/about#supported-browsers

I am wondering if this is actually the case?
I would like to be able to tell my users:

  1. if their browser is not supported, (IE?) ask them to use a different supported browser.
  2. If their browser is not up to date with the minimal required version, ask them to upgrade.

Thanks!

#2

Hey Sharvit,

Here’s our list of supported browsers. IE is not officially supported, although parts of PatternFly may work.

Thanks!

  • Zack
#3

Hello,

You are correct, we currently support the latest versions of Chrome, Firefox, Safari, and Edge. We no longer support IE, and while PF4 likely works in many older versions of these browsers we officially support the latest releases.

Thank you!

#4

Thanks for the feedback @redallen, @evwilkin. Very appreciated :+1:

My main concern, as products get aged (let’s say a consumer is using 2 years old release), should we:

  1. Tell the user about the minimal required browser version at the time of the release?
  2. Tell the user to keep using the latest version no matter what release the user is using?

Would it make sense adding the following features to pf4 (I can help to implement):

  1. Using https://github.com/browserslist/browserslist to define .browserslistrc file with the definition of the supported-browsers.
    Can share the definitions with pf4 consumers https://github.com/browserslist/browserslist#shareable-configs

  2. “compile” the .browserlistrc (browserslist-useragent-regexp) on each pf4 compilation so we can have the minimal supported versions next to each pf4 release.

    • It would allow projects to tell their users about the supported versions of their products.

  3. Use https://github.com/amilajack/eslint-plugin-compat to be able to tell if the code uses APIs which are not supported by the browserlist config.

  4. Have a component that detects the user browser agent and gives the user some information/instructions if the user using an unsupported browser (download a different one / upgrade your current browser).

Thanks!

#5

Hey @sharvit,

These are good ideas. We compile our library with tsc, which targets ES2015, so we can ensure our own code is compatible with ES2015 browsers. However, we don’t currently audit our third party dependencies, so it’s difficult to ensure compatibility with those. We rely on manual testing and bug reports to fix these issues since most of our devs are using the latest two versions of evergreen browsers.

If you’d like to audit our current three react-core dependencies (“focus-trap”: “4.0.2”, “react-dropzone”: “9.0.0”, and “tippy.js”: “5.1.2”) and react-table dependency (“lodash”: “^4.17.19”) to create a proper browserlist, we’d be happy to export a config file for you to use to check client-side compatibility. I’m not sure we can commit to supporting that browserlist (cc @dgutride) although it would be accurate.

  • Zack
#6

I created this PR to add a browserslist config: https://github.com/patternfly/patternfly-react/pull/4801

2 Likes
#7

Thanks for sharing, Sharvit