Monday, September 6, 2010

CSS Transform Functions Need More Work

I wonder how many people writing CSS look at the transforms spec and wonder why it doesn't have an long-hand property names like "transform-scale" or "transform-rotate". It really reminds me of the old Microsoft specs for their Visual Filters. Is Apple really the new Microsoft? When did the W3C start changing the property arguments convention?

Don't get me wrong, I think the short-hand version is great and easy to use, but can we developers/designers get a little bit more control? So that we can override certain properties without having to redefine the entire transform? It's like having to redeclare the border-bottom-width in order to change the border-left-style.

Furthermore, why can't it support multiple origins for seperate functions? Why can't I declare "transform-rotate-origin: 0 0" and "transform-scale-origin: bottom right"? Is that too much to ask? I realize that at least in the WebKit version all the functions are combined into a single matrix, which probably creates quite the huge math headache for accomplishing multiple origin points on a transformation. But I am pretty confident that it could still be accomplished by not combining them all into a single matrix, but instead applying them sequentially. Though admittedly that may have some unexpected results on the transformation, so novices might wanted to avoid such an operation.

This all just might be my own little pet-peeves, but I pretty much feel the same way about the W3C Gradients spec too. I don't have any really good suggestions on how to fix this one, but it seems overly complicated to make changes to the gradient being used. Maybe they could try something like "background-image: linear-gradient()", then the designer/developer could define the properties of the gradient as CSS properties like "gradient-start: 0% red; gradient-end: 100% blue;" It's not a perfect solution I know, but it would be much easier to create subsequent gradients with small changes that don't require a redefinition of the entire gradient. Why would I want to do something like that you might ask? Maybe I have a list of items and I want to use a different color gradient on some of them, instead of redefining the entire gradient I would be able to update only a portion of the gradient.

Being a big fan of telling other people "It's open source, contribute!" I have looked around at Gecko and WebKit source code for how I could create a patch and submit it for adoption in the respective rendering engines, hoping to get my contribution accepted by all. But I must admit to being quite lost in such a large code base as Firefox and thoroughly confused by how to add it into WebKit as well. So if anyone wants to help me figure that out, or if you think it's a great idea and decide to take up my cause, I would greatly appreciate your generosity.

No comments:

Post a Comment