From fa12594019a6fcce96ae1dfda3ee38f7ff89334f Mon Sep 17 00:00:00 2001 From: "tina-cloud-app[bot]" <58178390+tina-cloud-app[bot]@users.noreply.github.com> Date: Sun, 19 Nov 2023 07:13:01 +0000 Subject: [PATCH] TinaCMS content update Co-authored-by: @cassidoo <1454517+cassidoo@users.noreply.github.com> --- src/posts/css-has.md | 53 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/posts/css-has.md diff --git a/src/posts/css-has.md b/src/posts/css-has.md new file mode 100644 index 0000000..67c11cf --- /dev/null +++ b/src/posts/css-has.md @@ -0,0 +1,53 @@ +--- +layout: ../layouts/BlogPost.astro +title: 'A use-case for CSS :has()' +slug: css-has +description: 'I found an unexpected use case for the newly, fully supported :has() selector!' +tags: + - technical +added: 2023-11-19T07:09:43.844Z +--- + +In case you missed it, [the CSS `:has()` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) is [now supported](https://caniuse.com/css-has) in all major browsers! + +It's a very weird (but cool) selector that allows you to select elements that contain a specific thing, like for example `a:has(img)` selects all anchor `` tags that have an `` inside. + +I've thought it was really interesting, but I've never actually had a good use-case to use it myself besides... adding captions to images or something. But, that changed today! + +On [my personal website](https://cassidoo.co) (which I first made a solid 4 years ago with plain HTML, CSS, and JS, and I admit I haven't really updated since besides some words and links), I have a dark mode toggle. It's probably rarely if ever clicked (I should probably modernize it with some `prefers-color-scheme` stuff sometime), but when you do, it does what you expect, it turns on dark mode. + +Under the hood, that toggle adds a `.dark-mode` class to the ``, and in the CSS, we style nearly everything based on that: + +```css +html, +body { + /* ... */ + background: var(--white); + color: var(--black); +} + +body.dark-mode, +body.dark-mode a { + background: var(--black); + color: var(--white); +} + +/* ... */ +``` + +Now, here's the problem: the body doesn't always take up the entire height of the page. I was cleaning up and organizing some code, and when I put the `background` and `color` properties under `html, body`, that meant that the `html` was keeping its white background and black text color, even in dark mode. + +![Light things on dark mode](/assets/disgustingwhitespace.png) + +BUT `:has()` came to my rescue! Because it kind of acts like a parent selector, I'm able to say "if the `` has `.dark-mode` inside of it, that means it should have certain styles." One line change later we had this: + +```css +html:has(.dark-mode), +body.dark-mode, +body.dark-mode a { + background: var(--black); + color: var(--white); +} +``` + +...and voilà, just like that, all of my problems I've ever had are solved!