Is CSS injection possible on iPad using Safari?

Question

There is a possibility to use a custom style sheet in Safari on Mac to inject CSS syntax that changes the rendered output of web pages.

I’m seeking a similar tool for iPad and iPadOS.

Is there any way to use CSS injection in Safari or other browsers on the iPad?

Answer 1

To inject a custom CSS into a webpage on iPad you can use the app Shortcuts. First, you need to create a new shortcut:

1. Open Shortcuts

2. Select Create Shortcut > Web > Run JavaScript on Web Page

3. Use the following JavaScript:

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('body { color: red !important }');
addStyleString('body { background: silver !important }');
// This way allows you to add CSS in multiple passes


// Call completion to finish
completion();

4. Tap Next

5. Add the Shortcut Name

To apply a custom CSS you need to run the shortcut in Safari:

1. Open a web page in Safari

2. Tap on the share button

3. Scroll all the way down and tap on the newly created shortcut.

HINT: Use !important in CSS injections to override default rules.

Answer 2

I found that this was possible with a satisfactory solution on ios 15.1+ using the a user.js and the Userscripts app.

https://apps.apple.com/us/app/userscripts/id1463298887

An example userscript that just adds css:

// ==UserScript==
// @name         Nicer style on example.com
// @namespace    codesthings.com
// @license      MIT
// @version      1.0
// @description  Adds my user style to example.com
// @author       JamesCodesThings
// @match        *://*.example.com/pages/*
// @grant        GM_addStyle
// ==/UserScript==

(function(){
  const userStyle = `body.readable {
  font-family: sans-serif;
  font-size: 1.2rem;
  background-color: #222;
  line-height: 1.25;
}

/* More CSS Here */
`;

  // I found that increasing specificity helps on iOS.
  document.body.className += 'readable';

  GM_addStyle(readableCss);
})();

You can host your userscript somewhere like greasyfork.org, then visit the script download page on iOS safari and use the extension to install the user script.

Example full userscript: https://greasyfork.org/en/scripts/448219-lazyfoo-readable-css

Answer 3

Automatically?

No. (at least not as of mid-2022)

---

If someone were to write a Safari extension*, or if Apple adds support in a future iOS version, then the answer would of course change.

*(if even possible: macOS Safari has the Cascadea extension… if doing the same thing on iOS/iPadOS were trivial, it seems that extension’s developer might have already done so)

---

For more background details and possible workarounds (besides the ’Shortcuts’ method that @mykola-zotko suggested in the earlier answer), please see the answers at: “Can I over-ride CSS with user-css on Mobile Safari?”

Answer 4

Yes, automatically script injections works on iOS.
You could use the Userscripts app mentioned above, it works on iOS and macOS Safari. The easiest thing to do is use the macOS version to install your scripts, and then sync them to your iOS device using iCloud. Save the scripts on macOS in an iCloud folder that you could access on iOS.
Works flawlessly. Also, no need to use a UserScript (Javascript) to load stylesheets, as UserStyles is supported directly. You'll need iOS 15.1 or newer.
PS! To get your scripts to sync faster, open Finder on your mac to the scripts folder you've choosen, and the open the same folder in Files on your iOS device. You'll see the files syncing faster.