[jquery-dev] Re: Enhancement suggestion: .css(['prop', 'prop', 'prop']);
Ticket has been opened: http://dev.jquery.com/ticket/4461 On Mar 21, 3:15 am, Daniel Friesen wrote: > At work when I was writing my own JavaScript framework (partly inspired > in API by jQuery) I ran into a number of times where I needed to grab a > series of css values and set them all onto another, as a result I ended > up coming up with another type of input to .css; > > $(someNode).css(['backgroundColor', 'backgroundImage', 'width', 'height', > 'position', 'top', 'left']); > > Basically I made .css accept a single array of property names to grab. > The return is a object with property keys and values set on them. The > absolute beauty of this, was that you could take that same object and > set it onto another note, or even use it to revert. > > var cssCache = $(node).css(['display', 'width', 'height']); > // Do a bunch of stuff to node that modifies all that kind of css. > $(node).css(cssCache); // Revert to the original values > > Though I do take note now, another possibility which might fit in better > with .addClass and .bind might be something like. > > $(someNode).css('backgroundColor backgroundImage width height position top > left'); > > Though the fact that the difference between 'width' and 'width height' > is the difference between .css returning a string or an array, so it > might be worth it to use the array input format to avoid confusion. > > Any thoughts? This worth opening an enhancement ticket? > > -- > ~Daniel Friesen (Dantman, Nadir-Seen-Fire) --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: Enhancement suggestion: .css(['prop', 'prop', 'prop']);
Dave Methvin wrote: I ran into a number of times where I needed to grab a series of css values and set them all onto another, > > >>> This functionality overlaps with what you were proposing in #4295 >>> > > >> That bug has nothing to do with the caller interpreting complex >> shorthands. >> > > I agree; I was looking at the functionality you wanted in your > original statement--grabbing a series of css values. > Really it's just mapping a 'margin' call to individual marginTop marginRight marginBottom marginLeft calls and joining them together. The reason being because browsers do not handle calls to the shorthands consistently but they do handle the individuals correctly. Calling 'margin' in half the standard browsers will return an empty string (which will unset stuff instead of setting it right) if the style is set in the stylesheet instead of directly on the style tag. >> I see no reason to require people to use >> $(node).css(['marginTop', 'marginRight', 'marginBottom', 'marginLeft']); >> when it's perfectly valid (and more likely) for them to try using >> $(node).css('margin'); >> > > With .css("margin") (or "border" or "padding") it seems like there is > only one thing a caller could reasonably do without parsing it--pass > it back to .css("margin", value) to be set. Are there a lot of > situations where that is needed? > > I can see useful cases for .css(["prop1", "prop2"]) but not many for > css("shorthandProperty"). If you have the former, the amount of code > you need to write inside your own app will probably be less than if > you had the latter and tried to parse out the individual properties. > Passing it back to .css to reset, passing it to .css to copy styles, saving it in a database, displaying it. Using it in an animation. Any reason you want to use a css property get (quite frankly, a good majority of css properties include units or whatever so I don't see many other uses for most properties where you wouldn't parse things). Quite frankly, my reason for wanting a fix for 'margin' and the like is simple. Unless someone specifically wants a single edge of the margin, they will not use marginEdge, they will use margin, and if they use that they will run into this browser inconsistent bug. Even worse because this is an inconsistency between browsers they will likely develop with one output in mind and likely lead to things breaking in others. The fix has the side effect of smoothing things over and making all browsers give the same output so jQuery users don't have to sweat the issues with compatibility between browsers (just like why .bind abstracts between the different ways browsers bind events). While some bits of these two functionalities overlap I don't believe these overlap in code nor overall purpose enough to really be considered overlapping. They both have their own purpose so I don't see any reason to compare one to the other in deciding what to implement (apples vs. oranges). One is a browser inconsistency fix. The other is an enhancement to make programming simpler. To be honest they are also implemented in two different ways. The fix is a piece in jQuery.css and the enhancement is likely a change to jQuery.fn.css or jQuery.fn.attr; There was a "performance" and "code size" note brought up in the replies to the bug. But I don't see how these are real concerns. The code is only run if you are actually using these properties (if you're not then code never gets past the conditionals and just continues like usual). The only real point might be the movement of some of the code into a closure or a new jQuery.rawCSS method. I recommend the use of the .rawCSS method over the closure method, it should perform better (heck, in some use cases it could be considered a performance enhancement for plugins) and it has nice re-usability case. In fact that same change has a use case in another little project, making .css extensible so that plugins could add support for some obscure css properties like borderRadius or transform. (That project is pending on John's .curCSS .attr code refactor.) Heck, if the tiny change in code for that fix is so much of a concern it could honestly be implemented in a plugin using that .css extensibility enhancement when complete. We could have multiple levels of compatibility enhancement plugins people can use with jQuery; CSS Compatibility level 1: Fixes to browser incompatibilities in standard css properties like margin; CSS Compatibility level 2: Fixes to support css properties in w3 draft like borderRadius and transform in as many browsers as can handle it (^_^ Heck, we could include animation ability) ~Daniel Friesen (Dantman, Nadir-Seen-Fire) --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups
[jquery-dev] Re: Enhancement suggestion: .css(['prop', 'prop', 'prop']);
>>> I ran into a number of times where I needed to grab a >>> series of css values and set them all onto another, >> This functionality overlaps with what you were proposing in #4295 > That bug has nothing to do with the caller interpreting complex > shorthands. I agree; I was looking at the functionality you wanted in your original statement--grabbing a series of css values. > I see no reason to require people to use > $(node).css(['marginTop', 'marginRight', 'marginBottom', 'marginLeft']); > when it's perfectly valid (and more likely) for them to try using > $(node).css('margin'); With .css("margin") (or "border" or "padding") it seems like there is only one thing a caller could reasonably do without parsing it--pass it back to .css("margin", value) to be set. Are there a lot of situations where that is needed? I can see useful cases for .css(["prop1", "prop2"]) but not many for css("shorthandProperty"). If you have the former, the amount of code you need to write inside your own app will probably be less than if you had the latter and tried to parse out the individual properties. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: Enhancement suggestion: .css(['prop', 'prop', 'prop']);
Dave Methvin wrote: >> I ran into a number of times where I needed to grab a >> series of css values and set them all onto another, >> > > This functionality overlaps with what you were proposing in #4295 but > to me it seems like a better way to do it because you can explicitly > get the individual properties you want rather than making jQuery parse > (and the caller interpret) the complex shorthand situations. > > http://dev.jquery.com/ticket/4295 > That bug has nothing to do with the caller interpreting complex shorthands. That's a ticket for fixing a cross browser incompatibility with shorthand forms which are perfectly valid for use without using any complex forms. jQuery is supposed to keep things short and abstract browser incompatibility so I see no reason to require people to use $(node).css(['marginTop', 'marginRight', 'marginBottom', 'marginLeft']); when it's perfectly valid (and more likely) for them to try using $(node).css('margin'); which has a bug in it they are unlikely to know about. >> var cssCache = $(node).css(['display', 'width', 'height']); >> > > To make it optionally chainable I'd add the ability to pass in an > object as the second argument so you could do this: > > var saved = {}; > $(node) > .css(['display', 'width', 'height'], saved) > .something().mangling().theNode() > .css(saved); > > This particular example is really similar to the internal swap() > method though, so maybe there's some way to publish that in a > reasonable way instead. > > http://dev.jquery.com/browser/trunk/jquery/src/attributes.js#L180 > > I played with something like this a couple of years back but it just > seemed like too much code to include in the core. Perhaps the best > start is to see how it looks as a plugin. > ~Daniel Friesen (Dantman, Nadir-Seen-Fire) --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: Enhancement suggestion: .css(['prop', 'prop', 'prop']);
> I ran into a number of times where I needed to grab a > series of css values and set them all onto another, This functionality overlaps with what you were proposing in #4295 but to me it seems like a better way to do it because you can explicitly get the individual properties you want rather than making jQuery parse (and the caller interpret) the complex shorthand situations. http://dev.jquery.com/ticket/4295 > var cssCache = $(node).css(['display', 'width', 'height']); To make it optionally chainable I'd add the ability to pass in an object as the second argument so you could do this: var saved = {}; $(node) .css(['display', 'width', 'height'], saved) .something().mangling().theNode() .css(saved); This particular example is really similar to the internal swap() method though, so maybe there's some way to publish that in a reasonable way instead. http://dev.jquery.com/browser/trunk/jquery/src/attributes.js#L180 I played with something like this a couple of years back but it just seemed like too much code to include in the core. Perhaps the best start is to see how it looks as a plugin. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---
[jquery-dev] Re: Enhancement suggestion: .css(['prop', 'prop', 'prop']);
On Sat, Mar 21, 2009 at 6:15 PM, Daniel Friesen wrote: > > At work when I was writing my own JavaScript framework (partly inspired > in API by jQuery) I ran into a number of times where I needed to grab a > series of css values and set them all onto another, as a result I ended > up coming up with another type of input to .css; > > $(someNode).css(['backgroundColor', 'backgroundImage', 'width', 'height', > 'position', 'top', 'left']); > > Basically I made .css accept a single array of property names to grab. > The return is a object with property keys and values set on them. The > absolute beauty of this, was that you could take that same object and > set it onto another note, or even use it to revert. > > var cssCache = $(node).css(['display', 'width', 'height']); > // Do a bunch of stuff to node that modifies all that kind of css. > $(node).css(cssCache); // Revert to the original values > > > Though I do take note now, another possibility which might fit in better > with .addClass and .bind might be something like. > > $(someNode).css('backgroundColor backgroundImage width height position top > left'); > +1 May return an object {"background-color":value,"background-image":value,...} , so you can apply it to $.fn.css(object) directly. > > Though the fact that the difference between 'width' and 'width height' > is the difference between .css returning a string or an array, so it > might be worth it to use the array input format to avoid confusion. > > Any thoughts? This worth opening an enhancement ticket? > > -- > ~Daniel Friesen (Dantman, Nadir-Seen-Fire) > > > > > --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~--~~~~--~~--~--~---