Tweaks

_posts/2024-05-16-a-poor-mans-custom-stylesheet-bookmarklet.md

@@ -6,7 +6,7 @@ tags: front-end javascript css
 
 Working on a non-Sitecore project the last two years has caused a small hiatus in posts, but a strictly enforced no browser plug-ins policy did inspire me to make my own poor man's custom CSS bookmarklet.
 
-Sometimes you just want to tweak a website's CSS a bit, just for yourself. Either because the default is buggy, doesn't utilize your ultra-widescreen resolution or because they don't have a dark mode. Normally you'd use plug-ins for this like [Stylus](https://github.com/openstyles/stylus) for CSS, [Tampermonkey](https://www.tampermonkey.net) if you need custom Javascript or [Darkreader](https://darkreader.org/) if you want dark mode everything. The customer I've been working for however, provided me their own laptop to work on with their own system policies. One of those policies is that I absolutely cannot install any browser plug-ins. And frankly I understand why and this post isn't about questioning that policy at all. But I still have some legitimate uses for custom CSS that I wanted to use on their machines, and then I remembered a YouTube video I once came across that showed a funny little trick that didn't seem actually useful at the time...
+Sometimes you just want to tweak a website's CSS a bit, just for yourself. Either because the default is buggy, doesn't utilize your ultra-widescreen resolution or because they don't have a dark mode. Normally you'd use plug-ins for this like [Stylus](https://github.com/openstyles/stylus) for CSS, [Tampermonkey](https://www.tampermonkey.net) if you need custom Javascript or [Darkreader](https://darkreader.org/) if you want dark mode everything. The customer I've been working for however, provided me their own laptop to work on with their own system policies. One of those policies is that I absolutely cannot install any browser plug-ins. And frankly I understand why and this post isn't about questioning that policy at all. But I still have some legitimate uses for custom CSS that I wanted to use on their machines, and then I remembered a [YouTube video](https://www.youtube.com/shorts/D02AK3WoYH8) I once came across that showed a funny little trick that didn't seem actually useful at the time...
 
 You can set a `<style>` tag to have `display: block;` and you will see the CSS rules on screen as if it's just another div with text. Moreover, you can give it an `contenteditable` attribute and now you can write CSS inside this element and you immediately see the results. So with that as a starting point and using `localStorage` to save entered CSS, I made myself this little bookmarklet:
 
@@ -59,7 +59,7 @@ Q&A - Why it's a "poor man's" solution
 --------------------------------------
 
 - **_Every time I click a link and the page refreshes, my style is gone and I have to click the bookmark again!_**  
-  Such is the nature of websites, browser plug-ins can do this for you, a bookmarklet cannot. You might get lucky and encounter a website that loads new content through ajax, but likely you won't.
+  Such is the nature of websites, browser plug-ins can solve this for you, a bookmarklet cannot. You might get lucky and encounter a website that loads new content through ajax, but likely you won't.
 - **_This doesn't work in Firefox!_**  
   That's because of the `contentEditable = 'plaintext-only'` which is a [WebKit](https://webkit.org/) and [Blink](https://www.chromium.org/blink/) exclusive feature. Luckily this means it works in Edge, Safari, Opera and a bunch more, but not Firefox. You could look into [alternatives](https://stackoverflow.com/a/61237402/2684660) to stop Firefox from adding html to the `<style>` tag if you need it to work there.
 - **_This doesn't work for website_ X _!_**