search

elad2412 / the-new-css-reset

The New Simple and Lighter CSS Reset
https://elad2412.github.io/the-new-css-reset/
MIT License
2.26k stars 229 forks source link

reset breaks the HTML dialog element #76

Closed nfrankeln closed 1 year ago

nfrankeln commented 1 year ago

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 1 year ago

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;
}
graymatter00 commented 1 year ago

@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 1 year ago

@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 1 year ago

@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 1 year ago

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 1 year ago

@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