Please note: the CSS parser is complete and documented in this post
I had an idea to write a CSS parser to allow custom jQuery attributes, since a lot of the jQuery I use is more presentation than behavior, and the redesign of the YI website allows for switching stylesheets, which may require different plugins to be applied. My idea would be to allow something like:
div {
-jquery-round: 5;
-jquery-gradient: {from: '#008800', to: '#000088'}
}
But I never did anything about until Andy Kent developed JSS which does something similar for CSS selectors that a browser can’t handle but that jQuery can. His code also includes a cache for selectors that implements partial selector caching (thus div span img would also search the cache for div and div span as well). I emailed him back and forth a few times, and made some suggestions; my best css parser and selector cache are available here (look at the code and use Firebug to look at the console). I still haven’t got the custom jQuery stuff together yet, but the pieces may be useful right now.
Please note: the CSS parser is complete and documented in this post
Hacking at 0300
Thoughts on web design and programming from a very occasional volunteer webmaster
Free Medical Advice
Ciantic says:
You know, that is still very valid idea.
Only drawback is the double HTTP request for CSS files, first time normally and second time ajax.
June 22, 2010, 1:50 amDanny says:
@Ciantic:
June 24, 2010, 10:48 pmYes, that’s a disadvantage (even more than the double request, the same-source security restrictions make it harder to use). But I don’t see any way around that. I did complete the CSS parser (in this post).
–Danny
Pavel says:
You can include a “” tag and initilize your JavaScript library with file_get_contents(‘my.css’) on the server-side, so no double request at all.
On the client side you can request CSS by Ajax once, than parse it and dynamically generate rules and stylesheets without any second request. No double requests at all.
February 23, 2011, 5:48 pmPavel says:
Doh! “You can include a “[link rel=”stylesheet” type=”text/css” href=”my.css”]” tag…”
February 23, 2011, 5:48 pmDanny says:
@Pavel:
February 23, 2011, 7:46 pmYour first solution is interesting: create a server-side CSS parser and generate a series of javascript statements to be included in the served file. Two downsides: you can’t take different actions based on browser capabilities, like implementing CSS3 selectors: you’d always rather use real CSS than javascript. It’s faster, always “live” and can be undone just by changing the element’s class. The other downside is including javascript in an HTML file can be quirky, with potentially non-validating symbols like ‘<' and '&'. You could generate a .js file as well, but things start getting real complicated.
The second solution, not using a <link rel="stylesheet"… at all, just executing the javascript to create the link elements on the fly, would be far slower than having the browser read and implement the CSS itself.
In the end, the browser should cache the stylesheet so the second, AJAX, request for the file should take minimal time.
–Danny