Test if a browser supports a CSS selector
cross-browser, css, css-selectors, internet-explorer-8, javascript
Solution
Workaround for your case:
<input type=checkbox checked=checked>
css:
input{
font-family:'arial';
}
input:checked{
font-family:'sans-serif';
}
checking procedure: js
alert($('input').css('font-family')=='sans-serif'?'supported':'not supported');
Problem
Really simple: how do I most accurately test if a browser has support for a certain CSS selector? I currently have some CSS code that makes the page a little more interactive by using the `:checked` selector in CSS, but I want to create a fallback script that does the same thing with JavaScript, but only if the user's browser has no support for the `:checked` selector. My question is, how do I most accurately test if the user's browser supports a certain CSS selector? Here is the code I'd like to use it on: HTML: ``` <label class="coolbox"> <input type="checkbox"/> <span>I want to eat some caek.</span> </label> ``` CSS: ``` .coolbox input {display:none;} .coolbox span::before { content: ""; display:inline-block; width:10px; height:10px; margin-right:5px; border:1px solid black; } .coolbox:hover span::before {border:1px solid #555;} .coolbox:active span::before {border:1px solid #999;} .coolbox span::before {background-color:#F77;} .coolbox input:checked + span::before {background-color:#4A4;} ``` Demo PS: I'd prefer not to just use conditional comments, because I'd like to follow the standard of detecting features instead of browsers.