4 ms·

Toggle CSS bookmarklet

35 points by Hurtak 11y ago

chrismorgan 11y ago
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 11y ago
  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 11y ago
    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.
the8472 11y ago
Firefox has that as built-in function view menu -> page style -> no style alt+vyn/alt+vyb via keyboard.
- Hurtak 11y ago
  Sure, I just wanted something easy to use without going deep into settings menu or installing plugins.
  - the8472 11y ago
    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 11y ago
      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.
  - pc86 11y ago
    Is literally a single keystroke and two clicks of the mouse deep now?
- userbinator 11y ago
  Odd that browsers seem to be reducing in options, forcing people to reinvent - less efficiently - what used to be available by default. In fact one of the conformance requirements for CSS2.1 is "The UA must allow the user to turn off the influence of author style sheets"; CSS3 isn't finished yet so I can't find that exact phrase in it but I think it should still be a requirement.
- ogurechny 11y ago
  Speaking of built-in functionality and useful buttons, nothing beats old Opera's combined author mode/user mode/alternative CSS/custom CSS toggle button with drop-down menu.
- snarkyturtle 11y ago
  Opera 12 had it too. Handy for viewing iframes without any annoying popups.
xem 11y ago
How about this extra-dirty version in 69b? with(document.documentElement)innerHTML=innerHTML.replace(/yl|nk/g,0)
- Hurtak 11y ago
  Pretty cool solution but it doesn't seem to be 100% reliable, eg. on this page http://stackoverflow.com/questions/31454681/progress-bar-with-cycle-divider http://stackoverflow.com/questions/31454681/progress-bar-wit... it displays some css definitions at the beggining of the page
- userbinator 11y ago
  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.
xem 11y ago
other approach: https://twitter.com/subzey/status/621672779344166912 https://twitter.com/subzey/status/621672779344166912
- bennettfeely 11y ago
  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.
kiernan 11y ago
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 11y ago
  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>');
kndyry 11y ago
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

35 points by Hurtak 11y ago

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 11y ago
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 11y ago
  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.

the8472 11y ago

Firefox has that as built-in function view menu -> page style -> no style alt+vyn/alt+vyb via keyboard.

Hurtak 11y ago
Sure, I just wanted something easy to use without going deep into settings menu or installing plugins.
- the8472 11y ago
  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 11y ago
    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.
- pc86 11y ago
  Is literally a single keystroke and two clicks of the mouse deep now?
userbinator 11y ago
Odd that browsers seem to be reducing in options, forcing people to reinvent - less efficiently - what used to be available by default. In fact one of the conformance requirements for CSS2.1 is "The UA must allow the user to turn off the influence of author style sheets"; CSS3 isn't finished yet so I can't find that exact phrase in it but I think it should still be a requirement.
ogurechny 11y ago
Speaking of built-in functionality and useful buttons, nothing beats old Opera's combined author mode/user mode/alternative CSS/custom CSS toggle button with drop-down menu.
snarkyturtle 11y ago
Opera 12 had it too. Handy for viewing iframes without any annoying popups.

xem 11y ago

How about this extra-dirty version in 69b? with(document.documentElement)innerHTML=innerHTML.replace(/yl|nk/g,0)

Hurtak 11y ago
Pretty cool solution but it doesn't seem to be 100% reliable, eg. on this page http://stackoverflow.com/questions/31454681/progress-bar-with-cycle-divider http://stackoverflow.com/questions/31454681/progress-bar-wit... it displays some css definitions at the beggining of the page
userbinator 11y ago
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.

xem 11y ago

other approach: https://twitter.com/subzey/status/621672779344166912 https://twitter.com/subzey/status/621672779344166912

bennettfeely 11y ago
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.

kiernan 11y ago

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 11y ago
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>');

kndyry 11y ago

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