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.

up vote 16 down vote accepted

Disable all CSS style sheets

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:

delete the head tag in Chrome

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.

Remove colors, backgrounds, margins, paddings, widths

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:

Remove non-scrolling headers/footers (increases reading area)

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);}}})()

Remove iframes (kills most banners, etc)

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.

Remove all images (office mode browsing)

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 typing clean in 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 prepend javascript: manually before the js code.

Chrome Extensions

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.

  • uMatrix (which I've independently discovered in the intervening years) does in fact do the trick, on a site-by-site (or page, or domain) basis. Web Developer (mentioned below) is too overzealous. – dredmorbius Jan 18 at 11:07

You can use the Web Developer extension for that:

enter image description here

  • 2
    Thanks. That seems to do the trick. Though Lifehacker is still unreadable. Works in w3m though. Old school is how we roll here. – dredmorbius Jul 10 '12 at 19:46
  • Hrm. Problem is that this is a global setting for all sites/pages. I just went through a few moments of "WTF!!!" as I suddenly started seeing styling elements appear/disappear from various pages as I toggled various Web Developer settings. So it's somewhat, but not entirely, useful. – dredmorbius Jul 10 '12 at 20:29
  • @Dr.EdwardMorbius: Weird. For me, this is only temporary. Even refreshing the page reverts to the default view of the site. But I assume that's not what you want either, is it? – Der Hochstapler Jul 10 '12 at 20:32
  • 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". – dredmorbius Jul 10 '12 at 22:03

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

  • That appears to disable all stylesheets for all pages, with no ability to enable/disable them on a given page. Not what I'm looking for. – dredmorbius Jul 10 '12 at 19:42
  • Which one? There's four options. – Synetech Jul 10 '12 at 19:44
  • I don't see an extension icon. Deleted it. – dredmorbius Jul 10 '12 at 19:45
  • Huh?​​​​​​​​​​​ – Synetech Jul 10 '12 at 19:50
  • There was no icon for the "Disable Stylesheets" extension in the notification area to the right of the URL window. The only way I could manage settings was to navigate through Wrench -> Tools -> Extensions -> Disable Stylesheets -> Options. Not ... very ergodynamic. – dredmorbius Jul 10 '12 at 20:30

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.

  • 1
    It's more a privacy / keep JS usage to a minimum basis. I tend to prefer w3m over the links/elinks family of console browsers -- better ergonomics and I'm pretty used to it. Yeah, though, I'm really familiar with how fast and light console browsers can be. Some sites are just plain broken though. – dredmorbius Jul 10 '12 at 19:47
  • 1
    Gotcha. I actually don't use the console version, but the gui as it's just as fast. But yeah, you're right, sometimes pages are very broken. It would be great if all pages degraded gracefully. – Gerry Jul 10 '12 at 19:53
  • 2
    I've been known to resort to lynx, some sed, and 'fmt' in extreme cases. This makes baby Jesus cry. – dredmorbius Jul 10 '12 at 20:32

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

  • 2
    Where would this information be entered? – music2myear Nov 1 at 17:39
  • 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 – Vishal choudhary Nov 1 at 18:05
  • It should not be necessary to read comments to understand an answer. Please use the EDIT button to add this information to the answer itself. – music2myear Nov 1 at 19:10

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.