Re: [jquery-dev] Re: jQuery forward compatibility issues
I just wanted to point out that the problem described for text-shadow can be a lot more complicated than animating 4 different values, e.g.: text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; So here you have 14 values. Also, box-shadow was removed from the CSS3 spec a few months ago and shelved: http://www.w3.org/TR/css3-background/#the-box-shadow. (nitpicky, I know, I know). On Thu, Nov 19, 2009 at 4:54 PM, dotnetCarpenter jon.ronnenb...@gmail.comwrote: You're dead-on Dave. The same problem arise with box-shadow and possibly other features. jQuery should either embrace these new property syntaxes or put pressure on the CSS spec authors to change it to the ol' fashion way. I don't know what is most appropriate but this will soon be a real pain when IE9 comes out and all browsers support this. http://www.css3.info/preview/ -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@googlegroups.com. To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.comjquery-dev%2bunsubscr...@googlegroups.com . For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=. -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
^_^ Now you need: opacity: .5; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); zoom: 1; And even with all that, IE's fauxpacity still interacts poorly with other Microsoft features like ClearType. -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
It was late last night when I wrote the names of the spec authors. It should have been only Elika and Paul Nelson (paulnel at microsoft.com). The other authors was from the CSS Background and Borders Module. I just sent an e-mail to Elika. Hi Elika. I've looked into some of the new CSS3 additions and some features like text-shadow and box-shadow don't have shorthand properties. This can create quite a headache for browser libraries and has spawned a discussion in the jQuery dev list. http://groups.google.com/group/jquery-dev/browse_thread/thread/9af8f51d557e323a/ba48dc96ae77dffc#ba48dc96ae77dffc I urge you to implement shorthand properties in the specifications. E.g. text-shadow-color, text-shadow-x, text-shadow-y, and text- shadow- radius. Regards, Jon. -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
fantasai suggested I post the proposal in the public mailing list, which I did this evening: http://lists.w3.org/Archives/Public/www-style/2009Nov/0279.html -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
I've only tested in FF3.5, Chrome 3.0 and Safari 4 as they are the
only browsers that I'm aware of supports text-shadow. You can test it
yourself with this code (uncomment in appropriate order):
script type=application/javascript
jQuery(function($){
// test that text-shadow is supported - always work
// $('h1,p').attr({ style: 'text-shadow:#6374AB
20px -12px
2px;' });
// css properties http://docs.jquery.com/CSS/css#properties
// $('h1,p').css({ 'text-shadow': '#6374AB 20px
-12px 2px;' });
// css name/value http://docs.jquery.com/CSS/css#namevalue
$('h1,p').css('text-shadow', '#6374AB 20px -12px 2px');
// animating blur radius with animate( params, [duration],
[easing], [callback] )
// $('h1,p').animate({ textShadow: '#6374AB 20px
-12px 20px' },
2000);
// animating left offset with animate( params, [duration],
[easing], [callback] )
// $('h1,p').animate({ textShadow: '#6374AB 40px
-12px 2px' },
2000);
// animating blur radius with animate( params, options )
// $('h1,p').animate({ textShadow: '#6374AB 20px
-12px 20px' },
{ duration: 2000 });
// animating left offset with animate( params, options )
// $('h1,p').animate({ textShadow: '#6374AB 40px
-12px 2px' },
{ duration: 2000 });
});
/script
h1Hello World!/h1
pLorem ipsum dolor sit amet, consectetur adipiscing elit.../p
To my surprise the css method with name/value does actually work. But
as stated in my first post, animate fails and I've only found my
shitty work around to work. I've seen some monkey patches from Zach
(of http://www.zachstronaut.com/) but my aim is to evaluate jQuery for
a prototype project where we need to quickly utilize advance features.
So far jQuery has proven to be an obstacle in that regard.
Regards, Jon.
On Nov 19, 3:08 am, Dave Methvin dave.meth...@gmail.com wrote:
jQuery doesn't support CSS properties with multiple
arguments like text-shadow.
What goes wrong, in particular, and on which browsers? Is it a problem
with the setter, the getter, or both?
--
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
Sorry, there is a bug in the compiled code (blame
http://closure-compiler.appspot.com/home).
This should work:
(function(d){function f(a){var b=a.css(display),c=a.css
(display,inline).width();a.css(display,b);return 80+a.position
().left+c}function e(a,b,c){return{style:left:-+a
+px;position:relative;text-shadow:+a+px 0 +b+px +c+;}}
d.fn.disassemble=function(){return this.each(function(){var a=d
(this),b=f(a);a.animate({blurRadius:30},{step:function(c){a.attr(e
(b,c,a.css(color)))},duration:800,complete:function(){d(this).hide
(medium)}})})};d.fn.assemble=function(){return this.each(function()
{var a=
d(this),b=f(a);a.attr(e(b,30,a.css(color)));a.animate({blurRadius:
30},{step:function(c){a.attr(e(b,30-Math.round(c),d(this).css
(color)))},duration:1E3})})}})(jQuery);
--
You received this message because you are subscribed to the Google Groups
jQuery Development group.
To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
To my surprise the css method with name/value does actually work. It's just assigning a string value to a css property, so it should work. But as stated in my first post, animate fails I want to be sure I understand what animate was expected to do. So you wanted animate to change the text-shadow property in steps over 2 seconds from this: text-shadow: #6374AB 20px -12px 2px; to this: text-shadow: #6374AB 20px -12px 20px; Is that right? I think all the css cases to date that animate needs to handle are able to isolate a single value, and this one is four different values with four meanings so yeah it looks like it would need special case handling. This is the first time in css I can recall that the individual values aren't broken out into separate values and then accessible by a shorthand property. For example, there is a border-right property; it's just built from border-right-color, border-right-width, and border-right-style separated by spaces. But with text-shadow there isn't a text-shadow-color, text-shadow-x, text-shadow-y, and text- shadow-radius. If there was, you could just solve this problem by animating text-shadow-radius from 2px to 20px, right? -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
You're dead-on Dave. The same problem arise with box-shadow and possibly other features. jQuery should either embrace these new property syntaxes or put pressure on the CSS spec authors to change it to the ol' fashion way. I don't know what is most appropriate but this will soon be a real pain when IE9 comes out and all browsers support this. http://www.css3.info/preview/ -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
Well if it won't be a problem until IE9 comes out, we have a couple of years. :-) text-shadow is possible in all browsers right now (using filters, IE was actually the first browser to implement this in the 90's) but I figure that people won't complain about it until IE9 is out and designers begin to use it. BTW, according to the pages you referenced, those args are out of order. The color is supposed to come last. The specs says before or after.. All implementations honor that BTW http://www.w3.org/TR/css3-text/#text-shadow It's actually fun to think that even thought IE rightly deserve a lot bashing for stopping browser innovation, it was the first browser to support image transparency, persistent storage, gradient ect. haha! -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
When you have a CSS property that has not been implemented in a pattern similar to other long-standing properties (e.g. text-shadow-radius), it seems that animating such a combined property would fall under an edge case requiring custom code. Yeah, I hadn't looked at these CSS3 additions before, but it seems crazy that they don't follow the pattern established by all the other ones already defined. The shorthand properties drive me crazy anyway because there's no way to use them without some sort of ad-hoc parsing. Even *that* parsing is complicated here by the ability for the color to be either the first or last argument -- I assume it can be a color name, rgb, rgba, or hex. I would much prefer to have text- shadow-radius etc., then we could blissfully ignore the inconsistent shorthand property. -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
Re: [jquery-dev] Re: jQuery forward compatibility issues
dotnetCarpenter wrote: ... It's actually fun to think that even thought IE rightly deserve a lot bashing for stopping browser innovation, it was the first browser to support image transparency, persistent storage, gradient ect. haha! ^_^ And then you look at what they did in ie8 to all those features which people have patterns for that make use of filter along with w3 drafts and other -vendor- extensions to make work in all browsers. Of course, that includes opacity which people have been writing extra cruft for already because of ie. http://realtech.burningbird.net/graphics/css/opacity-returns-ie8 You used to only need this to get nice browser compatible opacity: opacity: .5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); zoom: 1; ^_^ Now you need: opacity: .5; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); zoom: 1; So if you want to have IE8 compatibility you either need to go back to every place you ever used filter and add a second rule just for ie8. Or add a tag to all your web pages that have a use of filter: in them to downgrade IE8 to IE7 mode. ((Well, not that many people are using IE8... At least to browse Wikipedia)) That makes me wonder, did they screw up the js to? Does jQuery need an upgrade on it's opacity: fixes for IE8 in IE8 strict mode? Mmm... Gotta love preprocessed css, you don't need to worry about any of those. Maybe I'll add text shadow to my list. ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
[jquery-dev] Re: jQuery forward compatibility issues
jQuery doesn't support CSS properties with multiple arguments like text-shadow. What goes wrong, in particular, and on which browsers? Is it a problem with the setter, the getter, or both? -- You received this message because you are subscribed to the Google Groups jQuery Development group. To post to this group, send email to jquery-...@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=.
