Menu
I'm using jQuery in the examples below, but my question applies more generally to any situation where javascript is used to display something that would be missed if javascript wasn't enabled.
Let's say I want to fade in some text when the page loads:
.fade-in { opacity:0; }
<div class="fade-in">FOOBAR</div>
$('.fade-in').fadeIn();
But what if the client doesn't have javascript enabled?
I don't want the text to remain invisible, so maybe I set the CSS to the end state as a fallback, and then UN-set it with javascript prior to the animation. This way, users without javascript just see normal text (without a fadeIn), and users with JS see the fade.
.fade-in { opacity:1; }
<div class="fade-in">FOOBAR</div>
$('.fade-in').css('opacity', 0);
$('.fade-in').fadeIn();
This works, but in most cases it will result in an unpleasant "flicker" between when the CSS display property is set and when the javascript unsets it. In the above example, a user with javascript working normally would see the "FOOBAR" appear for a split second, then vanish, then fade in.
Is there a best practice for this which doesn't result in the flicker OR sacrificing no-JS users?
Please do not fixate on the trivial example above. That is just to demonstrate the concept. I'm looking for a broader strategy for handling these cases. Also, I don't want to debate the merits of progressive enhancement or whether it is or isn't necessary to support the no-JS users. That's a question for another thread(s).
Update: I know tools like Modernizr can be used to add .no-js classes, etc but I'd prefer a solution that does not rely on these libraries.
462
If the user doesn't have JS enabled, create a stylesheet for him:
<head>
scripts
<noscript><link href="no-js.css" /> </noscript>
</head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
