Deaktivieren Sie alle CSS-Stylesheets
Da die meisten modernen Seiten alle Stile in externen CSS-Dateien definieren <head>
, die im head
Tag enthalten sind , werden durch das Entfernen des Tags alle Stile (mit Ausnahme der expliziten Inline-Stile und der durch Skripte festgelegten Stile) entfernt. Klicken Sie mit der rechten Maustaste auf eine Seite, wählen Sie Inspizieren aus dem Kontextmenü und fügen Sie dies in die Registerkarte Konsole ein:
document.head.parentNode.removeChild(document.head);
Und hier ist die Bookmarklet-Version des obigen Codes, die als URL eines Lesezeichens eingefügt werden kann (umschalten der Lesezeichenleiste in Chrome mit ⌘+ shift+ bauf Mac oder ctrl+ shift+ bauf Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
Sie können den obigen Code auch direkt in die Adressleiste eingeben, aber den Hinweis am Ende der Antwort lesen, bevor Sie dies tun. .
Sie <head>
können das auch von der Registerkarte devtools Elements entfernen , indem Sie mit der rechten Maustaste auf das Head-Tag klicken und es über das Kontextmenü löschen:
HINWEIS: Das Entfernen des Head-Tags ist etwas gewaltsam, da alle Stile, Javascript, Web-Schriftarten usw. gelöscht werden. Wenn der Seiteninhalt mit Javascript gerendert wird, wird höchstwahrscheinlich eine leere Seite angezeigt. Auf den meisten Websites werden wahrscheinlich die erwarteten Ergebnisse erzielt.
Ein häufigerer Anwendungsfall besteht darin, bestimmte störende Elemente auf einer Seite zu entfernen, z. B. Farben, Ränder, iFrames usw. In diesem Fall bietet eines der folgenden Lesezeichen eine präzisere Steuerung.
Entfernen Sie Farben, Hintergründe, Ränder, Abstände und Breiten
Erstellen Sie ein Lesezeichen und fügen Sie das folgende Snippet als URL hinzu:
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';}})()
Jetzt können Sie auf Ihr Lesezeichen klicken , um den CSS-Stil auf der aktuellen Seite lesbarer zu gestalten.
Hinweis: Tatsächlich kann eine Seite einen <style>
Block innerhalb des <body>
Tags haben - der HTML5-Standard erlaubt dies und die meisten Browser unterstützen dies. Bisher ist dies keine gängige Praxis, aber wenn sich Web-Frameworks weiterentwickeln, werden wir möglicherweise im zukünftigen Web mehr „lokale Stylesheets“ sehen.
Wenn Sie lediglich die Lesbarkeit verbessern möchten, bietet das Deaktivieren von CSS möglicherweise nicht die beste Erfahrung. In solchen Fällen liefern die folgenden Lesezeichen möglicherweise bessere Ergebnisse:
Nicht scrollende Kopf- / Fußzeilen entfernen (vergrößert den Lesebereich)
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);}}})()
Iframes entfernen (tötet die meisten Banner usw.)
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
Dadurch werden auch die meisten eingebetteten Videos, Kommentar-Widgets usw. gelöscht.
Alle Bilder entfernen (Office-Modus durchsuchen)
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';}})();
Hinweis: Diese Option muss in Kombination mit der Option "iframes entfernen" oben verwendet werden, da sich die meisten Bannerbilder normalerweise in iframes befinden und dieses Lesezeichen nur mit Dokumenten der obersten Ebene funktioniert.
Die Lesezeichen können auch für Websites verwendet werden, auf denen bei Verwendung von Werbeblockern kein Inhalt angezeigt wird.
Mit dem Bookmarklet Builder können Sie die Minimierung des Codes aufheben ( Schaltfläche " Formatieren" ), ihn gemäß Ihren Anforderungen bearbeiten und ihn auf einen Wert zurücksetzen ( Schaltfläche " Komprimieren" ), den Sie als Lesezeichen-URL einfügen können.
Die oben aufgeführten Lesezeichen funktionieren auch auf den meisten mobilen Webbrowsern unter iOS und Android. In mobilen Browsern wird kein Javascript über die Adressleiste ausgeführt. Sie können jedoch ein Lesezeichen hinzufügen, den js-Code als URL einfügen, z. B. eine Bezeichnung festlegen clean
und es dann ausführen, indem Sie auf das Element im Lesezeichenmenü tippen (für IOS-Safari). oder clean
in die Adressleiste eingeben und dann auf das entsprechende Lesezeichen in der Dropdown-Liste "Autosuggest" tippen. Dies kann die Lesbarkeit für Seiten verbessern, die keinen Lesemodus haben .
HINWEIS: Wenn Sie die oben genannten Lesezeichen kopieren und direkt in die Adressleiste einfügen, werden Sie feststellen, dass Browser dasjavascript:
Präfix entfernen. Dies ist eine Browsersicherheitsfunktion. Wenn Sie die Lesezeichen also direkt über die Adressleiste testen möchten, werden Sie das Präfix entfernen müssen javascript:
vor dem js-Code manuell voranstellen .
Chrome-Erweiterungen
Wenn Sie nach einer Chrome-Erweiterung suchen, gibt es uMatrix, in der Sie auf die CSS-Spalte klicken können, um alle CSS und Stile zu deaktivieren, und Web Developer, in dem Sie auf der Registerkarte CSS die Option Alle Stile deaktivieren haben .