Member Avatar for Luckychap

Hi All,

I am struggling to get the version of css supported in my browser. Is there any way to get it through javascript.

Thanks

  • 3 Contributors
  • 7 Replies
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Short answer: you can’t ask a browser “what CSS version” it supports. CSS is no longer a single monolithic version (CSS1/2/3) but a set of independent modules that browsers implement at different times, so asking for a single version number isn’t meaningful. This is why feature detection — not “version sniffing” — is the right approach. (developer.mozilla.org)

Use feature queries and the JS supports API. In CSS use the @supports rule; in script use the CSS.supports API to test concrete property/value pairs before enabling modern layouts or behavior. Example:

@supports (display: grid) {
  .layout { display: grid; }
}
@supports not (display: grid) {
  .layout { float: left; /* fallback */ }
}
if (window.CSS && CSS.supports && CSS.supports('display', 'grid')) {
  // enable grid-dependent code
} else {
  // fallback
}

These APIs check specific features — not a “CSS version”. (developer.mozilla.org)

For older browsers (or where CSS.supports isn’t available) do simple JS property checks or use a detection library (as suggested). Example fallback test:

var d = document.createElement('div');
if ('gridTemplateColumns' in d.style) {
  // likely grid support (test values if you need exact behavior)
}

Also consult compatibility tables (Can I Use) and MDN when you pick features and plan fallbacks or polyfills. (developer.mozilla.org)

Practical notes: prefer progressive enhancement and feature detection over UA sniffing (don’t rely on browser strings), use build tools like Autoprefixer for vendor prefixes, and test the specific features you need rather than trying to detect a vague “CSS3” milestone. This gives predictable results across browsers as new modules are implemented. (developer.mozilla.org)

Recommended Answers

All 7 Replies

Member Avatar for macneato

Never used it myself, but a quick google search lead me to

Modernizr

Member Avatar for drjohn

WHY would you need this info?

All current browsers support css2, no browser supports more than a couple of bits of css3. The latest versions of firefox support a few more bits of css3 than most other browsers, but as css3 is still only at the discussion stage, you should just work with css2, unless you have a specific bit of code that you wish to use and you know the javascript alternative to use for other browsers, or just accept that it will not be displayed in other browsers. Because if the browser can't read your code, it just ignores it.

So, if you really need to know the version of css used, the answer is almost always css2, as css3 hasn't been got past the discussion stage.

Member Avatar for Luckychap

: First of all thanks for the info. And Why I want to know? Because I want to know.

OK currently CSS2 is used in most of the browsers but how would I now when my browser start supporting CSS3.

Member Avatar for macneato

You will "now" when your browser starts supporting CSS3 because it will be listed in features or "whats new" when you get a browser update.

Member Avatar for Luckychap

: Thanks for correcting the typo "now" :D.

But still I just want to know is there any way to get it in javascript.

Member Avatar for macneato

Told you to take a look at Modernizr, link to the website is above. Think its jquery

Member Avatar for drjohn

Current browsers will not change their CSS support, it is only when new releases occur that they will start supporting CSS3. So when Firefox 4 or IE9 comes out, you will read about the new improved level of CSS3 support. But as CSS3 is still at the discussion stage, don't expect anything to change for several years. Just stick to using CSS2 and the odd bits that FF supports, and accept that without adding JS support for a few features, IE8 users (and those with even older versions) will not see the extras you add. It is not a problem in any way. Just don't imagine that your CSS2 designs will suddenly stop working - they will not.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.