Jump to content

Conditional Statement, Browser Detection vs. Feature Detection


Recommended Posts

I'm having trouble with cross-browser development. More specifically, padding between Google Chrome, Firefox, and IE. It seems, as far as padding goes, that firefox and IE are having similar issues, and im not sure how to compensate for that. I understand that user.agent detection is not a very reliable way to go about this, and I've heard that feature detection might be better. How exactly should I go about this? What features should I be detecting for? Or am I misunderstanding the concept of feature detection?

Link to post
Share on other sites
function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

Here is javascript code.

USAGE 1. Copy and paste the line below, inside <head> and </head> tag <script src="css_browser_selector.js" type="text/javascript"></script> 2. Set CSS attributes with the code of each browser/os you want to hack Examples:
  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win - Microsoft Windows (all versions)
  • vista - Microsoft Windows Vista new
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • ipad - iPad new
  • webtv - WebTV
  • j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • blackberry - BlackBerry new
  • android - Google Android new
  • mobile - All mobile devices new

Available Browser Codes [browser]:

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5
  • ff3_6 - Firefox 3.6 new
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron

Edited by Haris S
Link to post
Share on other sites

All the browsers should render padding, margin and borders the same way. You should not need Javascript to modify CSS. The browsers only render differently if you have an incorrect <!DOCTYPE> declaration.

Link to post
Share on other sites

But! not all browsers use the default same padding and margins for elements, that is why, usually elements such as these are targeted and reset to zero, OR the universal selector is used to reset all margin and padding to zero

*{ margin:0; padding:0;}

then you set your own margins and padding to your preference to elements, so they will appear all the same in ALLl browsers.

Link to post
Share on other sites

Typical example is margins for paragraph,(I may have this wrong way round, about how margin are applied by specific browsers), some browsers apply margin: 1em 0; top and bottom, others say IE, margin-bottom: 1em; now both will give the same distance between paragraphs from the second paragraph to the last. BUT! the first paragraph will be 1em from the top of the page or containing div element, but the second will butt right to the top edge of page or div container.

*{ margin:0; padding:0;}

resets all elements margin etc to zero, then you define you own

p { margin: 0.9em 0; }

Now! all browsers will follow your own styling for the paragraph element, and not the varying default setting depending on browser by themselves for the paragraph element.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...