This plugin allows quick creation/manipulation of CSS Rules, in a "jQuery-way". It includes features like chaining, iteration using each, selectors with context. Many functions are available, like slice, pushStack, not, add, remove, append, css, and some more. As far as it has been tested, the plugin should perform well in most browsers, some specials methods still need some more testing. Feedback is much appreciated.
Links
Downloads
- jQuery.Rule 1.0.1 Zip(all files and docs)
- jQuery.Rule 1.0.1 Source(to learn or test)
- jQuery.Rule 1.0.1 Minified(recommended)
- jQuery.Rule 1.0.1 Packed(for no gzip)
28 comments:
This is really neat code, and I have a great idea of how to use it to implement 'client-side hierarchical CSS,' like the SASS plugin for Ruby on Rails. However, I do note that the code does not work on the iPhone.
Hi
I'm glad that you like my plugin, and you find it useful.
I haven't tried it on any iphone. I suppose DOM CSS rules have some quirks in Safari 3 IPhone. I did test it on Safari 3 Windows, and it worked perfectly.
Cheers.
Hi,
Really good piece of code, great ideas, nice use of the power of jQuery... I love it!
I've found one minor "bug" and proposed some feature change > see the issues @ the jQuery plugin's page.
I'll post some code about new features too (import/disable sheet).
It could be nice to talk about the posibility to work on media too.
Hi Adrien,
I see you added many bug reports, thanks for that!
I'll try to check them ASAP (I'm not very free but I can handle).
Enabling and disabling sheets can be done with the attribute 'disabled'. Did you get any problem with it ?
If you want to contact me, the email is in the header of the source code (of jQuery.Rule), That's my GTalk.
Cheers Adrien
Man, I was just considering writing this plugin myself, because I thought it would be way cool if you could actually edit the CSS in general, instead of adding style properties to every matched item.
Then I found yours, which saves me many hours of work! Neat!
Thanks Yereth
This plugin required a lot of work actually, DOM CSS rules are very very hard to manipulate in a safe and normalized way, among all four most used browsers.
Enjoy :)
Once again, excellent work Ariel. At first, I was thinking, "when would I use this?" But after realizing that it is actually changing the RULE itself, it can come in quite handy, especially if AJAX-generated content needs to be re-styled, so to speak.
Using $.rule to add styles fails when the css selectors contains commas themselves:
$.rule(" p{ margin: 0 } ").appendTo('link') // works
$.rule(" p,a{ margin: 0 } ").appendTo('link') // fails
Why do rules need to be comma delimited? It can split on } instead to break up the string into rules.
Hi Aman
I actually fixed it, they don't get splitted by comma anymore.
But MSIE doesn't accept comma separated selectors within the function addRule.
I commented in the changelog, that this can be worked around, by splitting them manually, but that would yield more rule than expected, and different results depending on the browser.
That's why, while comma separated selectors are recognized.. they still error.
I advice you to just create two rules, or to use a class instead.
Cheers
This patch fixes the issue with commas in selectors, and makes commas optional when passing in css (should be backwards compatible though): http://p.ramaze.net/1339
@@ -99,8 +99,9 @@
return r;
},
clean:function( r ){
- return $.map( r.split(/\s*,\s*/), function( txt ){
- return $.rule.appendTo( txt, storage );//parse the string.
+ return $.map( r.split(/\s*}\s*,?\s*/), function( txt ){
+ if (!txt) return;
+ return $.rule.appendTo( txt+'}', storage );//parse the string.
});
},
parent:function( r ){//CSS rules in IE don't have parentStyleSheet attribute
Thanks Ariel. I upgraded to 1.0.1 and was having some issues because of newlines and no return in the $.map. This patch fixes my issues: http://p.ramaze.net/1340
@@ -111,8 +111,8 @@
},
clean:function( r ){
return $.map( r.split('}'), function( txt ){
- if( txt )
- return $rule.appendTo( txt + '}' /*, storage*/ );//parse the string, storage implied
+ if( !$.trim(txt) ) return;
+ return $rule.appendTo( txt + '}' /*, storage*/ );//parse the string, storage implied
});
},
parent:function( r ){//CSS rules in IE don't have parentStyleSheet attribute
I think it would be worth adding in an IE only hack that splits comma selectors into multiple selectors.
Thanks for taking the time to make a diff.
I assumed you had the last release.
So, I don't now much change in your diff, you're only trimming 'txt' which I don't think is crucial.
As I told you, If I split the selectors on IE, it will generate more rules than on the rest of the browsers.
Then if you use methods like .eq() or .filter(), it will yield different results, leading to unexpectable problems/errors.
What do you think ?
Without the $.trim() and return, I get errors, especially if the css has trailing newlines.
I think slightly different but working results in IE is better than it just breaking.
Also, my first patch included a regex instead of simply splitting on '}'. That might be worth using instead, to keep backwards compatibility with people still using commas to delimit css rules.
Finally, the documentation at the top of the file still says to use commas when provides rules to append to the page.
Ok thanks :)
I'll review this soon.. I need to think about it.
Cheers
Dear Ariel,
Thanks for your code. I have ahd a couple of problems:
1. In IE, it seems to be necessary to specify the CSS rule using capitals for the HTML elements, e.g.
DIV.resMed#main DIV#detMedia
even when in the style sheet it is in lower-case. Is this right? Firefox seems to be case-insensitive.
The other problem was that I sometimes got an error which looked like it was because of a cross-domain AJAX request, when accessing styles in an external stylesheet (i.e. using the 'link' element), even though the style sheet was on my domain. Strangely, it only happened some of the time and was quite difficult to replicate (although if you want I will try). This problem cleared up when I put the rule I wanted to change in a 'style' element instead.
Thanks again anyway - a useful plugin and an underestimated technique,
Charles
Hi Charles
I never met the situation you first describe.
Do you think you can prepare a demo reproducing the problem ?
About the second issue... I don't recall very well, but I think it's not possible to access some link nodes, or they were read-only, something like that.
I'm not sure if it was a cross-domain thing, or any link.
The demo of this plugin does modify items in the link, so I suppose it is possible in some cases.
Cheers
Great plugin.
However, it seems like its not working with the latest jQuery 1.2.6. If I backrev to 1.2.1 (which is the version your demo is using), it works fine.
I haven't actually tested.
What is the problem you see ? nothing works ?
Just the animation stuff is busted. (does nothing)
(Sorry, should have been more specific. I hate those vague 'it doesn't work' messages. )
Oh, also, could you expound upon the difference between your "link" and "style" sections? I'm confused as to why there are 2 places to store css definitions.
The 2nd (optional) argument of $.rule() is the context (just like with jQuery).
You specify where to look for rules that will match the selector.
$.rule('foo','link') will retrieve all the rules inside link elements, that match the selector 'foo'.
The context can be any jQuery selector.
if none is specified, it means all.
Hi Ariel,
great, useful little plugin. Keep up the good work
Hey thanks Ariel for this plugin.
I seem to having some "Security Error" exceptions being thrown in FF using jQuery 1.2.6:
eg:
try { $.rule('span{font-size:30px;}').appendTo('link'); } catch (e) { alert(e.message || e); }
Will show 'Security Error'
It seems to work fine in IE7 however.
Yeah, is the link included from another domain ? that's likely to cause a securityError.
Even if it's local, might happen too, I don't recall.
You can use an empty style (can be created with js) to achieve the same effect.
Hi Ariel -
Great helpful plugin.
I am having trouble with the conversion of rules to lower case. Since IE is case sensitive, getting and then re-applying the css is problematic when the classes applied to elements has any upper case in it.
Is there a critical reason why .cssText() and outerText() have to return everything converted to lower? e.g. if I remove the toLowerCase() will it blow up?
Thanks
Eric
Hi Eric
IE makes it all uppercase (as far as I remember), so either way, the case won't be respected.
Hi Ariel,
this is excellent plugin.
Is it possible to reset all changes made with this plugin, and keep other css rules (from css file)?
Thanks in advance!
Hi
You could simply add all them to an empty style tag and whenever you want to reset, you either remove the rules or the style or disable the latter.
Post a Comment To get help prepare a demo.