With reference to my previous post Browser detection using Jquery javascript we can apply browser specific CSS to HTML elements.

Use CSS hacks below.

Chrome:

    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
        .header{
          width: 230px;
        }
    }

Safari:

     @media screen and (-webkit-min-device-pixel-ratio:0) {
        .header{
          width: 230px;
        }
     }
                     OR

     @media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
        .header{
           width: 230px;
        }
      }

Firefox:

     @-moz-document url-prefix() {
        .header{
          width: 230px;
        }
     }

IE10 & IE11:

      @media all and (-ms-high-contrast:none)
       {
           .header { color: green } /* IE10 */
           *::-ms-backdrop, . header { color: red } /* IE11 */
       }

CSS 3 rotate() transform property rotate’s div consider axis of rotation at center. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

In above example, we have used keyframe animation with rotate transform. Div is rotating with axis of rotation at center. To rotate div at one of the corner like clock’s hand, use transform-origin property of CSS 3. This property shift’s axis of rotation at corner depends on what value we are giving. This will shifts axis of rotation to right side of div. See below example.

Example:

<style>
   .demo { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto;
    -webkit-animation-name: rotation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: rotation;
    animation-duration: 4s ;
    animation-iteration-count: infinite;
    transform-origin:100% 100%;
   -webkit-transform-origin:100% 100%;
   -ms-transform-origin:100% 100%;
  }
@-webkit-keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

  </style>
<div class='demo'></div>

We can apply hover effect to only enabled buttons using :not selector of css3.

Example:

.button:hover:not(.disabled){
  background:#ccc;
}

pointer-events: none is a css property which disables all events like hover, click, touch, mouseenter, mouseleave etc. on any html element.

Example:

.disabled{
  pointer-events:none;
}

In above example, div is having class disabled so none of the events will work on this div. Advantage is that if you already have click event written in javascript and if you want to remove click event then no need to edit javascript. You can just add style=”pointer-events:none;” to that element.