tags:

views:

63

answers:

4

Is there a problem to using javascript for styling content?

My website requires javascript. There is this text on my website that I want vertically centered. The text could be either 2 lines or 3 lines long. With javascript I could vertically center it pretty easily. The CSS ways to vertically center it seem complicated and include IE hacks.

So, is there a downside to me using javascript for this styling, considering I have already decided that my website will require javascript?

+4  A: 

The downside is that if you have any long-running page, say an ad fails to load, etc hanging the document.ready event...your styling wouldn't be applied until the document completed rendering and the javascript then ran. (Note: This assumes your script fires in the ready event, usually the case since you'd want the elements to be there)

Basically you'd get a flash of non-styled content in the case of anything delaying the ready event. Whether that matters, up to you, but personally I'd stick to CSS where possible.

Nick Craver
A: 

I don't think there is a downside. If you say it's going to be easier and considering that JavaScipt is the de facto client side language, go for it. Just make sure it'll work on modern browsers...

Just a point: CSS is meant to be used to do this kind of work, but it's not a rule. There are exceptions as is your case.

Leniel Macaferi
+3  A: 

Sometimes using JavaScript for seemingly simple styling is unavoidable; if I have to use JavaScript in this kind of scenario I just try to make it degrade as well as possible, ensuring that whilst a user without JavaScript doesn't get the full experience from the website, they don't get a bad one either.

Steve
+1  A: 

I'd personally use display: table-cell, and vertical-align:middle. Then in IE8+ and all other browsers it's centered, in older ones it won't be, but generally things like vertically aligned text aren't that vital to the design anyway.

Rich Bradshaw
In this scenario I'd probably also do this too, and if concerned by <IE8 I'd back it up with some conditional JavaScript.
Steve