Reputation: 10982
How can I test with Javascript (jQuery) if the browser supports the css general sibling selector ~
?
Example:
#toggled:checked ~ #sidebar {
display: block;
}
That CSS code won't work in IE 8-, Firefox 3-, Safari 3.1-, so in those cases I need to apply a Javascript alternative to display the #sidebar
block.
Upvotes: 1
Views: 68
Reputation: 6015
@epascarello is right in comments, why not using JS?
For instance, in JS (untested - using jQuery):
let isRuleApplied = (selector, keyApplied, valueApplied) => {
let element = $(selector);
return element && element.css(keyApplied) === valueApplied;
};
console.log(isRuleApplied('#toggled:checked ~ #sidebar', 'display', 'block'));
Or just use style
property of getElementById
node, or querySelector
using Vanilla JS.
Kudos to the idea here.
Upvotes: 1