Here is a list of some interesting HTML/JS/DOM/CSS hacks that most web developers don't know about:
HTML hacks
- Create an HTML page without saving a file: You can create an HTML page without saving a file by typing the following into the address bar of your web browser:
data:text/html,<h1>Hello World!</h1>
This will create an HTML page with the title "Hello World!", which will be displayed in your web browser.
- Make a page's CSS editable in the browser without using CSS: You can make a page's CSS editable in the browser without using CSS by typing the following into the HTML code of your page:
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
This will create an HTML page with a CSS style block that is editable in the browser.
JS hacks
- Parse a URL: You can parse a URL using JavaScript by typing the following into your code:
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: You can 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);
DOM hacks
- Put multiple statements in an if block without using curly brackets: You can put multiple statements in an if block without using curly brackets by typing the following into your code:
if (confirm("Do you wish to see two alerts?")) alert(1), alert(2);
CSS hacks
- Prevent another site from loading your site content in an iframe: You can prevent another site from loading your site content in an iframe by typing the following into your code:
if ( window.location != window.parent.location ) window.parent.location = window.location;
- Make a text editor: You can make a text editor using JavaScript by typing the following into your code:
data:text/html, <html contenteditable>
- Make it look like Neo: You can make it look like Neo in Chrome by typing the following into your code:
data:text/html, <html contenteditable style="background:#000; color:#0b7408; font-family:sans-serif; padding:5%;">
- Layout, See Everything: You can see the layout of everything on a page by typing the following into your code:
* { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,255,0,.2); }
These are just a few of the many interesting HTML/JS/DOM/CSS hacks that are out there. With a little creativity, you can come up with your own hacks to solve problems in your web development projects.