www.webdeveloper.com
Results 1 to 5 of 5

Thread: browser detection, client or server?

  1. #1
    Join Date
    Mar 2012
    Posts
    39

    browser detection, client or server?

    Hello everyone!

    I am developing a website using CSS3 animations, video, canvas etc and the same website for mobile devices.

    So, depending on the browser the content varies. For example:

    If the user has a mobile browser the content is different.
    If the user is using IE, I can not show animations.
    Etc.....

    I know that this must be a stupid question, but I have read a lot on the web. Is it better to do the Browser detection with server side (PHP) or JavaScript??

    For what I have read, it seems to me that it is better to do in PHP, including files depending of the browser.

    Thank you very much!!!

  2. #2
    Join Date
    Jan 2009
    Posts
    3,346
    It depends on what exactly you are looking for. In Javascript it is best practice to check for feature availability before using it rather than making special cases for different specific browser versions. For layout you can use media queries to alter the way content is displayed including using smaller images or even a completely different layout altogether. For actual content changes you can use PHP to try to detect clients though I'd recommend going with responsive layouts and media queries over a mobile version and desktop version.

  3. #3
    Join Date
    Mar 2012
    Posts
    39
    Hi criterion9! Thank you for response!

    First of all, the application performs CSS3 animations, text shadows etc.... so for older browsers another css file should be showed instead. I could do this with PHP server detection, but I have read about modernizr to perform browser detection on the client-side.

    Using modernizr:

    Code:
    if(!Modernizr.cssanimations) 
    	window.location='nocss3/index.php';
    Right now I am reading about WURLF to perform server browser detection.

    What do you think is the best way??

    Thank you very much!

  4. #4
    Join Date
    Jan 2009
    Posts
    3,346
    I would use graceful fallbacks so that user will get an approximation of the functionality if they can't view the full deal. If a browser cannot support a CSS declaration it won't try so it doesn't hurt to have those in the file sent to a browser that can't handle the animation.

  5. #5
    Join Date
    Jul 2012
    Location
    Vancouver
    Posts
    61
    That's what conditional tags and media queries are for.. e.g;
    <!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->


    You conditionally include stylesheets and javascript libraries (minimize loading time and keep functionality) and it's your job to know when and where certain things might not work, build conditions around that and include modernizr to assist in keeping it running smoothly..

    Relying on too many libraries though isn't cool.. I don't like looking at my cpu monitor and seeing 30% (from 5%) usage on a overclocked i7 on a website. ipad's won't like it either - especially the newer ones, theyre notoriously slow for "bleeding edge" html5/js/css.. I've been to websites on my old e7300 computer that would nearly max the cpu.. that's pathetic

    Whenever checking conditionals and classes/id's don't use jquery either.. you'll notice a speed improvement by using straight javascript (for the love of god). So with your conditionals above you'd so something like:

    if( document.documentElement.className == 'lt-ie9' )

    only use jquery for things that actually save u time.. $('html').hasClass('lt-ie9'); might save u 1 second in typing but adds a lot more cpu cycle - when you start running more complicated apps and checks with numerous loops and what not it starts adding up fast. I recently made a puzzle with jquery and by that change (looping through 25 input boxes to check values) it would actually lag on slower computers

    You end up combining all these conditionals and in your divs/tables or whatever that you want hiden you'd include special tags like hide-mobile, hide-no-js, hide-ie-9, etc. By using your css conditional switch in those css files you include that class thats hide-mobile would be set as display:none; , where as the desktop css for firefox that's included wouldn't declare display:none; so it would still display.. This leaves you with only managing 1 page, instead of multiple sets (your nocss/index.php thing). For the document onload javascript, you'd just check to see if your element is visible before trying to execute whatever it's meant to do to prevent js errors

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles