The Most Interesting HTML/JS/DOM and CSS hacks that you don't know about

The Most Interesting HTML/JS/DOM/CSS hacks that you don't know about

Today We are going to show you most interesting HTML/JS/DOM/CSS hacks that you don’t know about. So what exactly these hacks are and how they are interesting to you. These following hacks are special functionality provided by the major browsers that you don’t know yet. Actually these hacks have browser compatibility problems and are not widely supported. You may find some horrible codes that you haven’t seen before but those codes and hacks do some interesting things you won’t believe.
Please note that some the hacks included in this article are not supported by all browsers. The browsers in which these hacks worked well and we tested are Google Chrome, Mozilla Firefox, etc. Please try these hacks out and tell us what do you think about them in the comments below.

Run HTML directly into your browser

OK if you are wondering how we can run HTML directly into a browser? then you should better know that it’s true that you can run HTML code directly from the address bar of your browser. Here’s how.

So go to your major browser like Google Chrome. And then enter the following code into your address bar then hit enter.

data:text/html,<h1>Hello, world!</h1>

Edit CSS directly into your browser

Now this one is what I like the most. You can edit your CSS right into your browser but this is not the end you can see the changes dynamically into your browser.


<!doctype html>
<html>
<body>
<style contenteditable="" style="display: block;">
body { color: blue }
</style>
</body>
</html>

Turn Your Browser into Notepad

Is this possible? Yes it is, Now you can turn your lovely browser into notepad by just entering the below code into the address bar.


data:text/html, <html contenteditable>

No more labelfor!

Now you can add label tags around your radio button or checkbox ties that text to the checkbox or radio button. No need of labelfor Adding label tags around a checkbox or radio button ties that text to the checkbox.


<label><input type="checkbox" name="option1">I Agree</label>

If you click on “I Agree” it will select that checkbox or if you have radio button it will be selected.

Make URLs automatically load

To make URLs automatically load from either ‘https://’ or ‘https://’ based on the current protocol, you can write them like this:


<script src="//domain.com/path/to/script.js"></script>

Create a Triangle in Pure CSS


.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #0099ff;
    border-left: 100px dashed transparent;
    border-right: 100px dashed transparent;
    border-bottom: 0;
   display: block;
   overflow: hidden;

Center a Content Block

What does this means is that you can center your content block just using CSS either horizontally or vertically. To center a block vertically use below code


.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

To center a block horizontally use below code


.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

CSS3 Blurred text

Blur your normal text with the aid of CSS3 property.


color: transparent;
text-shadow: #111 0 0 5px;

Specify Unicode ranges


@font-face {
  font-family: MyIndianFont;
  src: local(MS-India);
  unicode-range: U+41-5A, U+61-7A, U+C0-FF;
}

Represent self-contained content


<figure>
    <img src="imalink.jpg" alt="A Bart Simpson Comic">
    <figcaption>Caption Goes Here</figcaption>
</figure>

Fake Multiple Borders

You can fake multiple borders with the CSS property called box-shadow. You can check the demo of Fake Multiple Borders on Dabblet


div {
 /* Borders */
 box-shadow: 0 0 0 6px rgba(0,0,0,0.2), 0 0 0 12px rgba(0,0,0,0.2), 0 0 0 18px rgba(0,0,0,0.2), 0 0 0 24px rgba(0,0,0,0.2);

 /* Meaningless pretty things */
 background: linear-gradient(45deg, powderBlue, ghostwhite);
 height: 200px;
 line-height: 200px;
 font-family: sans-serif;
 color: MidnightBlue;
 margin: 100px auto;
 text-align: center;
 width: 400px
}

Escape/Unescape HTML

You can Make Browser escape HTML for you with the following Js Code

var div = document.createElement('div');
div.innerText = '<script>alert("hello world");</script>';
div.innerHTML 
// returns '&lt;script&gt;alert("hi");&lt;/script&gt;'

And You can Make Browser unescape HTML for you with the following Js Code


function unescape(html) {
  var div = document.createElement('div');
  div.innerHTML = html.replace(/</g, '&lt;');
  return div.innerText;
}

Combine both CSS and JS

Now you can combine both JavaScript and CSS into one file like this. To know more about this code please visit MSDN Blog


<!-- /*
    function t() {}
<!-- */
<!-- body { background-color: Red; }

Be Consistent Across Browsers

Be consistent across the browsers and make your code cross-browser friendly.


pre {
 font-family: monospace;
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 /*
 padding: XX;
 margin: XX;
 background: #xxxxxx;
 
other fancy stuffs
 */
}

Resources

10 Small Things You May Not Know About Javascript
Awesome CSS3 Transitions

Have Something to add in this article Comment Below