Tuesday, December 14, 2010

CSS only for safari by browser detection

I've been facing a problem since last few months, which is css only for safari, I've used @media screen and (-webkit-min-device-pixel-ratio:0){ } for safari, but it works for chrome and safari both, that's why, where some content is perfect in chrome but not in safari ( For example in safari the button contain extra space), So it is not a good idea to use -webkit! I've tried for any specific hack, but still I can't manage a single hack to distinguish chrome and safari.

Now I’m using jQuery to distinguish chrome and safari and include a css file (For example safari.css) as
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();

// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
chrome: /chrome/.test( userAgent ),
safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
if(jQuery.browser.safari){
document.write('<link rel="stylesheet" type="text/css" href="css/safari.css" />');
}
</script>

Here It is must to define chrome and safari separately, because chrome and safari both use the webkit. By default if we don't define for chrome, then jQuery.browser.safari is true for both safari and chrome.

Which is working nicely.

2 comments:

  1. Hi Wahid,

    This is zahir here & I have a magento project with me for you, cos I found you can work on it.
    If you are interested in doing it then we will have lots of other projects for you.
    Please add me on Gtalk & also email me back immediately.

    Thanks and Regards
    Zahir Khan

    ReplyDelete
  2. Thanks Zahir, Insallah we shall work together. Take care.

    ReplyDelete