Under Firefox, View -> Page Style -> No Style allows viewing an unstyled page. Helpful for some overly-JS / stylesheet dependent sites (e.g.: Lifehacker).
Is there any similar functionality under Google's Chrome, and/or where would I access this?
Version 19.0.1084.56 / Ubuntu.
Given that most modern pages define all styles in external CSS files which are included in the <head>, removing the head tag will effectively remove all the styles (except the explicit inline styles and those set by scripts). Right-click on a page, pick Inspect from the context menu and paste this into the Console tab:
document.head.parentNode.removeChild(document.head);
And here is the bookmarklet version of the code above which can be pasted as the URL of a bookmark (toggle the bookmark bar in Chrome with ⌘+shift+b on Mac or ctrl+shift+b on Linux/Windows):
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
You can also type the code above directly into the address bar but read the note at the end of the answer before you do it..
Removing the <head> can also be done from the devtools Elements tab, by right-clicking the head tag and deleting it via the context menu:
NOTE: Removing the head tag is a bit of a brute force approach since it will kill all styles, javascript, web fonts, etc, and if the page content is rendered by javascript then most likely you'll get an empty page. On the majority of sites it will probably give you the expected results.
A more frequent use case is to remove specific annoying things on a page, such as colors, margins, iframes, etc. In such a case, one of the following bookmarklets will provide more granular control.
Create a bookmark and add the following snippet as the 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';}})()
Now you can click your bookmarklet to clean up the CSS style on the current page to something more readable.
Note: It is, in fact, possible for a page to have a
<style>block inside the<body>tag - the HTML5 standard allows this and most browsers support it. So far this is not common practice, but as web frameworks evolve we might see more 'local style sheets' in the future web.
If you simply want to improve readability then disabling all CSS might not provide the best experience. For such cases the bookmarklets below might give better results:
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);}}})()
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
This will also kill most embedded videos, comment widgets, etc.
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';}})();
Note: this one needs to be used in combination with Remove iframes above, since most banner images are typically inside iframes and this bookmarklet only works with the top-level document.
The bookmarklets can also be used for sites which won't display content when ad blockers are used.
You can use the Bookmarklet Builder to unminify the code (the Format button), edit it to suit your needs, and minify it back (the Compress button) to something you can paste as the bookmark URL.
The bookmarklets listed above will also work on most mobile web browsers on both iOS and Android. Mobile browsers won't run javascript from the address bar, but you can add a bookmark, paste the js code as the URL, set a label, e.g.
clean, and then run it by tapping the item in the bookmarks menu (for IOS safari) or typingcleanin the address bar and then tapping the corresponding bookmark in the autosuggest dropdown. This can improve readability for pages that have no reading mode.NOTE: If you copy and paste the bookmarklets above directly into the address bar you'll notice that browsers remove the
javascript:prefix — this is a browser security feature, so if you want to test the bookmarklets directly from the address bar, then you'll need to prependjavascript:manually before the js code.
If you are looking for a chrome extension then there is uMatrix where you can click the CSS column to disable all CSS and styles, and Web Developer where under the CSS tab you have an option Disable All Styles.
You can use the Web Developer extension for that:
There is no Chrome version of No Style (yet?), so you have to use another method, such as some of the other extensions that can disable styles.
You can use the Disable Stylesheets extension to disable stylesheets in general or the Web Developer extension to toggle all styles on or off. Pendule is also a popular extension for this purpose.
You can also disable styles with the Developers Tools [1][2]:
Gear Icon -> CSS Tab -> Disable All Styles
If you are doing this for speed reasons then can I suggest an alternative: Links 2
When the browser opens press g and type the url you want to go to. This browser is light on the standards it supports, but amazingly fast even on a very old PC.
Under Firefox, View -> Page Style -> No Style allows viewing an unstyled page. Helpful for some overly-JS / stylesheet dependent sites (e.g.: Lifehacker). Is there any similar functionality under Google's Chrome, and/or where would I access this? Version 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius
...
Yes. Toggling stylesheet off for the current session would be sufficent. Toggling CSS, JS, cookies, etc., for all sites is right out. Unfortunately that seems to be what was happening. I'd describe the experience as "mildly annoying". - Dr. Edward Morbius
Using the jQuery library, at console (Chromium/Chrome, Firefox, Opera) should clear author styles from an HTML document:
(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()
https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js
To toggle styles on or off in an HTML document, this might be helpful:
https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js
Loads jQuery into the document, either from local file or from jQuery's CDN, logs success, logs style status, toggles author styles on or off by spacebar keydown or at the console.
Tested in Chromium/Chrome, Firefox and Opera for both local and online HTML documents.
My currently preferred tool for this is the uMatrix browser extension, which allows even finer-grained controls: disable CSS, JS, images, or other features, by loading domain, relative to the present website. Changes may be easily toggled, made permanent, or cast as default rules.
This and Stylish address most of my as-a-reader customisation needs. Reader-Mode (Firefox) tends to give uniformly-styled content fairly reliably.
Extending the question: On Chrome/Android, I don't have a viable option, and the solutions suggested above don't work.
only one line jquery code... use
jQuery("head").empty();
or in javascripts you can use
document.getElementsByTagName("head")[0].innerText="";
goto your webpage and then press ctrl+shift+i you will see a menu select console and paste this document.getElementsByTagName("head")[0].innerText=""; code and then press enter
document.getElementsByTagName("head")[0].innerText=""; code and then press enter
Nov 1, 2018 at 18:05