{"id":339518,"date":"2021-05-05T07:18:28","date_gmt":"2021-05-05T14:18:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=339518"},"modified":"2021-05-05T07:18:31","modified_gmt":"2021-05-05T14:18:31","slug":"is-vendor-prefixing-dead","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/is-vendor-prefixing-dead\/","title":{"rendered":"Is Vendor Prefixing Dead?"},"content":{"rendered":"\n

Let\u2018s take a quick stroll down memory-lane to revisit how vendor prefixing<\/a> CSS properties came to be. I hope I don\u2019t trigger PTSD for anyone!<\/p>\n\n\n\n

It\u2018s 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\u2019\u00eatre<\/em> 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.<\/p>\n\n\n\n\n\n\n\n

By 2012, the W3C CSS Working Group was issuing guidance on the use of vendor prefixes<\/a>:<\/p>\n\n\n\n

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)<\/p><\/blockquote>\n\n\n\n

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<\/a> to automate the problem away.<\/p>\n\n\n\n

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?<\/strong><\/p>\n\n\n\n

I did some analysis on the caniuse dataset<\/a> and Mozilla Developer Network Compat dataset<\/a> to answer this question.<\/p>\n\n\n

Adoption trends<\/h3>\n\n\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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\u2009\u2014\u2009such as -moz-border-radius*<\/code> and -moz-box-shadow<\/code>\u2009\u2014\u2009from Firefox. Thereafter, they consistently removed prefixed properties once the standard version of that property was fully implemented. <\/p>\n\n\n\n

In 2013, Mozilla started to make features available behind feature flags (pref flags)<\/a>. 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.<\/p>\n\n\n\n

It was only in April 2016 that WebKit announced that it would no longer release experimental features with prefixes<\/a>:<\/p>\n\n\n\n

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\u2019s prefixes.<\/p><\/blockquote>\n\n\n\n

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. <\/p>\n\n\n\n

Microsoft was never \u201cgung ho\u201d 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!<\/p>\n\n\n

Feature trends<\/h3>\n\n\n

The table below contrasts the prefixed features in 2013 (the zenith of prefixing) with 2021.<\/p>\n\n\n\n

\n \n \n \n \n \n \n \n
<\/th>\n 2013<\/th>\n 2021<\/th>\n <\/tr>\n <\/thead>\n
Browsers<\/td>\n \n
    \n
  • Chrome 31<\/li>\n
  • Firefox 26<\/li>\n
  • Internet Explorer 11<\/li>\n
  • Safari 11<\/li>\n
  • Safari iOS 7.0-7.1<\/li>\n <\/ul>\n <\/td>\n
\n
    \n
  • Chrome 89<\/li>\n
  • Edge 89<\/li>\n
  • Firefox 88<\/li>\n
  • Internet Explorer 11<\/li>\n
  • Safari 14<\/li>\n
  • Chrome Android 89<\/li>\n
  • Safari iOS 14.0-14.5<\/li>\n <\/ul>\n <\/td>\n <\/tr>\n
Some prefixing required<\/td>\n \n \n
Total features<\/td>\n 53<\/td>\n 35<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/figure>\n\n\n\n

It may be surprising to see the raw numbers. The number of features that require prefixing fell by ~33% between 2013 and 2021<\/strong>. That number sounds quite modest to me.<\/p>\n\n\n\n

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<\/code>; or it could be a feature that only has one property or value that requires a prefix, such as user-select: none<\/code>. Let\u2019s explore the actual features to understand the circumstances better, beginning by looking at what changed in that intervening period.<\/p>\n\n\n\n

Twenty features were unprefixed (fully implemented across the major browsers) and three prefixed features were introduced (backdrop-filter<\/code>, CSS text-orientation<\/code>, and CSS initial-letter<\/code>). <\/p>\n\n\n\n

In my opinion, the most notable features that are unprefixed now, which were significant pain points are:<\/p>\n\n\n\n

  1. CSS Flexible Box Layout Module<\/li>
  2. CSS3 Box Sizing<\/li>
  3. CSS Animation<\/li>
  4. CSS3 2D Transforms<\/li>
  5. CSS3 3D Transforms<\/li>
  6. CSS Filter Effects<\/li><\/ol>\n\n\n\n

    The other 14 features are less prominent:<\/p>\n\n\n\n

    1. :any-link<\/code><\/li>
    2. ::placeholder<\/code><\/li>
    3. ::selection<\/code><\/li>
    4. :focus-visible<\/code><\/li>
    5. :is()<\/code><\/li>
    6. :read-only<\/code><\/li>
    7. :read-write<\/code><\/li>
    8. font-feature-settings<\/code><\/li>
    9. text-align-last<\/code><\/li>
    10. writing-mode<\/code><\/li>
    11. CSS grab<\/code> and grabbing<\/code> cursors<\/li>
    12. CSS Logical Properties (will be used a lot more in the future, now that support is better)<\/li>
    13. CSS3 zoom-in<\/code> and zoom-out<\/code> cursors<\/li>
    14. CSS3 Multiple Column Layout<\/li><\/ol>\n\n\n\n

      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.<\/p>\n\n\n

      Prefixing in 2021<\/h3>\n\n\n

      Let\u2018s look at the properties that require prefixing. It\u2019s a motley group!<\/p>\n\n\n\n

      \n \n\t\t\t\t\n\t\t\t\t\t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      #<\/th>\n Name<\/th>\n Properties\/Values<\/th>\n Description<\/th>\n Prefix required<\/th>\n Unprefixed support<\/th>\n Prefixed support<\/th>\n Improvement with prefixes<\/th>\n <\/tr>\n\t\t\t\t<\/thead>\n
      1<\/td>\n appearance<\/a><\/code><\/td>\n appearance<\/code><\/td>\n Defines how elements (particularly form controls) appear by default. Setting the value to none<\/code> causes in the element\u2019s default appearance being entirely redefined using other CSS properties.<\/td>\n
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Android Browser 2.1-4.4.4
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		69.80%<\/td>\n 97.03%<\/td>\n 27.23%<\/td>\n <\/tr>\n
      2<\/td>\n background-clip-text<\/a><\/code><\/td>\n background-clip: text<\/code><\/td>\n Non-standard method of clipping a background image to the foreground text.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		3.89%<\/td>\n 96.65%<\/td>\n 92.76%<\/td>\n <\/tr>\n
      3<\/td>\n backdrop-filter<\/a><\/code><\/td>\n backdrop-filter<\/code><\/td>\n Method of applying filter effects (like blur<\/code>, grayscale<\/code> or hue<\/code>) to content or elements below the target element.<\/td>\n
      • Safari
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		70.20%<\/td>\n 88.20%<\/td>\n 18.00%<\/td>\n <\/tr>\n
      4<\/td>\n background-image: crossfade()<\/a><\/code><\/td>\n background-image: crossfade()<\/code><\/td>\n Image function to create a “crossfade” between images. This allows one image to transition (fade) into another based on a percentage value.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		17.77%<\/td>\n 92.62%<\/td>\n 74.85%<\/td>\n <\/tr>\n
      5<\/td>\n background-image: image-set()<\/a><\/code><\/td>\n background-image: image-set()<\/code><\/td>\n Method of letting the browser pick the most appropriate CSS background image from a given set, primarily for high PPI<\/abbr> screens.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Opera Mobile
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		17.77%<\/td>\n 92.48%<\/td>\n 74.71%<\/td>\n <\/tr>\n
      6<\/td>\n box-decoration-break<\/a><\/code><\/td>\n box-decoration-break<\/code><\/td>\n 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.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android BrowserOpera Mobile
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		6.39%<\/td>\n 97.17%<\/td>\n 90.78%<\/td>\n <\/tr>\n
      7<\/td>\n clip-path<\/a><\/code><\/td>\n clip-path<\/code><\/td>\n Method of defining the visible region of an HTML element using SVG or a shape definition.<\/td>\n
      • Safari
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		72.00%<\/td>\n 96.33%<\/td>\n 24.33%<\/td>\n <\/tr>\n
      8<\/td>\n color-adjust<\/a><\/code><\/td>\n color-adjust<\/code><\/td>\n A non-standard CSS extension that can be used to force background colors and images to print.<\/td>\n
      • Chrome
        (-webkit-print-color-adjust<\/code>)<\/li>
      • Edge
        (-webkit-print-color-adjust<\/code>)<\/li>
      • Safari
        (-webkit-print-color-adjust<\/code>)<\/li>
      • Opera
        (-webkit-print-color-adjust<\/code>)<\/li>
      • Android Mobile
        (-webkit-print-color-adjust<\/code>)<\/li><\/ul><\/td>\n
      		3.69%<\/td>\n 39.77%<\/td>\n 36.08%<\/td>\n <\/tr>\n
      9<\/td>\n element()<\/a><\/code><\/td>\n background: element()<\/code><\/td>\n This function renders a live image generated from an arbitrary HTML element<\/td>\n
      • Firefox
        (-moz<\/code>)<\/li><\/ul><\/td>\n
      		0.00%<\/td>\n 4.04%<\/td>\n 4.04%<\/td>\n <\/tr>\n
      10<\/td>\n font-kerning<\/a><\/code><\/td>\n font-kerning<\/code><\/td>\n 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.<\/td>\n
      • Safari iOS
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		81.73%<\/td>\n 96.03%<\/td>\n 14.30%<\/td>\n <\/tr>\n
      11<\/td>\n font-smooth<\/a><\/code><\/td>\n font-smooth<\/code><\/td>\n 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.<\/td>\n
      • Chrome
        (-webkit-font-smoothing<\/code>)<\/li>
      • Edge
        (-webkit-font-smoothing<\/code>)<\/li>
      • Firefox
        (-moz-osx-font-smoothing<\/code>)<\/li>
      • Safari
        (-webkit-font-smoothing<\/code>)<\/li>
      • Opera
        (-webkit-font-smoothing<\/code>)<\/li><\/ul><\/td>\n
      		0.00%<\/td>\n 39.64%<\/td>\n 39.64%<\/td>\n <\/tr>\n
      12<\/td>\n hyphens<\/a><\/code><\/td>\n hyphens<\/code><\/td>\n Method of controlling when words at the end of lines should be hyphenated.<\/td>\n
      • Internet Explorer 10+
        (-ms<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		76.49%<\/td>\n 96.51%<\/td>\n 20.02%<\/td>\n <\/tr>\n
      13<\/td>\n initial-letter<\/a><\/code><\/td>\n initial-letter<\/code><\/td>\n Method of creating an enlarged cap, including a drop or raised cap, in a robust way.<\/td>\n
      • Safari
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		0.00%<\/td>\n 18.00%<\/td>\n 18.00%<\/td>\n <\/tr>\n
      14<\/td>\n line-clamp<\/a><\/code><\/td>\n line-clamp<\/code><\/td>\n Contains text to a given amount of lines when used in combination with display: -webkit-box<\/code>. Any text that overflows the space produces anellipsis when text-overflow: ellipsis<\/code> is included.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Firefox
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li>
      • Firefox for Android
        (-webkit<\/code>)<\/li>
      • Opera Mobile
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		0.19%<\/td>\n 96.28%<\/td>\n 96.09%<\/td>\n <\/tr>\n
      15<\/td>\n position: sticky<\/a><\/code><\/td>\n position: sticky<\/code><\/td>\n 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.<\/td>\n
      • Safari 7.1-12.1
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		93.50%<\/td>\n 95.36%<\/td>\n 1.86%<\/td>\n <\/tr>\n
      16<\/td>\n tab-size<\/a><\/code><\/td>\n tab-size<\/code><\/td>\n Method of customizing the width of the Tab<\/kbd> character. Only effective alongside white-space: pre<\/code> or white-space: pre-wrap<\/code>.<\/td>\n
      • Firefox 4+
        (-moz<\/code>)<\/li>
      • Firefox for Android
        (-moz<\/code>)<\/li>
      • Opera 11.5-12-1
        (-o<\/code>)<\/li><\/ul><\/td>\n
      		92.33%<\/td>\n 97.38%<\/td>\n 5.05%<\/td>\n <\/tr>\n
      17<\/td>\n text-decoration styling<\/a><\/code><\/td>\n text-decoration<\/code>
      text-decoration-*<\/code> properties.<\/td>\n       		Method of defining the type, style and color of lines in the text-decoration<\/code> property. These can be defined as a shorthand (e.g. text-decoration: line-through dashed blue<\/code>) or as single properties (e.g. text-decoration-color: blue<\/code>).<\/td>\n
      • Firefox 6-35
        (-moz<\/code>)<\/li>
      • Safari 7.1+
        (-webkit<\/code>)<\/li>
      • Safari for iOS 8+
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		80.25%<\/td>\n 94.86%<\/td>\n 14.61%<\/td>\n <\/tr>\n
      18<\/td>\n text-emphasis styling<\/a><\/code><\/td>\n text-emphasis<\/code>
      text-emphasis-*<\/code> properties<\/td>\n       		Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis<\/code> shorthand property, and its text-emphasis-style<\/code> and text-emphasis-color<\/code> constituent properties can be used to apply marks to the text. The text-emphasis-position<\/code> property, which inherits separately, allows setting theposition ofemphasis marks with respect to the text.<\/td>\n
      • Chrome 25+
        (-webkit<\/code>)<\/li>
      • Edge 79+
        (-webkit<\/code>)<\/li>
      • Opera 15+
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li>
      • Opera Mobile
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		21.96%<\/td>\n 95.99%<\/td>\n 74.03%<\/td>\n <\/tr>\n
      19<\/td>\n text-orientation<\/a><\/code><\/td>\n text-orientation<\/code><\/td>\n Specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes (defined with the writing-mode<\/code> property).<\/td>\n Safari
      (-webkit<\/code>)<\/td>\n       		90.88%<\/td>\n 94.84%<\/td>\n 3.96%<\/td>\n <\/tr>\n
      20<\/td>\n text-size-adjust<\/a><\/code><\/td>\n text-size-adjust<\/code><\/td>\n Control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.<\/td>\n
      • Edge 12-18
        (-ms<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Firefox for Android
        (-moz<\/code>)<\/li><\/ul><\/td>\n
      		72.75%<\/td>\n 87.48%<\/td>\n 14.73%<\/td>\n <\/tr>\n
      21<\/td>\n user-select: none<\/a><\/code><\/td>\n user-select<\/code><\/td>\n Method of preventing text or element selection.<\/td>\n
      • Internet Explorer 10-11
        (-ms<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser 2.1-4.4.4
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		74.81%<\/td>\n 96.49%<\/td>\n 21.68%<\/td>\n <\/tr>\n
      22<\/td>\n CSS Canvas Drawings<\/a><\/td>\n background: -webkit-canvas(mycanvas)<\/code><\/td>\n Method of using HTML5 Canvas as a background image. Not currently part of any specification.<\/td>\n
      • Safari
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		0.00%<\/td>\n 19.40%<\/td>\n 19.40%<\/td>\n <\/tr>\n
      23<\/td>\n CSS Masks<\/a><\/td>\n mask mask-*<\/code> properties<\/td>\n Method of displaying part of an element, using a selected image as a mask.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Safari iOSAndroid Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li>
      • Opera Mobile
        (-webkit<\/code>)<\/li><\/ul>

        Partial support in WebKit\/Blink browsers refers to supporting the mask-image<\/code> and mask-box-image<\/code> properties, but lacking support for other parts of the spec.<\/p><\/td>\n

      		4.18%<\/td>\n 96.93%<\/td>\n 92.75%<\/td>\n <\/tr>\n
      24<\/td>\n CSS Reflections<\/a><\/td>\n -webkit-box-reflect<\/code><\/td>\n Method of displaying a reflection of an element.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li>
      • Opera Mobile
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		0.00%<\/td>\n 91.20%<\/td>\n 91.20%<\/td>\n <\/tr>\n
      25<\/td>\n CSS Scrollbar Styling<\/a><\/td>\n scrollbar-color<\/code>
      scollbar-width<\/code><\/td>\n       		Methods of styling scrollbar color and width.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		4.28%<\/td>\n 96.87%<\/td>\n 92.59%<\/td>\n <\/tr>\n
      26<\/td>\n CSS Text Fill & Stroking<\/a><\/td>\n text-stroke<\/code>
      text-stroke-*<\/code> properties<\/td>\n       		Method of declaring the outline (stroke) width and color for text.<\/td>\n
      • Chrome
        (-webkit<\/code>)<\/li>
      • Edge
        (-webkit<\/code>)<\/li>
      • Firefox
        (-webkit<\/code>)<\/li>
      • Safari
        (-webkit<\/code>)<\/li>
      • Opera
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser
        (-webkit<\/code>)<\/li>
      • Chrome for Android
        (-webkit<\/code>)<\/li>
      • Firefox for Android
        (-webkit<\/code>)<\/li>
      • Opera Mobile
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		0.00%<\/td>\n 96.65%<\/td>\n 96.65%<\/td>\n <\/tr>\n
      27<\/td>\n Intrinsic & Extrinsi Sizing<\/a><\/td>\n max-content<\/code>
      min-content<\/code>
      fit-content<\/code>
      stretch<\/code> (formerly fill<\/code>).<\/td>\n       		Allows for the height and width of an element to be specified in intrinsic values rather than fixed numeric values.<\/td>\n
      • Chrome 22-45
        (-webkit<\/code>)<\/li>
      • Edge 3-65
        (-webkit<\/code>)<\/li>
      • Firefox (-moz-available)<\/li>
      • Opera 15-32
        (-webkit<\/code>)<\/li>
      • Safari 6.1-10-1
        (-webkit<\/code>)<\/li>
      • Safari iOS 7-13.7
        (-webkit<\/code>)<\/li>
      • Androind Browser 4.4-4.4.4
        (-webkit<\/code>)<\/li><\/ul><\/td>\n
      		91.99%<\/td>\n 96.36%<\/td>\n 4.37%<\/td>\n <\/tr>\n
      28<\/td>\n Media Queries: Resolution Feature<\/a><\/td>\n @media (min-resolution: 300dpi)<\/code> { \u2026 }, @media (max-resolution: 300dpi) { \u2026 }<\/code><\/td>\n Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min-resolution<\/code> and max-resolution<\/code>, some browsers support the older non-standard device-pixel-ratio<\/code> media query.<\/td>\n
      • Chrome 4-28
        (-webkit<\/code>)<\/li>
      • Safari 4+
        (-webkit<\/code>)<\/li>
      • Opera 10-11.5
        (-webkit<\/code>)<\/li>
      • Safari iOS
        (-webkit<\/code>)<\/li>
      • Android Browser (2.3-4.3) Opera Mobile 12
        (-webkit<\/code>)<\/li>
      • Firefox 3.5-15
        (min--moz-device-pixel-ratio<\/code>)<\/li><\/ul>

        Browsers that support -webkit<\/code> support the non-standard -webkit-min-device-pixel-ratio<\/code> and webkit-min-device-pixel-ratio<\/code>.<\/p><\/td>\n

      		80.40%<\/td>\n 99.16%<\/td>\n 18.76%<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/figure>\n\n\n\n

      After putting this list together, my initial impression was that these aren\u2019t things that I would bump into very often. Some properties have not been\u2009\u2014\u2009and probably will not be\u2009\u2014\u2009fully implemented. I\u2019d say the element()<\/code> function and CSS Canvas Drawings fall into that category. Safari recently dropped prefixing for position:<\/code> sticky<\/code>, so that will likely drop off the list very soon.<\/p>\n\n\n\n

      You can winnow the list down and steer away from certain situations if you want to. You can dismiss it and say it\u2019s 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.<\/p>\n\n\n\n

      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<\/code> 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.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      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<\/a> and needed to use -webkit-appearance: none;<\/code> and -moz-appearance: none;<\/code> to reset the default styling for the progress<\/code> element. It also needed sticky positioning, so I had to prefix position: sticky<\/code> to support sticky positioning in Safari.<\/p>\n\n\n\n