elad2412/the-new-css-reset

Reset results in <pre> and <dialog:modal> with box-sizing: content-box

graymatter00 opened this issue · 4 comments

graymatter00 commented

At the time of writing the current version of reset.css is 1.9.

The global box-sizing setting of border-box starts at line 16.

16  /* Preferred box-sizing value */
17  *,
18  *::before,
19  *::after {
20      box-sizing: border-box;
21  }

The all: revert settings for pre and dialog:modal start at line 60 and 97 respectively.

60  /* preformatted text - use only for this feature */
61  :where(pre) {
62      all: revert;
63  }

97  /* Revert Modal native behavior */
98  :where(dialog:modal) {
99      all: revert;
100 }

This results in the box-sizing for both pre and dialog:modal being set to content-box (tested on Chrome, Edge and Firefox).

If the intension of the reset is to have all elements set to box-sizing: border-box, would it perhaps be better to move the pre and dialog:modal settings to be positioned above the global box-sizing setting?

Or is it intentional to have pre and dialog:modal with a box-sizing of content-box? And if so, why?

graymatter00 commented

I've just noticed that @Awjin addressed this issue in PR #72 on July 4th.

Is there a reason this PR has not been merged?

fabulousgk commented

This is one of the reasons I wondered why he chose this style for these and did not add them to the list of the main reset.

elad2412 commented

Good point @graymatter00, added every one of them box-sizing: border-box behavior.

The reason for not changing the order is to keep the most common at the top.

Release a new version with those fixes (1.11), Issue Closed

  • 👍2
graymatter00 commented

Thanks @elad2412.

I have a follow-on question. Regarding...

The reason for not changing the order is to keep the most common at the top.

Is there a reason that pre and dialog:modal can't be added to the main where statement on line 11?

That is, could...

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *))

...become...

*:where(:not(html, iframe, canvas, img, svg, video, audio, pre, dialog:modal):not(svg *, symbol *))

...and remove the need for the separate pre and dialog:modal references?

  • 👍1