load css at the runtime

Question

I am creating a web based application which will be running on both the computer and the handheld devices.

I am writing two css files one for the pc and another for the handheld device.

On the onload event I am calling a external javascript I have written the code to dynamically load the css based upon the user agent.

When I run my application on the google chrome developer option to audit the page it says to avoid css loading from javascript. Can please any one tell me is this approach correct in terms of performance or is there any other solution.

See http://stackoverflow.com/questions/1248756/css-media-type-how-to-load-css-for-mobile — SAJ14SAJ, Nov 23 '12 at 06:02
I need to check for media queries as it comes under css3 because as I am having handheld devices of older versions it will not support css3 faetures. — Abhijit C, Nov 23 '12 at 06:11

score 0 · Answer 1 · answered Nov 23 '12 at 06:02

You need to learn about responsive web design.

Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Ref: http://en.wikipedia.org/wiki/Responsive_web_design

Responsive web design tutorial: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

score 0 · Answer 2 · answered Nov 23 '12 at 06:03

What I understand from that warning is that instead of using JavaScript to load your CSS files, that you use the markup to do it.

One way of accomplishing this is to add a class to your body element from JS and use that class in CSS to determine how the elements get styled depending on the device. Another way would be to use different CSS media queries for dekstop and mobile.

Most of time if not always, you can avoid loading CSS from JS and you get the advantage of being able to minify everything in one single file to improve performance even more.

As a general tip I always do as much as possible with CSS, and responsive designs are perfectly doable with no JS.

score 0 · Answer 3 · answered Nov 23 '12 at 06:04

0

Did you know about Media Queries?

answered Nov 23 '12 at 06:04

Ahmad Alfy

13,107
6
65
99

score 0 · Answer 4 · answered Nov 23 '12 at 06:32

As other people have suggested, you can use a responsive layout, media queries, server-side user-agent detection or a combination of them to deliver a good experience in both desktop and mobile browsers.

But you also wanted to know if you took the wrong approach and here are some of the reasons why it might not be the best approach:

The content will be unstyled until the correct stylesheet has been downloaded and applied. If they are on a slow or flaky connection it can easily take 10 seconds for the stylesheet to load during which time they are looking at a jumbled mess.
Just knowing the user-agent is not probably enough. What is their screen resolution? Does the browser take up the full screen?
Loading the stylesheet is an extra request. Avoid unnecessary requests, particularly on mobile networks where network latency contributes significantly to the take to complete each request.
Javascript may not be enabled - if the user has disabled Javascript or their browser doesn't support it. What happens to your website?

If you are targeting modern browsers, you should try to use a responsive layout and media queries. Try to avoid user-agent string detection, but if you need to use them for edge cases handle it server-side as part of the original request.

Thanks Enrico, My requirement is for older devices like browser having IE 5.5, 6 or 7. Thats why I am not able to use media queries. — Abhijit C, Nov 23 '12 at 06:49

load css at the runtime

4 Answers4