16

The most common features I remember needing prefixes for were features such as flexbox, border-radius, box-shadow, etc... but now they are supported. With more users switching to more powerful browsers like Chrome and Firefox and away from IE, are there still features now that haven't been fully supported and require prefixes?

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
Gabriel West
  • 931
  • 2
  • 12
  • 23
  • Maybe this? http://peter.sh/experiments/vendor-prefixed-css-property-overview/ – Andrew Li Feb 24 '17 at 18:46
  • 2
    http://caniuse.com/ – Brad Feb 24 '17 at 21:34
  • By its nature, answers to this question are bound to be temporary and better served by a living documentation (such as linked in the answers) than a StackOverflow answer posted once and forgotten. So this is not a good question for SO. – Touffy Feb 24 '17 at 22:10
  • 4
    I disagree, this question led me to what I was looking for (links to sources of information on this topic). – Kyle Vassella Mar 31 '17 at 14:33

4 Answers4

22

Use the site http://shouldiprefix.com. It has the single purpose to "show what prefixes are needed for a newer CSS property."

Just enter the property you're interested in the search field, and it will return something like the below graphic:

enter image description here

Jim Ratliff
  • 623
  • 7
  • 14
6

There is a great site which allows you to check out support of any css property by most modern browsers. It also shows info about vendor prefixes (if they are needed). This site is named "Can I use" - http://caniuse.com

Dan Dev
  • 150
  • 5
  • 12
    They don't show any info on prefixes. I always use that site but have to search elsewhere when it comes specifically to that. – Yeats Feb 23 '18 at 18:10
  • 5
    @Yeats Yes they do - the site shows a yellow indicator in the top-right corner of each browser version box if it needs a prefix, and when you hover-over the box it shows a popup providing details. I've been using this site long before 2018 so I don't know why you're saying it doesn't provide info on prefixes. – Dai Sep 16 '19 at 02:41
  • It's not that they don't show info about prefixes, just that it's not prominent (hidden in footnotes). A website like [shouldiprefix.com](http://shouldiprefix.com) is better because it's specifically aimed toward prefixes. –  Jun 18 '20 at 16:35
2

"...are there still features now that haven't been fully supported and require prefixes?"

Yes, and there will always be, as it's kind of an industry standard that vendors use their prefix on newly drafted properties/methods until those become a standard.

I recommend you check the ones you are going to use, instead of searching for the ones that still has.

MDN provides an excellent site with both status, explanations, samples and browser support.

Asons
  • 84,923
  • 12
  • 110
  • 165
  • 2
    Firefox, Chrome and Safari use a flags approach now, where CSS support that is not ready for public consumption yet can be enabled via a hidden setting: https://discourse.mozilla.org/t/what-is-your-policy-on-flags-in-browser-compatibility-data/20298 – kslstn Nov 27 '17 at 09:02
  • @kslstn The _flags_ has been there for quite some time, still, they don't replace prefixed values. With them the _user_ can control if a certain property should apply, with another default value, where as with prefixed properties, it is the _developer_ of a site that can make use of drafted, pre-released one's. – Asons Nov 27 '17 at 09:13
2

Browser vendors are getting better at supporting features. That said, some newer or experimental features will require a prefix; but trying to remember or memorize them seems impractical.

You can check if your CSS needs any vendor prefixes by using tools like Autoprefixer CSS online. This tool generates prefixes based on the information provided from canIuse.

If you're using build tools for your project, check out:

Juan Marco
  • 3,081
  • 2
  • 28
  • 32