Let‘s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don’t trigger PTSD for anyone!
It‘s not clear who started prefixing, or when it began exactly. What is clear, is that by 2006, prefixed features were in Internet Explorer and Firefox. The raison d’être of prefixes was to specify browser-specific features. It was seen as a way to implement non-standard features and offer previews of new standard features.
By 2012, the W3C CSS Working Group was issuing guidance on the use of vendor prefixes:
In CSS we use vendor prefixes for properties, values, @-rules that are: – vendor specific extensions (per CSS 2.1), or – experimental implementations (per CSS Snapshot 2010) (e.g. in Working Drafts)
It became an industry norm. The number of prefixes grew, and with it, things grew confusing. It led to partial implementations of CSS features, introduced bugs, and ultimately created a fracture in the browser ecosystem, which disgruntled developers. Developers responded by making tools to automate the problem away.
Browser vendors slowly began to move away from prefixing, favoring feature flags inside the browser settings instead. It appeared that the problems created by vendor prefixes would fade away in time. The question is: has that time come yet?
I did some analysis on the caniuse dataset and Mozilla Developer Network Compat dataset to answer this question.
Adoption trends
You can see the trend of the implementation of prefixed features across the major browsers in the chart above. I have excluded Chrome for Android because of insufficient data.
From 2007 until 2011, there was a steady increase in the numbers of prefixed features in all browsers. Internet Explorer only saw an uptick in 2011. Then, in 2012, Mozilla began to remove prefixed features — such as -moz-border-radius* and -moz-box-shadow — from Firefox. Thereafter, they consistently removed prefixed properties once the standard version of that property was fully implemented.
In 2013, Mozilla started to make features available behind feature flags (pref flags). That same year, Chrome switched its rendering engine from WebKit to Blink (part of the Chromium project). This was a big turning point in removing some prefixed features.
It was only in April 2016 that WebKit announced that it would no longer release experimental features with prefixes:
Over time this strategy has turned out not to work so well. Many websites came to depend on prefixed properties. They often used every prefixed variant of a feature, which makes CSS less maintainable and JavaScript programs trickier to write. Sites frequently used just the prefixed version of a feature, which made it hard for browsers to drop support for the prefixed variant when adding support for the unprefixed, standard version. Ultimately, browsers felt pressured by compatibility concerns to implement each other’s prefixes.
Because Safari and iOS browsers have always used the WebKit rendering engine, a consistent reduction in the number of prefixes came later to these browsers.
Microsoft was never “gung ho” on prefixing and consistently had the fewest prefixed features. In 2019, Edge switched from its own rendering engine to Blink. In a funny twist, the change actually increased the number of prefixed properties in Edge!
Feature trends
The table below contrasts the prefixed features in 2013 (the zenith of prefixing) with 2021.
It may be surprising to see the raw numbers. The number of features that require prefixing fell by ~33% between 2013 and 2021. That number sounds quite modest to me.
Of course, it could be misleading to focus just on numbers. The impact varies. It could be a family of properties that all require prefixing, such as animation; or it could be a feature that only has one property or value that requires a prefix, such as user-select: none. Let’s explore the actual features to understand the circumstances better, beginning by looking at what changed in that intervening period.
Twenty features were unprefixed (fully implemented across the major browsers) and three prefixed features were introduced (backdrop-filter, CSS text-orientation, and CSS initial-letter).
In my opinion, the most notable features that are unprefixed now, which were significant pain points are:
- CSS Flexible Box Layout Module
- CSS3 Box Sizing
- CSS Animation
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS Filter Effects
The other 14 features are less prominent:
:any-link::placeholder::selection:focus-visible:is():read-only:read-writefont-feature-settingstext-align-lastwriting-mode- CSS
grabandgrabbingcursors - CSS Logical Properties (will be used a lot more in the future, now that support is better)
- CSS3
zoom-inandzoom-outcursors - CSS3 Multiple Column Layout
If you choose not to support Internet Explorer 11 in 2021, then an additional seven features no longer require prefixing. That reduces the number of features that require prefixing in 2021 to 28, which is a 46% reduction since 2013.
Prefixing in 2021
Let‘s look at the properties that require prefixing. It’s a motley group!
| # | Name | Properties/Values | Description | Prefix required | Unprefixed support | Prefixed support | Improvement with prefixes |
|---|---|---|---|---|---|---|---|
| 1 | appearance |
appearance |
Defines how elements (particularly form controls) appear by default. Setting the value to none causes in the element’s default appearance being entirely redefined using other CSS properties. |
|
69.80% | 97.03% | 27.23% |
| 2 | background-clip-text |
background-clip: text |
Non-standard method of clipping a background image to the foreground text. |
|
3.89% | 96.65% | 92.76% |
| 3 | backdrop-filter |
backdrop-filter |
Method of applying filter effects (like blur, grayscale or hue) to content or elements below the target element. |
|
70.20% | 88.20% | 18.00% |
| 4 | background-image: crossfade() |
background-image: crossfade() |
Image function to create a “crossfade” between images. This allows one image to transition (fade) into another based on a percentage value. |
|
17.77% | 92.62% | 74.85% |
| 5 | background-image: image-set() |
background-image: image-set() |
Method of letting the browser pick the most appropriate CSS background image from a given set, primarily for high PPI screens. |
|
17.77% | 92.48% | 74.71% |
| 6 | box-decoration-break |
box-decoration-break |
Controls whether the box’s margins, borders, padding, and other decorations wrap the broken edges of the box fragments, when the box is split by a break, like a page, column, region, or line. |
|
6.39% | 97.17% | 90.78% |
| 7 | clip-path |
clip-path |
Method of defining the visible region of an HTML element using SVG or a shape definition. |
|
72.00% | 96.33% | 24.33% |
| 8 | color-adjust |
color-adjust |
A non-standard CSS extension that can be used to force background colors and images to print. |
|
3.69% | 39.77% | 36.08% |
| 9 | element() |
background: element() |
This function renders a live image generated from an arbitrary HTML element |
|
0.00% | 4.04% | 4.04% |
| 10 | font-kerning |
font-kerning |
Controls the usage of the spacing between lettersstored in the font. Note that this only affects OpenType fonts with kerning information, it has no effect on other fonts. |
|
81.73% | 96.03% | 14.30% |
| 11 | font-smooth |
font-smooth |
Controls how anti-aliasing is applied when fonts are rendered. Though present in early 2002 drafts of the CSS3 Fonts specification, this property has since been removed and is currently not on the standard track. |
|
0.00% | 39.64% | 39.64% |
| 12 | hyphens |
hyphens |
Method of controlling when words at the end of lines should be hyphenated. |
|
76.49% | 96.51% | 20.02% |
| 13 | initial-letter |
initial-letter |
Method of creating an enlarged cap, including a drop or raised cap, in a robust way. |
|
0.00% | 18.00% | 18.00% |
| 14 | line-clamp |
line-clamp |
Contains text to a given amount of lines when used in combination with display: -webkit-box. Any text that overflows the space produces anellipsis when text-overflow: ellipsis is included. |
|
0.19% | 96.28% | 96.09% |
| 15 | position: sticky |
position: sticky |
Keeps elements positioned as”fixed” or”relative” depending on how it appears in the viewport. As a result the element is “stuck” in place while scrolling. |
|
93.50% | 95.36% | 1.86% |
| 16 | tab-size |
tab-size |
Method of customizing the width of the Tab character. Only effective alongside white-space: pre or white-space: pre-wrap. |
|
92.33% | 97.38% | 5.05% |
| 17 | text-decoration styling |
text-decorationtext-decoration-* properties. |
Method of defining the type, style and color of lines in the text-decoration property. These can be defined as a shorthand (e.g. text-decoration: line-through dashed blue) or as single properties (e.g. text-decoration-color: blue). |
|
80.25% | 94.86% | 14.61% |
| 18 | text-emphasis styling |
text-emphasistext-emphasis-* properties |
Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis shorthand property, and its text-emphasis-style and text-emphasis-color constituent properties can be used to apply marks to the text. The text-emphasis-position property, which inherits separately, allows setting theposition ofemphasis marks with respect to the text. |
|
21.96% | 95.99% | 74.03% |
| 19 | text-orientation |
text-orientation |
Specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes (defined with the writing-mode property). |
Safari ( -webkit) |
90.88% | 94.84% | 3.96% |
| 20 | text-size-adjust |
text-size-adjust |
Control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to. |
|
72.75% | 87.48% | 14.73% |
| 21 | user-select: none |
user-select |
Method of preventing text or element selection. |
|
74.81% | 96.49% | 21.68% |
| 22 | CSS Canvas Drawings | background: -webkit-canvas(mycanvas) |
Method of using HTML5 Canvas as a background image. Not currently part of any specification. |
|
0.00% | 19.40% | 19.40% |
| 23 | CSS Masks | mask mask-* properties |
Method of displaying part of an element, using a selected image as a mask. |
Partial support in WebKit/Blink browsers refers to supporting the |
4.18% | 96.93% | 92.75% |
| 24 | CSS Reflections | -webkit-box-reflect |
Method of displaying a reflection of an element. |
|
0.00% | 91.20% | 91.20% |
| 25 | CSS Scrollbar Styling | scrollbar-colorscollbar-width |
Methods of styling scrollbar color and width. |
|
4.28% | 96.87% | 92.59% |
| 26 | CSS Text Fill & Stroking | text-stroketext-stroke-* properties |
Method of declaring the outline (stroke) width and color for text. |
|
0.00% | 96.65% | 96.65% |
| 27 | Intrinsic & Extrinsi Sizing | max-contentmin-contentfit-contentstretch (formerly fill). |
Allows for the height and width of an element to be specified in intrinsic values rather than fixed numeric values. |
|
91.99% | 96.36% | 4.37% |
| 28 | Media Queries: Resolution Feature | @media (min-resolution: 300dpi) { … }, @media (max-resolution: 300dpi) { … } |
Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min-resolution and max-resolution, some browsers support the older non-standard device-pixel-ratio media query. |
Browsers that support |
80.40% | 99.16% | 18.76% |
After putting this list together, my initial impression was that these aren’t things that I would bump into very often. Some properties have not been — and probably will not be — fully implemented. I’d say the element() function and CSS Canvas Drawings fall into that category. Safari recently dropped prefixing for position: sticky, so that will likely drop off the list very soon.
You can winnow the list down and steer away from certain situations if you want to. You can dismiss it and say it’s not important, so why bother? The reality is that the list is still long enough that manually managing prefixes in your code is not something you want to take on. A pertinent question to answer is: do you want to improve cross-browser support to a high level? If the answer is yes, then you should consider this as part of your development effort.
It is also important to remember that it is not just about these properties and current browsers. There are still people out there using older devices with older browsers, which do not support the unprefixed versions of some features. Take the animation property, for example. Chrome was the last browser to unprefix it in 2015. Yet, today, 1.3% of the users worldwide are still using a browser that does not support the unprefixed version.
I have bumped into a couple of situations recently that required prefixed properties. For example, I was making a reading progress bar for a blog and needed to use -webkit-appearance: none; and -moz-appearance: none; to reset the default styling for the progress element. It also needed sticky positioning, so I had to prefix position: sticky to support sticky positioning in Safari.
Another example? I wanted to use a PNG image as a mask image for a Christmas-themed design and found that -webkit-mask-image is the only property that works properly. Masking is generally a bit erratic because most browsers only partially support the spec.
Here’s yet another: Flavio Copes, in “How to apply padding to multiple lines in CSS,” wrote about how he wanted to have the same padding on each line of a multi-line heading. The solution was to use box-decoration-break: clone. Most browsers require the -webkit prefixed version of this property, so you need to use this.
Tools
Some of the tools that were created to solve issues with prefixing and browser support have fallen by the wayside. I would recommend checking first to see if a tool is up-to-date before using it.
Certainly, Autoprefixer (a PostCSS plugin) is maintained and it uses data straight from caniuse to stay current.
Emmet also has great prefixing capabilities. Specifically, it has a css.autoInsertVendorPrefixes preference to automatically insert prefixes for you. I haven’t verified if it is current or not, but it is worth considering as part of your development environment.
Since most code editors support Emmet, it makes editing prefixed properties a lot easier. Emmet has a CSS reflect value command that updates the value of all prefixed versions of the same property in a rule. You can read the Emmet docs for more info about the prefixing capabilities.
Conclusion
Vendor prefixing is not dead, unfortunately. We are still living with the legacy. At the same time, we can be grateful that prefixed features are on a steady decline. Some good work has been done by browser vendors to implement unprefixed features in lieu of prefixed features. This has removed the brunt of the burden from developers.
However, you may bump into scenarios that require prefixes still from time to time. And if you want to support as many browsers as possible, you should continue with an auto-prefixing strategy.
The post Is Vendor Prefixing Dead? appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
from CSS-Tricks https://ift.tt/3xLXwud
via IFTTT
No comments:
Post a Comment