Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Browser hacks using CSS

Posted in CSS, CSS Interview Questions

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 */
       }

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Rotate div at Corner CSS 3 transform

Posted in CSS, CSS Interview Questions

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>

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Object tag z-index not working in IE

Posted in CSS, CSS Interview Questions, Html

If you are playing any flash/brightcove video using object tag and you want to show custom play button or image on video you can use z-index property to adjust play button position. This works fine in chrome and Mozilla except internet explorer. In IE object tag won’t take any css property. See below example

<object type=”video/quicktime” data=”http://localhost/videos/qtmovie.mov” width=”340″ height=”280″>
<param name=”controller” value=”true” />
<param name=”autoplay” value=”false” />
<param name=”wmode” value=”transparent” />
</object>

By default, wmode property is set to “transparent” to apply z-index or any css property set wmode property to “opaque”

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

pointer-events: none in css

Posted in CSS, CSS Interview Questions

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.