(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"
]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/
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
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% |