Disabilita tutti i fogli di stile CSS
Dato che la maggior parte delle pagine moderne definisce tutti gli stili nei file CSS esterni che sono inclusi in <head>
, la rimozione del head
tag rimuoverà efficacemente tutti gli stili (tranne gli stili incorporati espliciti e quelli impostati dagli script). Fai clic con il tasto destro su una pagina, seleziona Ispeziona dal menu contestuale e incollalo nella scheda Console:
document.head.parentNode.removeChild(document.head);
Ed ecco la versione del bookmarklet del codice sopra che può essere incollata come l'URL di un segnalibro (attiva la barra dei segnalibri in Chrome con ⌘+ shift+ bsu Mac o ctrl+ shift+ bsu Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
Puoi anche digitare il codice sopra direttamente nella barra degli indirizzi, ma leggi la nota alla fine della risposta prima di farlo. .
La rimozione di <head>
può anche essere effettuata dalla scheda Devtools Elements , facendo clic con il tasto destro del mouse sul tag head ed eliminandolo tramite il menu di scelta rapida:
NOTA: la rimozione del tag head è un po 'un approccio di forza bruta poiché ucciderà tutti gli stili, javascript, caratteri web, ecc. E se il contenuto della pagina è reso da javascript allora molto probabilmente otterrai una pagina vuota. Sulla maggior parte dei siti probabilmente ti darà i risultati attesi.
Un caso d'uso più frequente è rimuovere elementi fastidiosi specifici su una pagina, come colori, margini, iframe, ecc. In tal caso, uno dei seguenti bookmarklet fornirà un controllo più granulare.
Rimuovi colori, sfondi, margini, imbottiture, larghezze
Crea un segnalibro e aggiungi il seguente frammento come URL:
javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()
Ora puoi fare clic sul tuo bookmarklet per ripulire lo stile CSS nella pagina corrente in qualcosa di più leggibile.
Nota: è infatti possibile che una pagina abbia un <style>
blocco all'interno del <body>
tag - lo standard HTML5 lo consente e la maggior parte dei browser lo supporta. Finora questa non è una pratica comune, ma con l'evoluzione dei framework web potremmo vedere più "fogli di stile locali" nel futuro web.
Se vuoi semplicemente migliorare la leggibilità, disabilitare tutti i CSS potrebbe non fornire la migliore esperienza. In questi casi i bookmarklet di seguito potrebbero dare risultati migliori:
Rimuovi intestazioni / piè di pagina non scorrevoli (aumenta l'area di lettura)
javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()
Rimuovi iframe (uccide la maggior parte dei banner, ecc.)
javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29
Questo ucciderà anche la maggior parte dei video incorporati, widget di commenti, ecc.
Rimuovi tutte le immagini (navigazione in modalità ufficio)
javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();
Nota: questo deve essere utilizzato in combinazione con Rimuovi iframe sopra, poiché la maggior parte delle immagini di banner si trova in genere all'interno di iframe e questo bookmarklet funziona solo con il documento di livello superiore.
I bookmarklet possono anche essere utilizzati per siti che non visualizzeranno contenuti quando vengono utilizzati i blocchi degli annunci.
È possibile utilizzare il Bookmarklet Builder per annullare la minzione del codice ( pulsante Formato ), modificarlo in base alle proprie esigenze e ridimensionarlo ( pulsante Comprimi ) in qualcosa che è possibile incollare come URL del segnalibro.
I bookmarklet elencati sopra funzioneranno anche sulla maggior parte dei browser Web mobili sia su iOS che su Android. I browser per dispositivi mobili non eseguiranno javascript dalla barra degli indirizzi, ma è possibile aggiungere un segnalibro, incollare il codice js come URL, impostare un'etichetta, ad esempio clean
, e quindi eseguirlo toccando l'elemento nel menu dei segnalibri (per IOS safari) o digitando clean
nella barra degli indirizzi e quindi toccando il segnalibro corrispondente nel menu a discesa autosuggest. Ciò può migliorare la leggibilità per le pagine che non dispongono di modalità di lettura .
NOTA: Se copi e incolli i bookmarklet sopra direttamente nella barra degli indirizzi noterai che i browser rimuovono iljavascript:
prefisso: questa è una funzione di sicurezza del browser, quindi se vuoi testare i bookmarklet direttamente dalla barra degli indirizzi, allora è necessario anteporre javascript:
manualmente prima del codice js.
Estensioni di Chrome
Se stai cercando un'estensione di Chrome, c'è uMatrix dove puoi fare clic sulla colonna CSS per disabilitare tutti i CSS e gli stili e Web Developer dove sotto la scheda CSS hai un'opzione Disabilita tutti gli stili .