Toggle CSS bookmarklet | Hacker News Reader

Toggle CSS bookmarklet

github.com

35 pointsHurtak19 comments

Open articleView on HN

Firefox has that as built-in function

view menu -> page style -> no style

alt+vyn/alt+vyb via keyboard.

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

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.

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.

Is literally a single keystroke and two clicks of the mouse deep now?

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.

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.

Opera 12 had it too. Handy for viewing iframes without any annoying popups.

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=''

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

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.

How about this extra-dirty version in 69b?

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

Pretty cool solution but it doesn't seem to be 100% reliable, eg. on this page http://stackoverflow.com/questions/31454681/progress-bar-wit... it displays some css definitions at the beggining of the page

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

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.

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>');

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

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.

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

Reply on news.ycombinator.com