Safari > Preferences > Advanced > Style sheet injection

[gingerbeardman]

This is not yet a concrete proposal but rather some notes and thinking out loud.

Background

I noticed that the user stylesheet chosen to Safari using Preferences > Advanced > Style sheet is applied without a flash of styled content.

So I wondered if I could use it to inject all PageExtender CSS?

Testing

I have chosen ~/safari.css as the file chosen in Safari preferences.

Different approaches

1. @include all files within ~/.css folder

• eg. @import ".css/letterboxd.com.css";
• doesn't seem to work
  • I tried full paths, partial paths, files in same directory as ~/safari.css
  • maybe they disabled imports in this scenario?
  • or maybe i am doing something wrong?

---

2. all CSS included inline

• works
• CSS is not specific to domain so everything applies to every site

---

3. JS + all CSS inline scoped with domain

• ~/.css/default.js
  • document.documentElement.setAttribute("data-location", window.location.href);
• ~/safari.css
  • qualify CSS with domain of file
  • example

[data-location*="domain.com"] .selector {
  display: none;
}

• would require a script to produce the correctly formatted qualified, inline css
• WIP see below

[gingerbeardman]

This short PHP script will print out a concatenated CSS file, using CSS Nesting (support added in Safari 16.5) that can be used as ~/safari.css and Safari > Advanced > Style sheet

<?php
foreach (glob(".css/*.css") as $css) {
	print("\n\n/*\n\tFILE: ". basename($css) ."\n*/\n");
	
	$datalocation = '[data-location*="'.basename($css, '.css'). '"]';
	
	print("$datalocation {\n");
	print(file_get_contents($css));
	print("/* $datalocation */\n}\n");
}
?>

• make sure to manually unwrap the entry for default.css
• blank.css is not supported

I'm going to run with this setup for a while