Over the last three years I have slowly been learning JavaScript and one of my favorite and still somewhat most confusing ideas go grasp is JavaScript’s use of Prototyping with Objects. I get the basics that a prototype is a copy of the original object with all it’s properties, but I haven’t been able to use it much in my day to day.

As I’ve experimented with CSS3 the one thing I’ve really struggled with is the crazy amount of extra code you end up writing in order to achieve cross-browser chi. Then it hit me, what if prototyping was extended to CSS. The idea isn’t that complex, but it’s all in my head at this point. Here is the basic idea:

I first start by defining a class that has a drop shadow property, and it’s set for all browsers, then reference that class using a prototype attribute:

.shadow-class {
	-moz-box-shadow:0 1px #000;
	-webkit-box-shadow:0 1px #000;
	box-shadow:0 1px #000;
}

#my_div { prototype:".shadow-class"; }

The basic idea is to add the attribute “prototype” and it accepts an existing Class or ID and then adds those styles to the element.  This is along the lines of variables in CSS, but it’s a little more complex. If any browser vendors would like to play around with the idea I would love to see it.

What do you guys think? Do you think it would be worth while and does it make sense to you?