Can I override CSS using user-css on Mobile Safari?

Question

I am trying to change the CSS of the website http://www.baomoi.com for my grandmother. I would like to change the CSS for readability for it and make it more minimalistic. I tried using the JavaScript bookmarklet:

javascript:(function(){if%20(!document.getElementById('someuniqueid')){var%20objHead%20=%20document.getElementsByTagName('head');%20if%20(objHead[0]){if%20(document.createElementNS%20&&%20objHead[0].tagName%20==%20'head')%20var%20objCSS%20=%20objHead[0].appendChild(document.createElementNS('http://www.w3.org/1999/xhtml',%20'link'));%20else%20var%20objCSS%20=%20objHead[0].appendChild(document.createElement('link'));%20objCSS.id%20=%20'someuniqueid';%20objCSS.rel%20=%20'stylesheet';%20objCSS.href%20=%20'http://fu.com/minimal.css';%20objCSS.type%20=%20'text/css';}}})() 

This works once when it is initially loaded, but when another link is clicked on the site, it loads the CSS site by default.

Is it possible to have a site contained in an iframe and have persistent CSS throughout the site?

Or would it be easier to create your own iPad application that loads the site and aggressively inserts CSS?

I found this idea ; but I just downloaded the Xcode SDK and don’t want to delve into the creation of an iPad application just for this, if there is a simpler method.

Essentially, I just need to change the CSS of baomoi.com and keep it constant while accessing links.

Any ideas and suggestions are welcome.

Thanks!

Edit: I'm looking at this now (CSSPivot), thank you again for your suggestions, I'm new to mobile safari, and I already noticed that iframes for some reason do not have scrollbars.

Also, there are suggestions to advance the route of creating a real iPad application that can also do this? I was considering looking at a freelancer or similar site where I could find someone to create this for me, since I have no experience in developing for iOS.

The iPad is a simple device for my grandmother, and I would like to do it where she can access several sites (Vietnamese sites, but they are quite difficult to navigate through her, and color schemes are hard to see).

Thank you again for your suggestions.

Answer 1

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

There are several community scenarios on Userscripts.org: enabling your browser, or, as you have already done, creating your own.

EDIT:

use csspivot.com (edit: dead URL)

you can rewrite the CSS of the site and re-access it with the URL stored on csspivot.

Answer 2

I'm not sure if this is possible on iOS, but on Android I would use the WebView element and redefine the loading of URLs and redirect the stylesheets to user-defined ones. Perhaps something similar exists in iOS.

Otherwise, maybe you can use a proxy server that can rewrite URLs?

Answer 3

The Safari desktop saves these two values ​​in defaults read com.apple.safari :

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

I tried adding these settings to the Mobile Safari properties list, but they do not work:

(you can check the settings using `` plutil``):

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

That would be the best solution if it worked. Therefore, custom CSS support does not compile in MobileSafari.

Answer 4

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

Look at your browser settings and you will find an option for custom style sheets.