If you could add any ele­ment or attribute or selec­tor to CSS what would it be? I’ve asked myself this a lot (usu­ally it’s been in reflec­tive moment after try­ing to get some crazy lay­out to work, but that I know just isn’t going to happen).

I’ve often won­dered that if cer­tain things were fully sup­ported in CSS (like border-radius) then we wouldn’t have to bend over back­wards imple­ment­ing crazy things like the slid­ing doors method for rounded look­ing but­tons in all browsers.  The idea of new CSS func­tion­al­ity is to be able to write more seman­tic code, with­out the need to wrap cer­tain ele­ments in use­less DIVs or SPANs just to give a cer­tain effect.  In a list I’m going to list ideas of what I think would make CSS much more effec­tive as a designer.  In no way am I stat­ing these as com­pletely orig­i­nal and my own.  Any­thing from selec­tors to new func­tion­al­ity are accept­able, and if you feel some­thing should be on this list that is not, be sure to let me know in the comments.

Mul­ti­ple Back­ground Images

If this were imple­mented, it would be much eas­ier to add com­plex tex­tures to a sin­gle DIV that has a dynamic size.  Say the top of a sec­tion needs a slight gra­di­ent, as does the bot­tom.  As of now, you’d have to have two DIVs (one as a wrap­per), both con­tain­ing the back­ground images needed for these gra­di­ents (on for top, the other for bottom).

http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering

Native Gra­di­ents as Backgrounds

As it stands, we can use solid col­ors or images for back­grounds.  It’s impos­si­ble to have a gra­di­ent back­ground image stretch for the entire heights or width of a dynam­i­cally size ele­ment, so work­ing around this using seman­tic code is out of sight.  If there was a way to set points of begin­ning and end, along with color val­ues (and pos­si­bly even alpha) this would be a great answer to an immense need.

http://webkit.org/blog/175/introducing-css-gradients/

Dynamic Back­ground Image Size

I know that it’s not a good gen­eral prac­tice to have CSS resize your images, but I think that if we were able to scale the back­ground images based on the size of the ele­ment, using attrib­utes like fit­ting to height or width as well as keep­ing aspect ratio, it would open up a whole lot of pos­si­bil­i­ties for lay­outs.  Granted, I don’t think I would want it to scale up the images (for obvi­ous reasons).

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

Expressions/Variables/Computing

Although some might think this is a bad idea, there have been many a times where I wish I could use PHP in my CSS.  Not only would it make tem­plat­ing so much eas­ier (imag­ine cre­at­ing a palette of color com­bi­na­tions, and then being able to mod­ify your color scheme on the fly by chang­ing only a cou­ple val­ues), but would allow for much richer pos­si­bil­i­ties in user gen­er­ated styles.

What lan­guage would be used for this?  Or would a knew lan­guage be created?

http://disruptive-innovations.com/zoo/cssvariables/

http://gadgetopia.com/post/2774

:parent(x) Selec­tor

It would be extremely nice to be able to select the par­ent of a cer­tain ele­ment.  There is cur­rently no way to do this.  You are only allowed to move down the tree, and not up.  I have some­times imple­mented jQuery to select par­ent ele­ments and assign a class attribute.

http://journal.adityamukherjee.com/essay/css-parent-selector-or-reverse-selector/

For the time being, this is all that I can think of.  If you have any sug­ges­tions, feel free to let me know, and I’d love to add it.