A poor man's custom stylesheet bookmarklet

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 for CSS, Tampermonkey if you need custom Javascript or Darkreader 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…

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:

You can simply copy this script and paste it in the field for the bookmark URL and it should work.

The first time you click the bookmark it finds that there is no saved stylesheet for the domain you’re on and it adds a visible <style> tag to the page, absolutely positioned at the top-left of the page. By default it adds a small snippet that acts like a poor man’s dark mode also discussed earlier on this blog. You can write the CSS you want and when you’re done, click the bookmark a second time and it will save the CSS in the localStorage associated with that domain and hide the style tag. Now any time you visit the website and click the bookmark, it will see that you have CSS saved and apply it silently. Clicking the bookmark toggles the visibility of the <style> tag so you can continue editing and save etc.

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 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 and Blink exclusive feature. Luckily this means it works in Edge, Safari, Opera and a bunch more, but not Firefox. You could look into alternatives to stop Firefox from adding html to the <style> tag if you need it to work there.
• This doesn’t work for website X !
  This is possibly because that website uses strict CSP headers preventing <style> tags directly on the page and only loads CSS that’s in a separate resource on the server.
• The style tag is in the way of the element I want to style!
  You can solve this by adding the following to place the element on the right side in stead of the left:

  #niftyStyle {
      right: 0;
  }
  

  You could even add top: unset !important; and bottom: 0; to place the element at the bottom if you must.