rosswd/hacks.md

## hacks.md

      
    Raw
  

              hacks.md
            
          
    HTML/JS/DOM/CSS Hacks

Taken from https://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about
Make html without creating a file, enter this in address bar

data:text/html,<h1>Hello World!</h1>
Make a page's CSS editable in the browser without using css

<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>

Make the browser parse a URL

var a = document.createElement('a');
a.href = url;

// any property of window.location works here:
document.write('The hostname of ' + url + ' is ' + a.hostname);

Invalidate a URL in the browser cache by sending a PUT method XMLHttpRequest to it

var xhr = window.XMLHttpRequest ?
    new XMLHttpRequest() :
    new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('PUT', url);
xhr.send(null);

Put multiple statements in an if block without using curly brackets

if (confirm("Do you wish to see two alerts?"))
  alert(1), alert(2);

Prevent another site from loading your site content in an iframe

if ( window.location != window.parent.location )
    window.parent.location = window.location;

Alternatively, use "X-FRAME Options" HTTP Header.
http://en.wikipedia.org/wiki/X-Frame-Options#Frame-Options
Make a text editor

data:text/html, <html contenteditable>
Make it like neo, in Chrome:
data:text/html, <html contenteditable style="background:#000; color:#0b7408; font-family:sans-serif; padding:5%;">
Layout, See everything

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }

See the answer for details