css hack for safari chrome

css hack for safari chrome

Hello everyone, 

I’m going to share the code-sample for “css hack to target”. 
I have an issues to display the log-out popup on-mouse-over on "log-out button" in the different browser (IE, safari and chrome) and we need to fixing using target specific css.
The web-kit browsers are
   1. Safari 
   2. Chrome

Table of Contents


I have need the target specific CSS for different browsers.
  1. CSS class which work on the IE, Firefox.
  2. CSS class which “CSS hack to target” Safari and Chrome browser
  3. CSS class which ”CSS hack to target” only Safari browser.

/*                               
 * We hack to Safari and Chrome Webkit-browser targets.
 * css hack for chrome and safari.
*/

Step 1: CSS class which work on the IE, Firefox

        .prfl_wrapper
        {
            position: absolute;
            z-index: 999999;
            display: block;
            float: left;
            border: 2px solid #ccc;
            width: 64px;
            padding: 1px 2px 0px 11px;
            margin-top: 11px;
            background: #fff;
            border-radius: 5px 5px 5px 5px;
            overflow:visible;
            right: 175px;
        }

Step 2: CSS class which hack to target browser(Safari and Chrome)

          @media screen and (-webkit-min-device-pixel-ratio:0) {
               /* Safari and chrome override */
                .prfl_wrapper {
                       margin-top: 37px !important
                }
          }

Step 3: CSS class which hack to target only Safari browser
        
          @media screen and (-webkit-min-device-pixel-ratio:0) {
               /* Safari only override */
                ::i-block-chrome , .prfl_wrapper {
                 margin-top: 37px !important
                }
          }


For more information you can visit

http://css-tricks.com/snippets/css/browser-specific-hacks/

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^