csscss-selectorscross-browserpseudo-class

Cross-browser alternative to CSS :has pseudo-class

I am looking for a cross-browser compatible CSS selector to prevent body scrolling when a modal is opened.

Currently, I am using the CSS :has pseudo-class with the selector:

body:has(dialog.active) {
  /* prevent scroll stuff*/
}

EDIT: has is cross-browser now

Solution

  • If there was an alternative selector which could achieve the same result, then why would we need :has? There is no alternative selector.

    The way we’ve displayed dialogs in the past is to cover the screen with a fixed positioned, partially transparent <div>, then have the dialog appear inside that, or in front of that. This can prevent people clicking on the page behind the dialog. Not sure if it can prevent scrolling — I’ve not looked into that.

    My recommendation is to use :has anyway. Firefox will add support eventually, and in the meantime your webpage will still be usable in Firefox, just not as usable as you’d like it to be. Firefox’s market share is only 3%.