/    Sign up×
Community /Pin to ProfileBookmark

browser detection, client or server?

Copy linkTweet thisAlerts:
Oct 25.2012

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!!!

to post a comment
PHP

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@criterion9Oct 25.2012 — 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.
Copy linkTweet thisAlerts:
@hebrerilloauthorOct 25.2012 — 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:

<i>
</i>
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!
Copy linkTweet thisAlerts:
@criterion9Oct 25.2012 — 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.
Copy linkTweet thisAlerts:
@mistin_caNov 01.2012 — 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
×

Success!

Help @hebrerillo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...