Skip to content

Instantly share code, notes, and snippets.

@gridwalk
Created December 23, 2015 22:07
Show Gist options
  • Save gridwalk/433bc23152502e0f4571 to your computer and use it in GitHub Desktop.
Save gridwalk/433bc23152502e0f4571 to your computer and use it in GitHub Desktop.
CSS Scrambler is a bookmarklet that reads the HTML from top to bottom and shifts the CSS rules from each element onto its preceding element. The result is a scrambled layout. It can be run multiple times on a page!
// the css rules that we want to copy
var all_styles = ["background","backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","borderImage","borderRadius","bottom","boxShadow","captionSide","clear","clip","color","content","cssFloat","cursor","direction","display","fill","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","maxHeight","maxWidth","minHeight","minWidth","opacity","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","position","quotes","right","size","tableLayout","textAlign","textDecoration","textIndent","textOutline","textShadow","textTransform","top","transform","verticalAlign","visibility","whiteSpace","width","wordSpacing","zIndex"];
i = 0;
// get all elements, not including scripts and styles
elements = document.querySelectorAll("body *:not(script):not(style)");
// run the scrambler
scrambler = setInterval(function(){
// end when all elements have been scrambled
if( i >= elements.length-1 ){
clearInterval(scrambler);
return;
}
// computed style of the source element
computed_style = window.getComputedStyle(elements[i+1]);
// copy styles from source to destination element one by one
all_styles.forEach(function(style_name){
style_value = computed_style[style_name];
if( style_value !== undefined && style_value !== "" ){
// try to prevent hidden elements
if( style_name == "display" && style_value == "none" ){ style_value = "block"; }
if( style_name == "overflow" && style_value == "hidden" ){ style_value = "visible"; }
if( style_name == "opacity" ){ style_value = "1"; }
// give everything cool animated transitions
elements[i].style.transition = "all 0.5s ease";
// set the copied style
elements[i].style[style_name] = style_value;
}
});
i++;
},50);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment