I consider lightbox functionality to be related to the layout of the content, and hence logically a part of CSS rather than javascript. In CSS3 world, I like to use javascript for the tasks not related to the layout: such as making ajax queries, manipulating user inputted data, etc.
Is there a case for relying on javascript for functionality such as lightbox?
If you want to do something other than show a bigger version of an image (like fetch extra data about it for captions), just CSS won't cut it. Remember that "lightbox" isn't just the effect, it's a UI control.
I am unable to make up my mind here.
As atlbeer says, following is the standard breakup of responsibilities:
- HTML = Content
- CSS = Style / Design
- JS = Interaction
As argued elsewhere, lightbox straddles JS and CSS domains.
I was thinking that in CSS3 world, we should have slightly different breakup of responsibilities (subject to resolving performance issues)
- HTML = Content
- CSS3 = style/design and changes in style/design
- JS = interaction other than purely style/design changes
I see that this breakup may lead to confusion in some situations. (Though I still find it more appealing for lightbox example)
So, let me make up my mind when I have more experience with CSS3 :-)
Minor reasons: less performant than Javascript solutions (the transition is sluggish and jittery in Chrome for me) and the fact that I have to click a little target to shrink it back, whereas most Javascript solutions will let me hit Escape or click elsewhere on the page to shrink it back.
Major reason: Separation of concerns: CSS is for appearance, Javascript is for behavior. They don't work well trying to do the other's job. This is touched on by the shrinking problem I mentioned above - it's easy to watch more events to make the behavior of Javascript functionality more flexible or more user-friendly, but not so much in CSS.
That said, it's a toy demonstration of transitions; it's cool that the bear dances, even if I wouldn't take him on Dancing with the Stars.
I also noted the sluggishness that you point out. Do you know the reason? Is it something that could be corrected by changing some parameter in the CSS?
Lightbox functionality encompasses the JS domain (since user is interacting with the page) as well as CSS domain (since the change that is happening on the page is purely of style/design).
So, the breakup which you have given does not unequivocally argue for the use of JS.
