Let‘s take a fast stroll down memory-lane to revisit how vendor prefixing CSS properties got here to be. I hope I don’t set off PTSD for anybody!
It‘s not clear who began prefixing, or when it started precisely. What is evident, is that by 2006, prefixed options had been in Web Explorer and Firefox. The raison d’être of prefixes was to specify browser-specific options. It was seen as a option to implement non-standard options and supply previews of latest commonplace options.
By 2012, the W3C CSS Working Group was issuing steerage on the usage of vendor prefixes:
In CSS we use vendor prefixes for properties, values, @-rules which can be: – vendor particular extensions (per CSS 2.1), or – experimental implementations (per CSS Snapshot 2010) (e.g. in Working Drafts)
It grew to become an trade norm. The variety of prefixes grew, and with it, issues grew complicated. It led to partial implementations of CSS options, launched bugs, and in the end created a fracture within the browser ecosystem, which disgruntled builders. Builders responded by making instruments to automate the issue away.
Browser distributors slowly started to maneuver away from prefixing, favoring function flags contained in the browser settings as a substitute. It appeared that the issues created by vendor prefixes would fade away in time. The query is: has that point come but?
I did some evaluation on the caniuse dataset and Mozilla Developer Community Compat dataset to reply this query.
Adoption developments
You possibly can see the development of the implementation of prefixed options throughout the key browsers within the chart above. I’ve excluded Chrome for Android due to inadequate knowledge.
From 2007 till 2011, there was a gradual improve within the numbers of prefixed options in all browsers. Web Explorer solely noticed an uptick in 2011. Then, in 2012, Mozilla started to take away prefixed options — corresponding to -moz-border-radius* and -moz-box-shadow — from Firefox. Thereafter, they persistently eliminated prefixed properties as soon as the usual model of that property was totally applied.
In 2013, Mozilla began to make options accessible behind function flags (pref flags). That very same yr, Chrome switched its rendering engine from WebKit to Blink (a part of the Chromium challenge). This was an enormous turning level in eradicating some prefixed options.
It was solely in April 2016 that WebKit introduced that it could now not launch experimental options with prefixes:
Over time this technique has turned out to not work so nicely. Many web sites got here to rely on prefixed properties. They usually used each prefixed variant of a function, which makes CSS much less maintainable and JavaScript packages trickier to jot down. Websites often used simply the prefixed model of a function, which made it arduous for browsers to drop help for the prefixed variant when including help for the unprefixed, commonplace model. In the end, browsers felt pressured by compatibility issues to implement one another’s prefixes.
As a result of Safari and iOS browsers have at all times used the WebKit rendering engine, a constant discount within the variety of prefixes got here later to those browsers.
Microsoft was by no means “gung ho” on prefixing and persistently had the fewest prefixed options. In 2019, Edge switched from its personal rendering engine to Blink. In a humorous twist, the change really elevated the variety of prefixed properties in Edge!
Function developments
The desk beneath contrasts the prefixed options in 2013 (the zenith of prefixing) with 2021.
2013
2021
Browsers
Chrome 31
Firefox 26
Web Explorer 11
Safari 11
Safari iOS 7.0-7.1
Chrome 89
Edge 89
Firefox 88
Web Explorer 11
Safari 14
Chrome Android 89
Safari iOS 14.0-14.5
Some prefixing required
any-link
dir()
focus-visible
is()
:placeholder
:placeholder-shown
read-only
:read-write
:choice
look
background-clip: textual content
background-image: crossfade()
background-image: image-set()
box-decoration-break
box-sizing
clip-path
color-adjust
ingredient()
font-feature-settings
font-kerning
font-smooth
hyphens
image-set
line-clamp
place: sticky
tab-size
text-align-last
text-decoration styling
text-emphasis styling
text-size-adjust
user-select: none
writing-mode
CSS Animation
CSS Canvas Drawings
CSS System Adaptation
CSS Cursors: seize and grabbing
CSS Cursors: zoom-in and zoom-out cursors
CSS Exclusions Stage 1
CSS Filter Results
CSS Versatile Field Format Module
CSS Grid Format Stage 1
CSS Logical Properties
CSS Masks
CSS Reflections
CSS Areas
CSS Scroll Snap
CSS Scrollbar Styling
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 A number of Column Format
CSS Textual content Fill & Stroking
Intrinsic & Extrinsic Sizing
Media Queries: Decision Function
:placeholder-shown
look
backdrop-filter
background-clip: textual content
background-image: crossfade()
background-image: image-set()
box-decoration-break
clip-path (HTML)
color-adjust
ingredient()
font-smooth
hyphens
image-set
initial-letter
line-clamp
place: sticky
text-decoration styling
text-emphasis-styling
text-orientation
text-size-adjust
user-select: none
font-kerning
tab-size
CSS Canvas Drawings
CSS System Adaptation
CSS Exclusions Stage 1
CSS Grid Format Stage 1
CSS Masks
CSS Reflections
CSS Areas
CSS Scroll Snap
CSS Scrollbar Styling
CSS Textual content Fill & Stroking
Intrinsic & Extrinsic Sizing
Media Queries: Decision Function
Complete options
53
35
It might be stunning to see the uncooked numbers. The variety of options that require prefixing fell by ~33% between 2013 and 2021. That quantity sounds fairly modest to me.
After all, it might be deceptive to focus simply on numbers. The affect varies. It might be a household of properties that each one require prefixing, corresponding to animation; or it might be a function that solely has one property or worth that requires a prefix, corresponding to user-select: none. Let’s discover the precise options to know the circumstances higher, starting by what modified in that intervening interval.
Twenty options had been unprefixed (totally applied throughout the key browsers) and three prefixed options had been launched (backdrop-filter, CSS text-orientation, and CSS initial-letter).
In my view, probably the most notable options which can be unprefixed now, which had been vital ache factors are:
CSS Versatile Field Format ModuleCSS3 Field SizingCSS AnimationCSS3 2D TransformsCSS3 3D TransformsCSS Filter Results
The opposite 14 options are much less distinguished:
:any-link::placeholder::choice:focus-visible:is():read-only:read-writefont-feature-settingstext-align-lastwriting-modeCSS seize and grabbing cursorsCSS Logical Properties (will likely be used much more sooner or later, now that help is healthier)CSS3 zoom-in and zoom-out cursorsCSS3 A number of Column Format
When you select to not help Web Explorer 11 in 2021, then a further seven options now not require prefixing. That reduces the variety of options that require prefixing in 2021 to twenty-eight, which is a 46% discount since 2013.
Prefixing in 2021
Let‘s take a look at the properties that require prefixing. It’s a motley group!
#
Title
Properties/Values
Description
Prefix required
Unprefixed help
Prefixed help
Enchancment with prefixes
1
look
look
Defines how components (notably type controls) seem by default. Setting the worth to none causes within the ingredient’s default look being fully redefined utilizing different CSS properties.
Safari
(-webkit)Opera
(-webkit)Android Browser 2.1-4.4.4
(-webkit)
69.80%
97.03%
27.23%
2
background-clip-text
background-clip: textual content
Non-standard methodology of clipping a background picture to the foreground textual content.
Chrome
(-webkit)Edge
(-webkit)Safari
(-webkit)Opera
(-webkit)Safari iOS
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)
3.89%
96.65%
92.76%
3
backdrop-filter
backdrop-filter
Technique of making use of filter results (like blur, grayscale or hue) to content material or components beneath the goal ingredient.
Safari
(-webkit)Safari iOS
(-webkit)
70.20%
88.20%
18.00%
4
background-image: crossfade()
background-image: crossfade()
Picture operate to create a “crossfade” between pictures. This permits one picture to transition (fade) into one other primarily based on a proportion worth.
Chrome
(-webkit)Edge
(-webkit)Opera
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)
17.77%
92.62%
74.85%
5
background-image: image-set()
background-image: image-set()
Technique of letting the browser choose probably the most applicable CSS background picture from a given set, primarily for top PPI screens.
Chrome
(-webkit)Edge
(-webkit)Opera
(-webkit)Android Browser
(-webkit)Opera Cellular
(-webkit)
17.77%
92.48%
74.71%
6
box-decoration-break
box-decoration-break
Controls whether or not the field’s margins, borders, padding, and different decorations wrap the damaged edges of the field fragments, when the field is cut up by a break, like a web page, column, area, or line.
Chrome
(-webkit)Edge
(-webkit)Safari
(-webkit)Opera
(-webkit)Safari iOS
(-webkit)Android BrowserOpera Cellular
(-webkit)
6.39%
97.17%
90.78%
7
clip-path
clip-path
Technique of defining the seen area of an HTML ingredient utilizing SVG or a form definition.
Safari
(-webkit)
72.00%
96.33%
24.33%
8
color-adjust
color-adjust
A non-standard CSS extension that can be utilized to power background colours and pictures to print.
Chrome
(-webkit-print-color-adjust)Edge
(-webkit-print-color-adjust)Safari
(-webkit-print-color-adjust)Opera
(-webkit-print-color-adjust)Android Cellular
(-webkit-print-color-adjust)
3.69%
39.77%
36.08%
9
ingredient()
background: ingredient()
This operate renders a dwell picture generated from an arbitrary HTML ingredient
Firefox
(-moz)
0.00%
4.04%
4.04%
10
font-kerning
font-kerning
Controls the utilization of the spacing between lettersstored within the font. Notice that this solely impacts OpenType fonts with kerning info, it has no impact on different fonts.
Safari iOS
(-webkit)
81.73%
96.03%
14.30%
11
font-smooth
font-smooth
Controls how anti-aliasing is utilized when fonts are rendered. Although current in early 2002 drafts of the CSS3 Fonts specification, this property has since been eliminated and is at present not on the usual monitor.
Chrome
(-webkit-font-smoothing)Edge
(-webkit-font-smoothing)Firefox
(-moz-osx-font-smoothing)Safari
(-webkit-font-smoothing)Opera
(-webkit-font-smoothing)
0.00%
39.64%
39.64%
12
hyphens
hyphens
Technique of controlling when phrases on the finish of traces ought to be hyphenated.
Web Explorer 10+
(-ms)Safari
(-webkit)Safari iOS
(-webkit)
76.49%
96.51%
20.02%
13
initial-letter
initial-letter
Technique of making an enlarged cap, together with a drop or raised cap, in a sturdy manner.
Safari
(-webkit)Safari iOS
(-webkit)
0.00%
18.00%
18.00%
14
line-clamp
line-clamp
Accommodates textual content to a given quantity of traces when utilized in mixture with show: -webkit-box. Any textual content that overflows the area produces anellipsis when text-overflow: ellipsis is included.
Chrome
(-webkit)Edge
(-webkit)Firefox
(-webkit)Safari
(-webkit)Opera
(-webkit)Safari iOS
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)Firefox for Android
(-webkit)Opera Cellular
(-webkit)
0.19%
96.28%
96.09%
15
place: sticky
place: sticky
Retains components positioned as”fastened” or”relative” relying on the way it seems within the viewport. Because of this the ingredient is “caught” in place whereas scrolling.
Safari 7.1-12.1
(-webkit)
93.50%
95.36%
1.86%
16
tab-size
tab-size
Technique of customizing the width of the Tab character. Solely efficient alongside white-space: pre or white-space: pre-wrap.
Firefox 4+
(-moz)Firefox for Android
(-moz)Opera 11.5-12-1
(-o)
92.33%
97.38%
5.05%
17
text-decoration styling
text-decoration
text-decoration-* properties.
Technique of defining the sort, color and style of traces within the text-decoration property. These will be outlined as a shorthand (e.g. text-decoration: line-through dashed blue) or as single properties (e.g. text-decoration-color: blue).
Firefox 6-35
(-moz)Safari 7.1+
(-webkit)Safari for iOS 8+
(-webkit)
80.25%
94.86%
14.61%
18
text-emphasis styling
text-emphasis
text-emphasis-* properties
Technique of utilizing small symbols subsequent to every glyph to emphasise a run of textual content, generally utilized in East Asian languages. The text-emphasis shorthand property, and its text-emphasis-style and text-emphasis-color constituent properties can be utilized to use marks to the textual content. The text-emphasis-position property, which inherits individually, permits setting theposition ofemphasis marks with respect to the textual content.
Chrome 25+
(-webkit)Edge 79+
(-webkit)Opera 15+
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)Opera Cellular
(-webkit)
21.96%
95.99%
74.03%
19
text-orientation
text-orientation
Specifies the orientation of textual content inside a line. Present values solely have an impact in vertical typographic modes (outlined with the writing-mode property).
Safari
(-webkit)
90.88%
94.84%
3.96%
20
text-size-adjust
text-size-adjust
Management if and the way the text-inflating algorithm is utilized to the textual content material of the ingredient it’s utilized to.
Edge 12-18
(-ms)Safari iOS
(-webkit)Firefox for Android
(-moz)
72.75%
87.48%
14.73%
21
user-select: none
user-select
Technique of stopping textual content or ingredient choice.
Web Explorer 10-11
(-ms)Safari
(-webkit)Safari iOS
(-webkit)Android Browser 2.1-4.4.4
(-webkit)
74.81%
96.49%
21.68%
22
CSS Canvas Drawings
background: -webkit-canvas(mycanvas)
Technique of utilizing HTML5 Canvas as a background picture. Not at present a part of any specification.
Safari
(-webkit)
0.00%
19.40%
19.40%
23
CSS Masks
masks mask-* properties
Technique of displaying a part of a component, utilizing a particular picture as a masks.
Chrome
(-webkit)Edge
(-webkit)Safari
(-webkit)Safari iOSAndroid Browser
(-webkit)Chrome for Android
(-webkit)Opera Cellular
(-webkit)
Partial help in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, however missing help for different components of the spec.
4.18%
96.93%
92.75%
24
CSS Reflections
-webkit-box-reflect
Technique of displaying a mirrored image of a component.
Chrome
(-webkit)Edge
(-webkit)Safari
(-webkit)Opera
(-webkit)Safari iOS
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)Opera Cellular
(-webkit)
0.00%
91.20%
91.20%
25
CSS Scrollbar Styling
scrollbar-color
scollbar-width
Strategies of styling scrollbar coloration and width.
Chrome
(-webkit)Edge
(-webkit)Safari
(-webkit)Opera
(-webkit)Safari iOS
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)
4.28%
96.87%
92.59%
26
CSS Textual content Fill & Stroking
text-stroke
text-stroke-* properties
Technique of declaring the define (stroke) width and coloration for textual content.
Chrome
(-webkit)Edge
(-webkit)Firefox
(-webkit)Safari
(-webkit)Opera
(-webkit)Safari iOS
(-webkit)Android Browser
(-webkit)Chrome for Android
(-webkit)Firefox for Android
(-webkit)Opera Cellular
(-webkit)
0.00%
96.65%
96.65%
27
Intrinsic & Extrinsi Sizing
max-content
min-content
fit-content
stretch (previously fill).
Permits for the peak and width of a component to be laid out in intrinsic values relatively than fastened numeric values.
Chrome 22-45
(-webkit)Edge 3-65
(-webkit)Firefox (-moz-available)Opera 15-32
(-webkit)Safari 6.1-10-1
(-webkit)Safari iOS 7-13.7
(-webkit)Androind Browser 4.4-4.4.4
(-webkit)
91.99%
96.36%
4.37%
28
Media Queries: Decision Function
@media (min-resolution: 300dpi) { … }, @media (max-resolution: 300dpi) { … }
Permits a media question to be set primarily based on the system pixels used per CSS unit. Whereas the usual makes use of min-resolution and max-resolution, some browsers help the older non-standard device-pixel-ratio media question.
Chrome 4-28
(-webkit)Safari 4+
(-webkit)Opera 10-11.5
(-webkit)Safari iOS
(-webkit)Android Browser (2.3-4.3) Opera Cellular 12
(-webkit)Firefox 3.5-15
(min–moz-device-pixel-ratio)
Browsers that help -webkit help the non-standard -webkit-min-device-pixel-ratio and webkit-min-device-pixel-ratio.
80.40%
99.16%
18.76%
After placing this record collectively, my preliminary impression was that these aren’t issues that I might stumble upon fairly often. Some properties haven’t been — and doubtless won’t be — totally applied. I’d say the ingredient() operate and CSS Canvas Drawings fall into that class. Safari just lately dropped prefixing for place: sticky, so that can possible drop off the record very quickly.
You possibly can winnow the record down and steer away from sure conditions if you wish to. You possibly can dismiss it and say it’s not vital, so why hassle? The fact is that the record continues to be lengthy sufficient that manually managing prefixes in your code just isn’t one thing you wish to tackle. A pertinent query to reply is: do you wish to enhance cross-browser help to a excessive degree? If the reply is sure, then it’s best to take into account this as a part of your growth effort.
It is usually vital to keep in mind that it isn’t nearly these properties and present browsers. There are nonetheless individuals on the market utilizing older units with older browsers, which don’t help the unprefixed variations of some options. Take the animation property, for instance. Chrome was the final browser to unprefix it in 2015. But, as we speak, 1.3% of the customers worldwide are nonetheless utilizing a browser that doesn’t help the unprefixed model.
I’ve ran into a few conditions just lately that required prefixed properties. For instance, I used to be making a studying progress bar for a weblog and wanted to make use of -webkit-appearance: none; and -moz-appearance: none; to reset the default styling for the progress ingredient. It additionally wanted sticky positioning, so I needed to prefix place: sticky to help sticky positioning in Safari.
One other instance? I needed to make use of a PNG picture as a masks picture for a Christmas-themed design and located that -webkit-mask-image is the one property that works correctly. Masking is usually a bit erratic as a result of most browsers solely partially help the spec.
Right here’s one more: Flavio Copes, in “Easy methods to apply padding to a number of traces in CSS,” wrote about how he needed to have the identical padding on every line of a multi-line heading. The answer was to make use of box-decoration-break: clone. Most browsers require the -webkit prefixed model of this property, so it’s essential use this.
Instruments
A number of the instruments that had been created to unravel points with prefixing and browser help have fallen by the wayside. I might suggest checking first to see if a instrument is up-to-date earlier than utilizing it.
Actually, Autoprefixer (a PostCSS plugin) is maintained and it makes use of knowledge straight from caniuse to remain present.
Emmet additionally has nice prefixing capabilities. Particularly, it has a css.autoInsertVendorPrefixes choice to robotically insert prefixes for you. I haven’t verified whether it is present or not, however it’s price contemplating as a part of your growth atmosphere.
Since most code editors help Emmet, it makes modifying prefixed properties lots simpler. Emmet has a CSS mirror worth command that updates the worth of all prefixed variations of the identical property in a rule. You possibly can learn the Emmet docs for more information in regards to the prefixing capabilities.
Conclusion
Vendor prefixing just isn’t useless, sadly. We’re nonetheless residing with the legacy. On the similar time, we will be grateful that prefixed options are on a gradual decline. Some good work has been executed by browser distributors to implement unprefixed options in lieu of prefixed options. This has eliminated the brunt of the burden from builders.
Nevertheless, chances are you’ll stumble upon situations that require prefixes nonetheless on occasion. And if you wish to help as many browsers as attainable, it’s best to proceed with an auto-prefixing technique.
The put up Is Vendor Prefixing Lifeless? appeared first on CSS-Methods.
You possibly can help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!