elad2412/the-new-css-reset

reset breaks the HTML dialog element

Closed this issue · 6 comments

nfrankeln commented

could we add the HTML dialog element to the list of excluded css reset options.
Specifically the reset
:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
effects the intended dialog functionality and causes dialogs to render in the flow of content instead of above it.

proposed change :where(:not(html, iframe, canvas, img, svg, video, audio, dialog):not(svg *, symbol *)) {
all: unset;
display: revert;
}

benjaminfunk commented

I would disagree.

If we exclude all elements because the default behavior is being reset, we would have to exclude almost all elements. The reset.css would then no longer make sense.

What is wrong with:

dialog
{
  all: revert;
}
  • 👍2
graymatter00 commented

@nfrankeln

...effects the intended dialog functionality and causes dialogs to render in the flow of content instead of above it.

I'm using the dialog element and not seeing the issue you mention. Seems to be working as I'd expect. Can you provide more detail or an example?

nfrankeln commented

@benjaminfunk

I would disagree.

If we exclude all elements because the default behavior is being reset, we would have to exclude almost all elements. The reset.css would then no longer make sense.

What is wrong with:

dialog
{
  all: revert;
}

nothing is wrong with that it just seems like everyone is going need to do that every time they want to use a dialog element

nfrankeln commented

@graymatter00

...effects the intended dialog functionality and causes dialogs to render in the flow of content instead of above it.

I'm using the dialog element and not seeing the issue you mention. Seems to be working as I'd expect. Can you provide more detail or an example?

I had a nested dialog that was getting rendered below the page content due to the css reset;

graymatter00 commented

I had a nested dialog that was getting rendered below the page content due to the css reset;

I'm not seeing the same issue. What browser are you using? Can you provide a code example? Perhaps on Codepen?

nfrankeln commented

@graymatter00
This is the issue I was running in to. I realized I was using an older version of the the css reset from 2021. The newer version includes

/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
Here is an example of what i was running into, but yea my mistake Ill close the issue.
https://codesandbox.io/p/sandbox/epic-taussig-36j2dm?file=%2Fsrc%2FApp.js%3A2%2C36

  • 👍2