Existe la posibilidad de utilizar una hoja de estilo personalizada en Safari en Mac para inyectar sintaxis CSS que cambie la salida renderizada de las páginas web.
Estoy buscando una herramienta similar para iPad y iPadOS.
¿Hay alguna forma de utilizar la inyección CSS en Safari u otros navegadores en el iPad?
Para inyectar un CSS personalizado en una página web en el iPad puedes utilizar la aplicación Shortcuts. En primer lugar, tienes que crear un nuevo acceso directo:
Abrir accesos directos
Seleccione Crear acceso directo > Web > Ejecutar JavaScript en página web
Utilice la siguiente 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();
Toque Siguiente
Añadir el nombre del acceso directo
Para aplicar un CSS personalizado es necesario ejecutar el acceso directo en Safari:
Abrir una página web en Safari
Pulse el botón de compartir
Desplácese hacia abajo y pulse sobre el acceso directo recién creado.
CONSEJO: Utilice !important en las inyecciones CSS para anular las reglas predeterminadas.
En iOS14 sólo funcionó una vez que cambié la configuración predeterminada "Ejecutar JavaScript en:" de "Página web" a "Acceso directo" (dentro de la ventana de edición de código). De lo contrario, aparece el error "Run JavaScript on webpage failed because no web page was passed as input".
Esto necesita que lo ejecutes cada vez que visites el sitio web. Es la típica mierda de Apple. CSS se diseñó teniendo en cuenta los estilos de usuario, pero Apple no se molesta en apoyar los estándares abiertos.
Imagino que esto se puede refactorizar en un "bookmarklet" que podría existir en la "barra de favoritos" de Safari iPadOS para su uso con un solo clic
Encontré que esto era posible con una solución satisfactoria en ios 15.1+ usando el a user.js y la aplicación Userscripts.
https://apps.apple.com/us/app/userscripts/id1463298887
Un userscript de ejemplo que sólo añade 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);
})();Puedes alojar tu userscript en algún sitio como greasyfork.org, luego visita la página de descarga de script en iOS safari y utiliza la extensión para instalar el usuario script.
Ejemplo de script de usuario completo: https://greasyfork.org/en/scripts/448219-lazyfoo-readable-css
¿Automáticamente?
No. (al menos no a partir de mediados de 2022)
Si alguien escribiera una extensión para Safari*, o si Apple añade soporte en una futura versión de iOS, entonces la respuesta cambiaría, por supuesto.
* (si es posible: MacOS Safari tiene la Ampliación de Cascadea si hacer lo mismo en iOS/iPadOS fuera trivial, parece que el desarrollador de la extensión ya lo habría hecho)
Para más información y posibles soluciones (además del método 'Shortcuts' que sugirió @mykola-zotko en la respuesta anterior ) consulte las respuestas en: " ¿Puedo anular CSS con user-css en Mobile Safari? "
Sí, las inyecciones automáticas de script funcionan en iOS.
Puede utilizar el Guiones de usuario mencionada anteriormente, funciona en iOS y MacOS Safari. Lo más sencillo es utilizar la versión de macOS para instalar tus scripts y luego sincronizarlos con tu dispositivo iOS mediante iCloud. Guarda los scripts en macOS en una carpeta de iCloud a la que puedas acceder en iOS.
Funciona a la perfección. Además, no es necesario utilizar un UserScript (Javascript) para cargar las hojas de estilo, ya que UserStyles está soportado directamente. Necesitarás iOS 15.1 o posterior.
PD Para que tus scripts se sincronicen más rápido, abre Finder en tu mac en la carpeta scripts que hayas elegido y abre la misma carpeta en Archivos en tu dispositivo iOS. Verás que los archivos se sincronizan más rápido.
AppleAyuda es una comunidad de usuarios de los productos de Apple en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.
