1

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.

Andres SK
  • 10,779
  • 25
  • 90
  • 152
  • 2
    Use JavaScript and see if it is visible? – epascarello Jun 11 '19 at 12:49
  • More general, https://stackoverflow.com/questions/21094865/test-if-a-browser-supports-a-css-selector perhaps, though if you're going that far back you might have to polyfill `querySelector` too for the method in that answer, and I'm not sure if `Element.matches` (Javascript) will always match up with the browser's CSS selector implementation – CertainPerformance Jun 11 '19 at 12:50
  • 2
    The general sibling selector states it supports IE7, safari 3 and firefox 1. So I think that in this case, it's the :checked selector that doesn't work in IE8, since it's supposed to be IE9+ . SO maybe you can change it into `#toggled.checked ~ #sidebar` and then use JS to add/remove the `.checked` class from the toggled element upon click. That should be IE8 compatible on first sight. – Shilly Jun 11 '19 at 12:56

1 Answers1

1

@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.

Nick Louloudakis
  • 5,856
  • 4
  • 41
  • 54