

Toggle CSS bookmarklet - Hurtak
https://github.com/Hurtak/toggle-css-bookmarklet

======
the8472
Firefox has that as built-in function

view menu -> page style -> no style

alt+vyn/alt+vyb via keyboard.

~~~
Hurtak
Sure, I just wanted something easy to use without going deep into settings
menu or installing plugins.

~~~
the8472
We must have different definitions of "deep". But I guess it depends on how
often you need that functionality.

And I don't think it's called "settings menu" either, because settings are
about:preferences or about:config.

It's just a regular menu, like many other applications have.

~~~
Hurtak
That is true for FF, but as far as I know, there is now easy way to do this in
Chrome, which is my primary browser.

------
chrismorgan
The ES6 bookmarklet can be easily shrunk by 13 characters, taking it to 121:

javascript:for(let e of
document.querySelectorAll('link,style,[style]'))e.style.cssText?e.style.cssText='':e.outerHTML=''

~~~
thekaleb
This does not seem to work. It needs to be in an IIFE with a "use strict"
statment, but even then, I run into this bug on Chrome:
[https://code.google.com/p/v8/issues/detail?id=3953](https://code.google.com/p/v8/issues/detail?id=3953)

~~~
ahoge
It does work, but you need a browser which supports all of the used ES6
features (even in sloppy mode). As far as I can tell, it should work in
Microsoft Edge.

It will work in Firefox once they enable `let` without specifying the script
version.

It will work in Chrome once they fix for-of and once they make `let` work
outside of strict mode.

------
xem
How about this extra-dirty version in 69b?

with(document.documentElement)innerHTML=innerHTML.replace(/yl|nk/g,0)

~~~
userbinator
That version has some rather funny side-effects... try it on
[https://en.wikipedia.org/wiki/Monk](https://en.wikipedia.org/wiki/Monk) , for
example.

------
kiernan
Is there a way to remove the styles but apply some others instead which
highlight the borders and natural layout of the elements?

Kind of like if you turned off styles and used the inspect feature of your
browser but with all it's mouse-over highlights and guidelines turned on at
once.

~~~
Hurtak
You could combine the 'turn off css snippet' with something like this:

document.body.insertAdjacentHTML('afterbegin', '<style> _{outline: 1px solid
black} </style>')

both together:

javascript:[].slice.call(document.querySelectorAll('link,style,[style]')).forEach(function(e){e.style.cssText?e.style.cssText='':e.outerHTML=''});document.body.insertAdjacentHTML('afterbegin',
'<style>_{outline: 1px solid black}</style>');

------
xem
other approach:
[https://twitter.com/subzey/status/621672779344166912](https://twitter.com/subzey/status/621672779344166912)

~~~
bennettfeely
Good method, here's a slight improvement:

    
    
      :not(head) { all: initial !important; }
    

Edit: These methods don't simply toggle the site's CSS, they reset the
browser's initial CSS styles for all the elements, so it's not the same.

------
kndyry
A hack near and dear to my heart! The toggle bit on this is a very nice touch.
I wrote something similar [0] a short while ago, except that, after the native
styles are stripped, a very small amount of css is added to: constrain page
width, make text a green monospace on black, improve line-height and remove
images.

[0] [https://github.com/kndyry/detox](https://github.com/kndyry/detox)

