0

Is it not good to detect devices, operating systems and browsers Versions by User-agents?

Can it create any problem in caching like if we set expire headers and use wordpress W3 Total cache plugin

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

1 Answers1

3

Detecting browser version, especially via user agent strings, is a very bad idea. Amongst other things, this approach often fails with new versions of opera and chrome that are now in version 10+ because of the double digit version number.

It's better practice, and more informative, to instead use feature detection. Which will often often give you the information you're trying to determine.

Have a look at the Modernizr library by Paul Irish (of jQuery and Chrome) and others. Mix this with some of the techniques from the HTML5Boilerplate will generally suite all your needs, whilst being cross browser compatible.

You can also use CSS3 @media-queries for adjusting your site to mobile or small screen devices.

xzyfer
  • 13,937
  • 5
  • 35
  • 46
  • +1 Thanks but I'm not only talking about cross browser compatibility. I'm talking like to detect Sarari on Windows, Safari on OSX and Safari on iphone and Safari on ipad and want to give different style to each. – Jitendra Vyas Feb 23 '11 at 12:35
  • You would use CCS3 media queries for applying different styles to different sized screens and orientations on mobile devices. As applying different styles to the same browser on different OS, it would be a better approach to style the elements you want to control (i.e. buttons in safari macosx) generically so they look the same on all systems. Or better yet just live with it. Certain things are supposed to look different between browsers/os, this a feature not a bug. – xzyfer Feb 23 '11 at 12:41
  • Also, regarding the different text rendering between windows and mac osx, if you look at the YUI fonts css (also included as part of the html5boilerplate reset), it does a great job at normalizing text across browsers and os' – xzyfer Feb 23 '11 at 12:42
  • @xzyfer - But what if I want to give different CSS for Firefox for windows (Desktop) and Firefox for OSX (Desktop) when screen size is same.? I know about CSS media queries and IE conditionals already. My question is little different. – Jitendra Vyas Feb 23 '11 at 12:54
  • This is curious, can I ask why? Simply put, there isn't a completely reliable method for doing this, nor is it encouraged. You could however look at the mozilla development docs. I think you might be able to use vendor prefixes to do what you want to some extent. – xzyfer Feb 23 '11 at 13:00
  • I made change in the question – Jitendra Vyas Feb 23 '11 at 13:00
  • To answer your question, caching will not affect user-agent strings since it is part of the request. Each browser uses it's own cache, so cached styles for firefox won't affect how the page renders in chrome, or ie. So the only have to deal with the normal caching issues. Nothing specific to browser sniffing. – xzyfer Feb 23 '11 at 13:05
  • Regarding using far expires headers. One thing you might have to do is store all styles for all browsers together. As the specific css files can be cached at many different points between your server and client's browser. So separating firefox, chrome, and ie styles into different stylesheet will almost certainly cause unexpected results. – xzyfer Feb 23 '11 at 13:07