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 comment
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 comment
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 comment
Share on other sites

Yeah I have the correct doctype. I had the code validated at http://html5.validator.nu/, and it says:

The document is valid HTML5 + ARIA + SVG 1.1 + MathML 2.0 (subject to the utter previewness of this service)
I have it declared in this way :
<!DOCTYPE html><html lang="en">

but now im confuzzled. did I miss something? Is there

Link to comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...