10

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?

0

4 Answers 4

8

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();
  1. Tap Next

  2. 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.

5
  • On iOS14 it only worked once I changed the "Run JavaScript on:" default setting from "Web page" to "Shortcut" (inside the code editing window). Otherwise you get the error "Run JavaScript on webpage failed because no web page was passed as input"
    – Gruber
    May 2, 2021 at 7:35
  • 5
    This needs you to run it every time you visit the website. It’s typical Apple bullshit. CSS was designed with userstyles in mind, but Apple can’t be bothered to support open standards.
    – HappyFace
    May 27, 2021 at 11:03
  • I imagine this can be re-factored into a ‘bookmarklet’ that could exist in the Safari iPadOS ‘favorites bar’ for one-click use? Jul 10, 2022 at 23:06
  • Okay, I did that. See the link in my answer below if anyone is interested in the ‘bookmarklet approach’. Jul 11, 2022 at 2:29
  • 1
    On iPadOS 15, the shortcut needs some settings. Edit the shortcut. For ‘Run JavaScript From’ select [ShortCut Input]. Edit the new section to be: Receive [Safari Web Pages] input from [Share Sheet]. Now in Safari you should be able to share the page with your JavaScript shortcut. Ugggh.
    – robocat
    Jul 17, 2022 at 21:08
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

3
  • The link is to the MAC App store and so not for iOS
    – mmmmmm
    Jul 22, 2022 at 13:04
  • While the link does show the App Store, the app is also available for iOS as seen on the same page.
    – agarza
    Jul 22, 2022 at 13:26
  • As you wrote, you used the filename user.js. Is there a special naming theme for user scripts or user css using the Userscripts app?
    – It's Leto
    Sep 21, 2023 at 20:53
1

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?

0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .