How to check if css value is supported by the browser?
Solution 1
I assume you meant to check whether the vh
value is supported, not whether specifically DIV#id
bears it?
function cssPropertyValueSupported(prop, value) {
var d = document.createElement('div');
d.style[prop] = value;
return d.style[prop] === value;
}
cssPropertyValueSupported('width', '1px');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false
Solution 2
There is the new API CSS.supports. Supported in most browsers except IE.
console.log(
// CSS.supports(property, value)
1, CSS.supports("text-decoration-style", "blink"),
2, CSS.supports("display", "flex"),
3, CSS.supports('--foo', 'red'),
4, CSS.supports('(--foo: red)'),
// CSS.supports(DOMstring)
5, CSS.supports("( transform-origin: 5% 5% )"),
6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or "
+ "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
)
And there is a similar feature in CSS, the @supports feature query selector, also supported in most browsers except IE:
@supports (display: grid) {
div {
display: grid;
}
}
@supports not (display: grid) {
div {
float: right;
}
}
Solution 3
We can since a while test from javascript if a css rule if available in the context with CSS.supports
.
(Since Firefox 22/ Chrome 28)
console.log(
CSS.supports("( transform-origin: 5% 5% )"),
"\n",
CSS.supports("( display: flex )"),
"\n ",
CSS.supports("( background-color: #12233212 )")
)
The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
To go further, we can possibly use this property for browser detection.
Solution 4
I see the code you have there.
var styletotest = "PutStyleHere";
if (styletotest in document.body.style)
{
alert("The " + styletotest + " property is supported");
} else {
alert("The " + styletotest + " property is NOT supported");
}
Simply place the css property you want to test in the quotes where it says
PutStyleHere
And when you load the file it will show a popup telling you if it works or not.
However this seems unnecessary.
Simply Googling:
[property] css W3
where [property] is the property you want to know browser support information.
When I searched
Opacity Css W3
and then clicked on the W3 link... you can scroll down and you will see a section of the page with the info you want like this:
Solution 5
I'd suggest to use Modernizr.
Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor's browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.
Some useful links:
Comments
-
Guillaume Palm almost 3 years
Im not very skilled in javascript so please be bear with me. Safari 6 and below and older android mobile browsers and maybe more do not support the css value VH. My DIV#id or class is not the height of the viewport. Below is a link to a page i found some useful information, but im really not sure how to use it with a css value:
Check whether a css value is supported
Here is the code given as a shortcut for you:
if('opacity' in document.body.style) { // do stuff } function isPropertySupported(property{ return property in document.body.style; }
In the comments of the link i attached above someone does ask how to check if a css VALUE is supported and the answer is, "You set it, then read the value back and check if the browser retained it." Now im sure that would be useful information if i knew more javascript which i have just started to learn.
This is what i have in mind but im really not sure how to go around doing this. Check if div#id or div.class has vh css value. Check whether the css value is supported by the browser. If its supported then keep loading. If not supported then change id or class.
So to sum up my question:
How do i check if a css value is supported by the browser using javascript or jquery?
Guidance to the answer is really appreciated. Thanks for your help.
-
Guillaume Palm about 8 yearsThanks for your help. This code is pretty advanced compared to my curremt knowledge. Im just guessing but should i test the cssPropertyValueSupported('width', '100vh') with an if statement?
-
Amadan about 8 yearsYes, usually the
if
statement would make the most sense here. -
Rob about 8 yearsInstall a library to check for the existence of one CSS property?
-
Stickers about 8 years@Rob Thanks for the comment. It's true that OP just said one property there, but it's very likely that it needs to check more in the real project. Probably you don't want to end up writing a whole new library. Modernizr is highly customizable anyway. Easy to use for both beginners and experts.
-
Guillaume Palm about 8 yearsSadly the alert says its not supported even in firefox and chrome. i have a feeling something isnt right with 'in document.body.style'. anyways i gave Amadan's suggestion a try and it worked. Again, thanks alot for your help!
-
Guillaume Palm about 8 yearsThat did the trick! Wish i could understand the code more but i will in due time! thanks alot Amadan.
-
Guillaume Palm about 8 yearsThis does look like a good option but it's true i only need one css value to be checked. i'll for sure look into modernizr for future projects. thanks!
-
Jon Hendershot over 6 yearsNot entirely unnecessary in situations where you may want to polyfill certain styles where your property isn't supported.
object-fit
is a good example, right now -
user56reinstatemonica8 almost 6 yearsBeware that this will incorrectly return
true
if the CSS property is completely unsupported. For example,cssPropertyValueSupported('dominant-baseline', 'hanging')
will returntrue
on MS Edge, which does not support any values fordominant-baseline
. If you can, useCSS.supports(property, value)
instead, which works on everything except IE (any version) and stock Android from 2013 -
zavr over 4 yearsit's a good answer, just to add that you should beware that setting a style will normalise it like "polygon(50% 0px,100% 100%,0% 100%)" becomes standard "polygon(50% 0px, 100% 100%, 0% 100%)" ( with a space after ,). Also to mitigate for the previous comment, maybe you should check for the presence of the property first like style[camelCaseProp] it should be an empty string and not undefined. Although I can't vouch that's how all browsers work.