What CSS3 features still need vendor prefixes?

Question

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?

Solution 1

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

Solution 2

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:

Solution 3

"...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.

Solution 4

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:

• Autoprefixer (PostCSS plugin)
• gulp-autoprefixer
• grunt-postcss

View more solutions

Comments

[kslstn]

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: discourse.mozilla.org/t/…

[Asons]

@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.

[Yeats]

They don't show any info on prefixes. I always use that site but have to search elsewhere when it comes specifically to that.

[Eli Nathan]

This should be the accepted answer as the question asked specifically about vendor prefixes.

[Dai]

@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.

[Admin]

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 is better because it's specifically aimed toward prefixes.

[Asons]

@EliNathan -- Nope, that site lacks a lot prefixed stuff. For example, try figure if sticky need prefix? ... (and yes, it does, still today)

[Lucas Bustamante]

Indeed, that site lacks user-select, which is what I was looking for