Use CSS nesting

[thekid]

This pull request refactors the CSS to use nesting.

Since December 2023, this feature works across the latest devices and major browser versions
Source: https://caniuse.com/css-nesting

Nesting in native or plain CSS is pretty much the same as we saw when using the preprocessor. However, in some browsers and with certain types of selectors, we must begin with the nesting selector, &
Source: https://blog.logrocket.com/native-css-nesting/

[thekid]

Deployed to https://dialog.friebes.info/ for further real-life testing.

Browsers

• Edge
• Safari (on iOS)
• Firefox

Metrics

• Lighthouse score before & after: 100 (see Lighthouse score tracking issue #18)
• Page size before: 25305, after: 25114 (191 bytes smaller)

[thekid]

Firefox ESR is version 115.8, which doesn't support CSS nesting yet.

receives major updates on average every 42 weeks with minor updates such as crash fixes, security fixes and policy updates as needed, but at least every four weeks.
Source: https://support.mozilla.org/en-US/kb/choosing-firefox-update-channel

[thekid]

CSS nesting doesn't require the & for element names anymore, see https://youtu.be/_-6LgEjEyzE?si=d7KUVGjbu4xeQiAZ

[thekid]

Firefox ESR is version 115.8, which doesn't support CSS nesting yet.

Status at the end of September 2024: We are in the transition period between major ESR versions 128 and 115. (Source: https://www.mozilla.org/en-US/firefox/all/desktop-esr/win64-msi/de/)

👉 Think we're good to go now.

[thekid]

Released in https://github.com/thekid/dialog/releases/tag/v2.5.0