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 minimalistic. I have tried using a 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 back the default site's CSS.

Would it be possible to have the site contained in an iframe and have the CSS stay persistent all throughout the site?

Or would it be easier to create a native iPad app that loads the site and inserts the CSS persistently?

I found this idea (archived version); but just downloaded the Xcode SDK and do not want to delve into creating an iPad app just for this if there is an easier method.

Essentially, I just need to change the CSS of the site baomoi.com and have it stay persistent throughout as the links are clicked.

Any ideas and suggestions would be greatly appreciated.

Thank you!

Edit: I am taking a look at that (CSSPivot) now, again thank you for your suggestions, I am new to mobile safari and I have already noticed that iframes dont have scrollbars for some reason.

Also any suggestions on going the route of making an actual IPad app that would be able to do this as well? I was considering looking at freelancer or similar site where I could find someone to create this for me as I have no experience in developing for IOS.

The IPad is an easy device for my grandmother to use and I would like to make it where she can access a few sites (Vietnamese sites but they are fairly complicated to navigate for her and the color schemes are hard to see).

Again thank you in advance for your suggestions.

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

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.

Answer 3

2022 update:

Possible solutions

(until Apple finally allows user stylesheets to be used on mobile devices, as they currently allow on macOS Safari)

1. An iOS/iPadOS Safari extension may be able to do this, but I do not personally know if one already exists.

2. Depending on the ‘cross-site’ / ‘cross-frame’ scripting settings of the target website, it may be possible to load that site in an ‘iframe’ launched from an iOS homescreen icon.

   • (This won’t work for a majority of websites, but it may be worth a try since it does not require any programming or special software.)

3. Worst-case, on an iPad (and perhaps an iPhone with a huge screen?), a JavaScript bookmarklet can be added to re-format the CSS of any page.

   • (This would need to be clicked for each new page, but if placed in the Safari ‘Favorites Bar’, that can be done with a single click when reading trouble presents itself.)

---

Example:

Example Javascript (for option #3 above)

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}
// Source: 
// 0. https://caiorss.github.io/bookmarklet-maker/
// 1. https://apple.stackexchange.com/questions/377492/is-css-injection-possible-on-ipad-using-safari
// 2. https://macreports.com/how-to-change-color-of-visited-links-in-safari-macos/
// 3. https://www.w3schools.com/cssref/css_colors.asp
// 4. https://www.w3schools.com/cssref/css_default_values.asp
// 5. https://www.w3schools.com/css/css_link.asp

// addStyleString('body { color: pink !important }');
// addStyleString('body { background: silver !important }');

// Try to create a user stylesheet for iOS Safari - jhg
// Can I do other things, such as underlines or boxes?
addStyleString('a {color: pink !important }');
addStyleString('a:link {color: red !important }');
addStyleString('a:visited {color: green !important }');
addStyleString('a:hover {color: hotpink !important }');
addStyleString('a:active {color: orange !important }');

// addStyleString('a:visited { color: #FF0000 !important; }');
// This way allows you to add CSS in multiple passes

// Call completion to finish
completion();

// END JS

The same JavaScript code, encoded as a ‘bookmarklet’

(created from the above JavaScript using the ‘bookmarklet-maker’ by @caiorss)

javascript:(function()%7Bfunction%20addStyleString(str)%20%7B%0A%20%20%20%20var%20node%20%3D%20document.createElement('style')%3B%0A%20%20%20%20node.innerHTML%20%3D%20str%3B%0A%20%20%20%20document.body.appendChild(node)%3B%0A%7D%0A%2F%2F%20Source%3A%20%0A%2F%2F%200.%20https%3A%2F%2Fcaiorss.github.io%2Fbookmarklet-maker%2F%0A%2F%2F%201.%20https%3A%2F%2Fapple.stackexchange.com%2Fquestions%2F377492%2Fis-css-injection-possible-on-ipad-using-safari%0A%2F%2F%202.%20https%3A%2F%2Fmacreports.com%2Fhow-to-change-color-of-visited-links-in-safari-macos%2F%0A%2F%2F%203.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_colors.asp%0A%2F%2F%204.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_default_values.asp%0A%2F%2F%205.%20https%3A%2F%2Fwww.w3schools.com%2Fcss%2Fcss_link.asp%0A%0A%2F%2F%20addStyleString('body%20%7B%20color%3A%20pink%20!important%20%7D')%3B%0A%2F%2F%20addStyleString('body%20%7B%20background%3A%20silver%20!important%20%7D')%3B%0A%0A%2F%2F%20Try%20to%20create%20a%20user%20stylesheet%20for%20iOS%20Safari%20-%20jhg%0A%2F%2F%20Can%20I%20do%20other%20things%2C%20such%20as%20underlines%20or%20boxes%3F%0A%0AaddStyleString('a%20%7Bcolor%3A%20pink%20!important%20%7D')%3B%0AaddStyleString('a%3Alink%20%7Bcolor%3A%20red%20!important%20%7D')%3B%0AaddStyleString('a%3Avisited%20%7Bcolor%3A%20green%20!important%20%7D')%3B%0AaddStyleString('a%3Ahover%20%7Bcolor%3A%20hotpink%20!important%20%7D')%3B%0AaddStyleString('a%3Aactive%20%7Bcolor%3A%20orange%20!important%20%7D')%3B%0A%0A%2F%2F%20addStyleString('a%3Avisited%20%7B%20color%3A%20%23FF0000%20!important%3B%20%7D')%3B%0A%2F%2F%20This%20way%20allows%20you%20to%20add%20CSS%20in%20multiple%20passes%0A%0A%2F%2F%20Call%20completion%20to%20finish%0Acompletion()%3B%7D)()%3B

The same JavaScript code, url-encoded for inclusion in an HTML page

(created from the above JavaScript using the ‘bookmarklet-maker’ by @caiorss)

<a href="javascript:(function()%7Bfunction%20addStyleString(str)%20%7B%0A%20%20%20%20var%20node%20%3D%20document.createElement('style')%3B%0A%20%20%20%20node.innerHTML%20%3D%20str%3B%0A%20%20%20%20document.body.appendChild(node)%3B%0A%7D%0A%2F%2F%20Source%3A%20%0A%2F%2F%200.%20https%3A%2F%2Fcaiorss.github.io%2Fbookmarklet-maker%2F%0A%2F%2F%201.%20https%3A%2F%2Fapple.stackexchange.com%2Fquestions%2F377492%2Fis-css-injection-possible-on-ipad-using-safari%0A%2F%2F%202.%20https%3A%2F%2Fmacreports.com%2Fhow-to-change-color-of-visited-links-in-safari-macos%2F%0A%2F%2F%203.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_colors.asp%0A%2F%2F%204.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_default_values.asp%0A%2F%2F%205.%20https%3A%2F%2Fwww.w3schools.com%2Fcss%2Fcss_link.asp%0A%0A%2F%2F%20addStyleString('body%20%7B%20color%3A%20pink%20!important%20%7D')%3B%0A%2F%2F%20addStyleString('body%20%7B%20background%3A%20silver%20!important%20%7D')%3B%0A%0A%2F%2F%20Try%20to%20create%20a%20user%20stylesheet%20for%20iOS%20Safari%20-%20jhg%0A%2F%2F%20Can%20I%20do%20other%20things%2C%20such%20as%20underlines%20or%20boxes%3F%0A%0AaddStyleString('a%20%7Bcolor%3A%20pink%20!important%20%7D')%3B%0AaddStyleString('a%3Alink%20%7Bcolor%3A%20red%20!important%20%7D')%3B%0AaddStyleString('a%3Avisited%20%7Bcolor%3A%20green%20!important%20%7D')%3B%0AaddStyleString('a%3Ahover%20%7Bcolor%3A%20hotpink%20!important%20%7D')%3B%0AaddStyleString('a%3Aactive%20%7Bcolor%3A%20orange%20!important%20%7D')%3B%0A%0A%2F%2F%20addStyleString('a%3Avisited%20%7B%20color%3A%20%23FF0000%20!important%3B%20%7D')%3B%0A%2F%2F%20This%20way%20allows%20you%20to%20add%20CSS%20in%20multiple%20passes%0A%0A%2F%2F%20Call%20completion%20to%20finish%0Acompletion()%3B%7D)()%3B">Color links</a>

---

To add a bookmarklet to the Safari web browser on iOS/iPadOS:

Note: they don’t make adding the bookmarklet to Mobile Safari easy, for security reasons.

1. First, click the ‘Share’ icon and select ‘Add to Favorites’ (on any webpage)
2. Delete the pre-filled title, enter the name you would like for the bookmarklet link (e.g. “Color links” or “Fix this page”) and click ‘Save’.
3. Open the ‘Bookmarks’ list, click on ‘Favorites’, and find the new item you just created.
4. Press ‘Edit’ and click on that new item. Now you will be able to delete the pre-filled address and paste in your JavaScript bookmarklet code.
5. Press ‘Back’ and your bookmarklet is ready for testing on any page.
6. (Optional) Press ‘Edit’ once more, and use the three horizontal lines to the right of that same item to drag it up or down in the list. (The Mobile Safari ‘Favorites Bar’ will only show as many links as fit on the screen, starting from the top of the ‘Favorites’ list.)

Answer 4

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 5

Use the Safari Extension called Stop the Madness to inject custom CSS or JS.

Answer 6

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.