Can I over-ride CSS with user-css on Mobile Safari?

Question

I am trying to modify the CSS of the website http://www.baomoi.com for my grandmother. I\'d like to modify the CSS for easier readability for her and to make it more minimal

Answer 1

the GreaseMonkey plugin for Firefox (or TamperMonkey plugin for Chrome) may be ideal for what you're trying to accomplish you can specify a specific site and which script should run on that site.

There are several community scripts available on Userscripts.org: Power-ups for your browser or like you've done create your own.

EDIT:

use csspivot.com (edit: dead url)

you can rewrite a site's CSS and re-access it with a URL that's saved on csspivot.

Answer 2

Im not sure if its possible on iOS, but on Android I would use a WebView element, and override the URL loading and redirect the stylesheets to custom ones. Maybe something like that also exists on iOS.

Otherwise, maybe you can use a proxy server which is able to rewrite URLs?

Answer 3

Safari allows you to use custom stylesheets in the browser itself. This is the simplest way I've found for this kind of thing.

Have a look at the browser preferences and you'll find the option for Custom Stylesheets.

Answer 4

The desktop Safari stores these two values into defaults read com.apple.safari:

WebKitUserStyleSheetEnabledPreferenceKey = 1;
WebKitUserStyleSheetLocationPreferenceKey = "~/custom.css";

I tried adding these preferences to the Mobile Safari property list, but they don't work:

(can check the preferences using ``plutil```):

$ plutil -show /private/var/mobile/Library/Preferences/com.apple.mobilesafari.plist
$ plutil -show /private/var/mobile/Library/Preferences/com.apple.Preferences.plist

This would be the best solution, if only it worked. So it seems custom CSS support is not compiled into MobileSafari.