Skip to content

Instantly share code, notes, and snippets.

@tbjgolden
Last active December 20, 2023 12:10
Show Gist options
  • Save tbjgolden/9488a7dbfc6213ce6e28837bd14c3765 to your computer and use it in GitHub Desktop.
Save tbjgolden/9488a7dbfc6213ce6e28837bd14c3765 to your computer and use it in GitHub Desktop.
Low-effort, high-reward browserlist config to avoid vendor prefix hell

Low-effort, high-reward browserlist config to avoid vendor prefix hell

(Stats used from 2022-06-20)

chrome >= 79, and_chr >= 81, safari >= 13, ios_saf >= 12.4, firefox >= 73

...or more generally

[
  "last 3 chrome versions and last 1 year",
  "last 2 and_chr versions",
  "last 2 safari versions and last 1 year",
  "last 4 ios_saf versions and last 2 years",
  "last 3 firefox versions"
]

Explanation

Many other well used browsers either already (iOS Chrome, Samsung Internet, UC Browser, Brave, Vivaldi, Opera) share 99% of their DNA with another browser from above, or are soon to do so (Edge, KaiOS).

The main misses are, as usual:

  • Older versions of iOS Safari locked in by their last available software update
    • iPhone 5 (and below)
    • iPad 4th gen (and below)
    • iPad mini 1st gen
    • iPod touch 5th gen (and below)
  • Internet Explorer (which is locked in by the user's inability to download any other browser).
(World: 84.56%) (Europe: 82.48%) (US: 84.24%)
chrome >= 79
safari >= 13
ios_saf >= 12.4
firefox >= 73
and_chr >= 81

When including browsers that are mostly identical to the above
(World: 91.1%) (Europe: 91.64%) (US: 91.1%)
edge >= 79
samsung >= 12
opera >= 15

What about JavaScript? Check out: https://polyfill.io/v3/

Properties that still require vendor prefixes for good support

Appearance                             68.06%   [300/500]   (used in resets)
  - and_chr 81 (34.2%)
  - chrome 4-85 (27.5%)
  * Used for setting (typically browser and platform specific) presentation of
    (typically interactive) elements based on the user's OS theme
  * This property is browser/os specific, either making vendor prefixes
    something you should manually write, or more likely something you include in
    your CSS reset file (it's included in normalize.css, which is likely why so
    many websites use it)
Intrinsic & Extrinsic Sizing           65.94%   [0/500]
  - and_chr 81 (34.2%)
  - chrome 22-85 (27.5%)
  * These rarely used properties do indeed benefit from prefixes
Masks                                  64.74%   [15/500]   (not everywhere yet)
  - and_chr 81 (34.2%)
  - chrome 4-85 (27.5%)
  * Even with vendor prefixes, this feature is not fully supported cross-browser
box-decoration-break                   64.74%   [18/500]
  - and_chr 81 (34.2%)
  - chrome 22-85 (27.5%)
  * If using inline text, this can benefit from prefixes
image-set                              64.60%   [11/500]   (not everywhere yet)
  - and_chr 81 (34.2%)
  - chrome 21-85 (27.5%)
  * Even with vendor prefixes, this feature is not fully supported cross-browser
Cross-Fade Function                    64.60%   [0/500]   (not everywhere yet)
  - and_chr 81 (34.2%)
  - chrome 17-85 (27.5%)
  * Even with vendor prefixes, this feature is not fully supported cross-browser
text-emphasis styling                  64.60%   [1/500]
  - and_chr 81 (34.2%)
  - chrome 25-85 (27.5%)
  * These rarely used properties do indeed benefit from prefixes
Full Screen API                        39.81%   [5/500]
  - and_chr 81 (34.2%)
  * This rarely used and partially supported feature does benefit from prefixes
Background-clip: text                  30.58%   [0/500]
  - chrome 4-85 (27.5%)
  * `-webkit-background-clip: text` is actually only fully supported in its
    vendor prefixed form (and is very cool)
color-adjust                           30.58%   [5/500]
  - chrome 19-85 (27.5%)
  * This nonstandard method to force printing of background colors and images
    does benefit from prefixes

Features that still require vendor prefixes for full support

Assuming you're writing a basic website, these should not cause you problems.

Beyond this, the main things to look for are:

  • 3D transforms, which are sometimes included to force hardware acceleration
  • user-select: none, for preventing text from being highlighted by the user
  • ::placeholder

Besides these, these features largely end up being one of the following scenarios:

  • they can be achieved using another simple method
  • unlikely to be mission critical
  • they do not have good enough cross-browser support to be used with prefixes
  • they are typically only used in normalize scripts, which typically include vendor prefixes in their definitions, meaning nothing to autoprefix
  • only small experimental parts of the feature need prefixes
Name Percentage
3D Transforms 5.65%
user-select: none 5.65%
Media Queries: resolution feature 5.65%
unicode-bidi property 5.65%
Border-radius (rounded corners) 5.50%
Box-shadow 5.50%
Animation 5.50%
Transitions 5.50%
2D Transforms 5.50%
Gradients 5.50%
Box-sizing 5.50%
Multiple column layout 5.50%
Flexible Box Layout Module 5.50%
calc() as unit value 5.50%
Border images 5.50%
::placeholder pseudo-element 5.50%
Cursors: zoom-in & zoom-out 5.50%
grab & grabbing cursors 5.50%
text-decoration styling 5.50%
Logical Properties 5.50%
:any-link selector 5.50%
Hyphenation 4.40%
clip-path property (for HTML) 4.31%
Crisp edges/pixelated images 4.25%
Filter Effects 4.17%
font-kerning 4.17%
Regions 4.17%
writing-mode property 4.17%
element() function 3.32%
tab-size 3.32%
:read-only and :read-write selectors 3.32%
Backdrop Filter 3.06%
text-orientation 3.06%
filter() function 2.91%
position:sticky 2.91%
Shapes Level 1 2.91%
Scroll Snap 2.91%
font-feature-settings 2.59%
Background-image options 1.34%
::selection pseudo-element 1.34%
text-align-last 1.34%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment