How to Find Out When I Can Safely Drop Vendor Prefixes for a CSS3 Property

How do I find out when I can safely drop vendor prefixes for a CSS3 property?

When can I use... contains browser support tables with convenient indicators of which versions of which browsers require the vendor-prefixed versions of various CSS3 features, as well as features in other standards like HTML5, its new JavaScript APIs, SVG, etc. That should be the first place you stop at.

The site is updated regularly (for now, at least) as new versions of browsers are released and the drafts of the relevant CSS3 modules are updated.

Can I stop using CSS3 vendor prefixes on border-radius and box-shadow?

That depends on your user-base. While newer versions of popular browsers do support non-prefixed versions, older versions do not. You can't be sure that all your users have already updated or will ever update their browsers.

Why put the non prefixed css3 property last?

With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.

In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.

How necessary are CSS3 vendor prefixes right now?

You can build a filtered list on this web page and show all of the required prefixes.

http://caniuse.com/#comparison

Performance and DOM Loading using vendor specific prefixes for CSS3

Which of the following is better to do?

  1. Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.

  2. Using all the browser prefixes in the classes and let the browser use whichever suits it.

Option 1 consists of using JavaScript to detect support, then conditionally writing out the CSS code with or without the prefixes and letting the browser apply the styles.

Option 2 consists of simply using CSS and relying on the browser to ignore prefixes/declarations it doesn’t understand.

As you can see, option 1 introduces an extra layer (JavaScript) which is not necessary if you just want to use some CSS3 features where possible. Option 2 will be the most performant solution.

Why do browsers need vendor prefixes for CSS3? What is stopping them from just using the standard CSS3 properties?

CSS3 has not been formally adopted as a complete standard yet—it is still a draft proposal.

Vendor specific tags allow the vendors to begin to implement CSS3 draft standards or proposed ideas for CSS3 now using experimental implementations, while ensuring that their current rendering with these proprietary tags can be distinguished in the future from their rendering of the actual CSS3 tag as per the final spec, even if that is different.

Is there a browser-compatibility deprecation table for CSS3 vendor prefixes?

They also have it in book form, The Book of CSS3 by Peter Gasston, that has tables listing all the CSS3 browser support. However I bet thats the last thing you wanted to look for... so this maybe?

CSS useless vendor prefixes

I was looking for the same a while ago, and ran into this useful website: Should I prefix?. It lists the CSS properties and whether a prefix is still necessary or not.

Next to that, you can always check Can I Use for more info and detail.

Do I still need to use prefixes with CSS3 features?

Short answer : Use Them because HTML5 and CSS3 are still under development and are not fully supported by any browser.

Other stuff you may like to read : As a developer, we need to see from user point of view, cross-browser compatibility is essential to maintain your website layout almost same in all browsers, more over it also gives professional edge to your work if your layout is consistent in all browser, using proprietary properties won't increase your page load time, and most of the users don't update their browsers to latest version, and so they get a shabby rendered page, so to be safe use them unless and until CSS3 and HTML5 are completely supported by all browsers.



Related Topics



Leave a reply



Submit