Extending the list of CSS pseudos
I know what will be your first reaction. Your first reaction will be one of the following ones (the two first ones if you are one of the inventors of CSS, and the fourth one if you are a swedish mozillian)
- this is ugliest thing in Earth's History and CSS should not rely on JS
- CSS should not be turned into a programming language
- think of the grammar, the parser would need to know the extensions before parsing a sheet
- possible deadlock if a rule uses such a user-defined pseudo and applies a behavior that makes that pseudo false
- why do you need to extend CSS pseudos' list anyway?
I think we could have a simple à-la-XBL mechanism to extend the list of pseudos and pseudo-notations in CSS. The definition of a pseudo could be JS-based and embedded in a specific XML dialect, just like XBL. That XML would define a method taking one single argument, the element we try to match the pseudo against, and it would reply a boolean. In the case of pseudo-notation (e.g. :foo(token)), extra arguments would be needed. Some typing information for the arguments would also be needed to allow grammar checking. Now back to the concerns above:
I won't discuss the first one, we won't change the Web now. The second one is IMHO irrelevant, CSS itself remains untouched. The third one is probably strictly implementation-dependant. The fourth one is a real problem but probably a marginal one; after all, we can already have a behavior applied depending on the existence of an attribute and removing that attribute... The fourth one is the argument that people who never go beyond their limits use. I can think of dozens of improvements to the list of CSS pseudos that **I** could use but that some other people could dislike. So an extensions mechanism is the best answer.
Before posting a comment, think three, four, ten times please. It would be so cool to be able to write something like
<parameter name="childName" type="element_name"/>
var childList = elt.childNodes;
if (!childList || !childList.length)
var l = childList.length;
for (var i = 0; i < l; i++)
if (childList.item(i).nodeName == childName)
And just apply it before your stylesheet with a LINK element or declare it in your stylesheet using an @import-extension url(..); rule.