search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.38k stars 643 forks source link

Declarative dialog or styling non-modal backdrop #10219

Open mantissa7 opened 3 months ago

mantissa7 commented 3 months ago

When trying to use the

element declaratively with the open attribute, the dialog is created as a "non-modal", with no ::backdrop selector. However, the UA-styled backdrop is still shown.

I am unsure of the background to the decision for this but only having an imperative JS method to show a HTML modal impacts zero-js or sites whose users have JS disabled. It also feels unnecessary, especially with things like CSS toggle() and popovertarget allowing basic state-changes without JS.

An example I could think of could be a paywall news site that returns html with a modal covering the screen asking to subscribe, without wanting to wait for the client side to activate the modal.

Perhaps something like <dialog open modal /> could solve this. Otherwise it should at least be possible to style the default UA ::backdrop element when using <dialog open> without JS.

Apologies if I'm missing anything or have overlooked something. The w3c github org is rather daunting being so massive.

Loirooriol commented 3 months ago

Perhaps something like <dialog open modal />

You will have to request HTML changes to the WHATWG, this is the CSSWG.

it should at least be possible to style the default UA ::backdrop element when using

without JS.

Only elements rendered in the top layer originate a ::backdrop.

https://github.com/w3c/csswg-drafts/issues/6965 has some discussion about a CSS way to render arbitrary elements on the top layer.