Best HTML/Javascript/DOm/CSS Hack Tricks
1. You can turn your browser into a notepad by pasting the following in the URL bar and hitting Return key.
data:text/html, <html contenteditable>
This is useful for responsive layouts where you want the width to adjust dynamically but want to keep, say, square photo thumbnails.
data:text/html, <html contenteditable>
2.You can quickly run HTML in the browser without creating a HTML file:
Enter this in the address bar:
(This won't work in IE)
You can make a page's CSS editable in the browser without using JS:
(This also won't work in IE)
You can have the browser parse a URL for you like this:
(Works in all major browsers)
You can invalidate a URL in the browser's cache by sending a PUT method xmlhttprequest to it:
(Works in all major browsers)
You can put multiple statements in an
block without using curly bracketslike this:
3. Adding label tags around a checkbox or radio button ties that text to the checkbox. No more labelfor!
If the user clicks on "I Agree" it will select that checkbox.
Enter this in the address bar:
data:text/html,<h1>Hello, world!</h1>
(This won't work in IE)
You can make a page's CSS editable in the browser without using JS:
1 2 3 4 5 6 7 8 | <!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable> body { color: blue } </style>
</body>
</html>
|
(This also won't work in IE)
You can have the browser parse a URL for you like this:
1 2 3 4 5 | var a = document.createElement('a a.href = url;
// any property of window.location works here:
document.write('The hostname of ' + url + ' is ' + a.hostname); |
(Works in all major browsers)
You can invalidate a URL in the browser's cache by sending a PUT method xmlhttprequest to it:
1 2 3 4 5 | var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft. xhr.open('PUT', url); xhr.send(null); |
(Works in all major browsers)
You can put multiple statements in an
if
1 2 | if (confirm("Do you wish to see two alerts?")) alert(1), alert(2); |
3. Adding label tags around a checkbox or radio button ties that text to the checkbox. No more labelfor!
<label><input type="checkbox" name="option1">I Agree</label>
If the user clicks on "I Agree" it will select that checkbox.
4. You can create containers that maintain a constant aspect ratio by using padding-bottom as a percentage. The CSS spec says that padding-bottom is defined relative to the *width*, not height, so if you want a 5:1 aspect ratio container you can do something like this:
1 2 3 4 5 | <div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
|
This is useful for responsive layouts where you want the width to adjust dynamically but want to keep, say, square photo thumbnails.
5. To make URLs automatically load from either 'http://' or 'https://' based on the current protocol, you can write them like this:
1 | <script src="//domain.com/path/to
|
Source: Quora
.jpg)
.jpg)
