you can "reshow" whichever one you want to be one top. there's strong resistance to adding z-index into the top layer, it wants to remain "most recent shown is the one on top"
Nice new mini web machine. But don't forget folks, your machine should have a programmatically focusable title-like text at the top to focus on on opening, maybe even with an ID so that your machine can be labelled by it. Also, if someone knows how to improve the machine by preventing the inert background from scrolling, I'll need to know, please help.
This is soo complicated for something so simple. We should just break the web at some point... all this to support the 0.1% of browsers. Creating all sorts of weird rules and properties just to not change anything already existing... even when adding a new element.. I love CSS with all its quirks, and it keeps getting better, but the voodoo to make a simple transition work is ridiculous.
Such an improvement yet weirdly flawed I don't get why the dialog spec didn't come with a way to open it WITHOUT javascript. Not even a for attribute with labels, a matching form method, nor a clear nesting behavior like the element. There is a whatwg issue thread about no script behavior on github /whatwg/html/issues/3567 And wut is method="dialog", drive met nuts reading ambiguous self reference values you have to just KNOW what they do... that also have no future proofing ontop of that: method="dialog" should instead of method="dialogclose" or something similar.
blew my mind!
thank you for breaking it down and providing sources in the description
Love this series !!
I don't think the term "web machine" is ever going to catch on, but dialogs are nice.
superb format!
I just started using this. The only downside is that you can't trigger a close by clicking the backdrop
you can! the code for it is available in a demo i showed, take it from here! codepen.io/argyleink/pen/VwJvqrW
@AdamArgyleInk Oh nice. Thanks
How can we adjust the z-index of the dialog and popover that are simultaneously open?
you can "reshow" whichever one you want to be one top. there's strong resistance to adding z-index into the top layer, it wants to remain "most recent shown is the one on top"
there you go!
Nice new mini web machine.
But don't forget folks, your machine should have a programmatically focusable title-like text at the top to focus on on opening, maybe even with an ID so that your machine can be labelled by it.
Also, if someone knows how to improve the machine by preventing the inert background from scrolling, I'll need to know, please help.
i got you on the background scrolling lock:
html:has(dialog[open]) {
overflow: hidden;
}
:has() to the rescue 🤘🏻
@@AdamArgyleInk Thanks Adam. 🙏
@@tobiasfedder1390 also, use `scrollbar-gutter: stable;` so that the whole thing doesn't jump when the scrollbar gets removed
This is soo complicated for something so simple. We should just break the web at some point... all this to support the 0.1% of browsers. Creating all sorts of weird rules and properties just to not change anything already existing... even when adding a new element.. I love CSS with all its quirks, and it keeps getting better, but the voodoo to make a simple transition work is ridiculous.
че то все плохо и неработает подписка обманули
Such an improvement yet weirdly flawed I don't get why the dialog spec didn't come with a way to open it WITHOUT javascript.
Not even a for attribute with labels, a matching form method, nor a clear nesting behavior like the element.
There is a whatwg issue thread about no script behavior on github /whatwg/html/issues/3567
And wut is method="dialog", drive met nuts reading ambiguous self reference values you have to just KNOW what they do...
that also have no future proofing ontop of that:
method="dialog" should instead of method="dialogclose" or something similar.