Fallback CSS for when javascript is not loaded, enabled, or available

[eluser]Madmartigan1[/eluser]
The problem: Ugly pages while waiting for javascript to load, or when js is disabled, broken, etc.

Possible Solutions:

1. Define no-javascript styles in your default stylesheet
- this can sometimes lead to conflict when the javascript does kick in, which is why I don't prefer it

2. <noscript> load a "no-js" stylesheet </noscript>
- This method feels a bit tacky, but I think its the only way you can avoid a FOBUC without using method 1.

3. &lt;body class="NO-JS" o*nload="func_remove_body_class()"&gt;
- Set a class to the body, and remove it with a javascript function onload
- This way, you can target elements like this:
- .NO-JS #some-js-widget {display:none}
- With this method, you can define no-js styles in your default stylesheet without fear of conflict

Does anyone have any suggestions or comments about this, keeping in mind best practices, fastest loading time, best performance, etc. etc.?

Are there any other good solutions?

[eluser]Bramme[/eluser]
If you are having a FOBUC at the moment, I think you need to start elsewhere, before resorting to things like this. Is your content optimized for fast loading? Are you using CSS image sprites? Is your CSS/JS in the write place in the DOM? Are things gzipped?

If you don't know it yet, check out YSlow, it's an amazing tool that will tell you how to optimize load times.

Personally, I strongly feel CSS and JS are two very different things. One should not influence the other. If you have optimized everything, but still have a FOBUC, I think you need to review your core CSS.

[eluser]Madmartigan1[/eluser]
Hi Bramme,

I think you have missed the point. I am strictly talking about situations where javascript is disabled.

I'm not suggesting that I do css styling with js.

Think of the jquery UI for example: What does a heavy-interface page look like when js is disabled? It's probably not pretty, but is it useable?

[eluser]Bramme[/eluser]
You're right, I missed the point.

Why don't you add a "display: none" to all the elements of your UI and show them with JS when the page is done loading?

[eluser]Madmartigan1[/eluser]
Here's an example. We are all familiar with jQuery UI tabs, right?

The tab interface styling is completely handled by css. What the jquery UI does is some DOM manipulation, and adds a bunch of classes and whatnot. Stuff that is then picked up by the css file.

The problem is that without the javascript, you have a relatively unstyled block of markup that you assume is going to look like a tab interface.

I think there should be some fallback styles, but once the UI loads - they will mostly be overridden by the UI stylesheet. At worst there may be conflict between the two, making the interface unuseable.

This is just one example.

The need for "js-only" styles presents itself here. There is the rather obtrusive option of altering the element when the javascript loads (like removing the original class). This is what I did in option 3 from my original post, except in a slightly different way.

With this method, in the tabs example, instead of a "flash of butt-ugly tabs" before the UI loads, you would get a "flash of relatively-decent-looking tabs" that are inheriting styles from body.NOJS, and all those styles get removed when the js loads.

Am I making sense here?

[eluser]Bramme[/eluser]
Yeah you are. If I were presented with the same problem, I'd style my content first, so that it looks right without JS, doesn't have to be much, just the basics, and then let jQuery UI handle the rest. I don't think that should be so difficult (though I don't know the UI tabs html, so not sure how you should handle it exactly).