Use CSS nesting - Githubissues

thekid / dialog

Dialog photoblog

2 stars 1 forks source link

Use CSS nesting #57

Open thekid opened 5 months ago

thekid commented 5 months ago

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 commented 5 months ago

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

Browsers

[x] Edge
[x] Safari (on iOS)
[ ] Firefox

Metrics

[x] Lighthouse score before & after: 100 (see #18)
[x] Page size before: 25305, after: 25114 (191 bytes smaller)

thekid commented 5 months ago

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 commented 2 months ago

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