Watch for specific added nodes with MutationObserver
MutationObserver makes it easy to watch for the addition of specific nodes, if you know where to drill.
Accessible CSS-Only Light/Dark Toggles (with JS persistence as progressive enhancement)
CSS’s
:has() can obviate JS
CSS’s
:has() can obviate JSFeatured in CSS Weekly
This article was featured in CSS Weekly Issue #584
The traditional method of giving users a toggle to switch a site’s theme (for example between light and dark mode) requires JavaScript. A user’s interaction with a button or dropdown triggers JS which adds a class somewhere, or adds an attribute somewhere, or modifies a piece of state. Thanks to CSS’s :has(), the core functionality can now be done without JS. This article I wrote for Smashing Magazine covers that, plus: how to respect user’s system-wide color scheme preferences and motion preferences; how to change user-agent styles with CSS’s color-scheme property; and one way of implementing cross-page / cross-session persistence as a JS-based progressive enhancement.
Articles You Might Enjoy
-
-
Add high-performance search to static sites with PageFind
The concise guide to using Pagefind for your static site’s search functionality.
-
SSG Astro with Headless Craft CMS Content Fetched At Build Time Or Cached In Advance
Astro on the front, Craft on the back. Craft can be local only, and the build environment doesn't have to connect to the CMS.