For those not familiar with my posts, I currently work in an environment where I can safely ignore IE and hence I’ve begun heavily working with CSS 3 selectors. I’m starting to come across problems and questions on implementation. Most of these are of a design philosophy nature - what I’m doing isn’t technically wrong, but I would appreciate some outside input on what I’m doing - and I’ll present what I’m doing and why.
My project today deals with a ledger table (yes a table - tables are for tabular data after all) that I’m coding some javascript for to make it act like a ledger. In short, I’m having PHP include the rows both in a clean for reading nature and with input elements. When the cell gets clicked we change over to an input element. When the user leaves the cell we use the blur event to perform the updates.
The idea is to let the user play with the ledger before committing the changes onto the server.
So here goes
/**
* Start with a given width for cells on this ledger table.
*/
#ledger td {
width: 100px;
}
/**
* This is awkward - better would be the ability to,
* in addition to the N formulas, to have a comma
* delimited list like this
*
* #ledger td:nth-child(1,7)
*/
#ledger td:nth-child(1), #ledger td:nth-child(7) {
width: 80px;
}
#ledger td:nth-child(2) {
width: 160px;
}
#ledger td:nth-child(5), #ledger td:nth-child(6) {
width: 50px;
}
/**
* Now the cells that the user can click to have an even should glow
* on hover. As I noted above comma lists would help here.
*
* #ledger td:hover:nth-child(1,2,5,7)
*
* would be a LOT easier to read not to mention quicker to write.
*/
#ledger td:hover:nth-child(1), #ledger td:hover:nth-child(2), #ledger td:hover:nth-child(5), #ledger td:hover:nth-child(7) {
background: #ffc;
}
Up to this point standard stuff. But now for the approach I’m unsure of:
#ledger td:first-child.Active select, #ledger td:first-child:not(.Active) div {
display: block;
}
#ledger td:first-child:not(.Active) select, #ledger td:first-child.Active div {
display: none;
}
The corresponding Javascript (prototype framework) is this:
Event.observe(window, 'load', function(){
$$('#ledger td').invoke('observe', 'click', function(ev){
$$('#ledger td').invoke('removeClassName', 'Active');
ev.findElement('td').addClassName('Active');
});
});
So only one cell is active at a time. But as you see, visibility behavior has now been transferred to CSS by taking advantage of the :not() selector.
I think this is ok - it moves towards a MVC framework with the HTML code playing Model, CSS playing View and Javascript playing Control. But CSS still needs some help from Javascript to get the job done, and I worry about breaking the code up too much and the complications that await.
not() is very powerful, but it seems a little out of place in a ‘language’ lacking variables and control structures. Perhaps this can be issue can be revisited for CSS 4. Then again, a preparser like LESS is becoming increasingly attractive to me to reduce sheet length down some.
Thoughts?