I'm using the :has CSS selector to enable different page styles based on input elements being checked. This lets me create options like manually setting light/dark theme instead of following the OS/browser setting.
Using JavaScript, I also save the input elements' value to local storage in a way where I can sync them across the site.
But I'm not sure how to display them. Or whether to display them.
@gvwilson (This is a compliment, right? Thank you! 💚)
I don't teach anything, other than in the loose, impromptu, life-happens kind of way. But I love to share what I know and live-post as I'm learning and may be able to point to where I've learned what I have learned.
@cvennevik definitely a compliment - I'm enjoying/learning from your toots and would sign up for a class on web components and humane web site design if you offered one.
@gvwilson Well, the first place I'd go to learn more would be Chris Ferdinandi's resource page that he set up for his Eleventy conference talk: https://gomakethings.com/11ty/
My initial idea was to display them on every page. However, this adds a bunch of content to every page that is uninteresting after seeing them the first time.
I could hide them inside a disclosure element, but controls inside a <details>/<summary> is a can of screen reader worms I'm not sure I want to open, a custom JavaScript one won't work when JavaScript is disabled, and I'm still not sure I feel like showing this on every page.
And speaking of working when JavaScript disabled: I can only ever make it half-work. When you go to a new page, the chosen settings don't go with you. I'm wondering if this is worse than not having the settings in the first place.
If I give up on making it available JS-free on every page, I could create a "Settings" page on my site, display them there, and hide them on every other page. Aesthetically, I like the idea of a settings page for my site.
But it adds a page navigation when you want to adjust the settings of a page, and may act funny when you go to the next/previous page and the browser has kept the page state...
I decided that my personal site would only save to session storage, which disappears when you browse away from the domain or close the tab.
Then the site always respects the OS setting first - as it has no memory of any previous visit anyway. If JS doesn't work, my toggles don't work (I should probably hide them when JS is is unavailable), so the theme page to page remains the same.
I love JS-free toggling with :has() but yes that conundrum is annoying!
Add comment