Search jQuery

jQuery Forum

png8 in ThemeRoller

in Developing jQuery UI • 14 years ago

I wanted to bump this issue back up again in hopes someone on the dev
list might have some ideas.
ThemeRoller currently spits out png24 images for its icons and
textures. The icons use alpha transparency and need to be converted to
png8 so they look "less bad" in ie6.
We're currently using phpThumb on top of GD to handle our image
conversion, but phpThumb's "reduce color depth" filter doesn't retain
image quality well so we can't use that for converting to png8.
Does anyone know of any php scripts that could do this conversion for
us? We have access to both GD and imagemagick.
There's a trac ticket here: http://ui.jquery.com/bugs/ticket/3689
Thanks
Scott

Replies(13)

scottjehl

Re: png8 in ThemeRoller

14 years ago

Assuming we can't get a good looking png8 for our icons, here's
another idea.
ui.theme.css could have an additional block of themeable styles added
that are directed at GIF versions of the icon state sprites for IE6.
The styles could either be commented out and noted for inclusion via
an IE6 conditional comment, or we could use a class name descendent
that UI could apply to IE6 on the HTML element.
Assuming we go with the second option, the CSS added to ui.theme.css
would look like this:
.msie6 .ui-icon { background-image: url(images/
222222_256x240_icons_icons.gif)/*{iconsIEContent}*/; }
.msie6 .ui-widget-content .ui-icon {background-image: url(images/
222222_256x240_icons_icons.gif)/*{iconsIEContent}*/; }
.msie6 .ui-widget-header .ui-icon {background-image: url(images/
222222_256x240_icons_icons.gif)/*{iconsIEHeader}*/; }
.msie6 .ui-state-default .ui-icon { background-image: url(images/
888888_256x240_icons_icons.gif)/*{iconsIEDefault}*/; }
.msie6 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-
image: url(images/454545_256x240_icons_icons.gif)/*{iconsIEHover}*/; }
.msie6 .ui-state-active .ui-icon {background-image: url(images/
454545_256x240_icons_icons.gif)/*{iconsIEActive}*/; }
.msie6 .ui-state-highlight .ui-icon {background-image: url(images/
2e83ff_256x240_icons_icons.gif)/*{iconsIEHighlight}*/; }
.msie6 .ui-state-error .ui-icon, .ui-state-error-text .ui-icon
{background-image: url(images/cd0a0a_256x240_icons_icons.gif)/*
{iconsIEError}*/; }
...and UI would need to do something like this:
if( msie6 ){ document.documentElement.className = 'msie6'; };
The conditional comment approach would be less obtrusive to the page,
but would mean one more CSS file to fetch.
I've already tested generating the css and images in ThemeRoller and
it's an easy change to make.
The download will always include these gif files but only IE6 will
load them.
Assuming we can't get png8... any thoughts on this or better ideas?

scott.gon..

Re: png8 in ThemeRoller

14 years ago

I'd say let's go with the conditional include. We need to push to remove all use of $.browser in UI.

caphun1

Re: png8 in ThemeRoller

14 years ago

Another option for targeting IE6 - use the star hack:
* html .ui-icon { background-image: url(images/222222_256x240_icons_icons.gif)/*{iconsIEContent}*/; }
We could place all these styles at the very bottom of the css so they could be easily removed when IE6 is completely phased out.

scottjehl

Re: png8 in ThemeRoller

14 years ago

<html><body bgcolor="#FFFFFF"><div>Yeah, * html hack is an option. </div><div>
</div><div>Or we could just comment them out and let devs use them however they'd like. Problem is, that would mean IE6 wouldn't be supported without a tweak.</div><div>
</div><div>I'm partial to a hack or descendant to keep things contained in one file...</div><div>
</div><div>There's always the alternative of generating a second file for these too. But that seems wasteful.</div><div>
</div><div>
</div><div> </div><div>
On Jan 19, 2009, at 6:42 PM, "Ca-Phun Ung" <<a href="mailto:caphun@yelotofu.com">caphun@yelotofu.com</a>> wrote:
</div><div></div><blockquote type="cite"><div>Another option for targeting IE6 - use the star hack:
* html .ui-icon { background-image: url(images/222222_256x240_icons_icons.gif)/*{iconsIEContent}*/; }
We could place all these styles at the very bottom of the css so they could be easily removed when IE6 is completely phased out.

pbakaus

Re: png8 in ThemeRoller

14 years ago

I'm curious - a gif and a png8 seems pretty similar to me. Didn't you have issues with the color reduction, and won't that apply to gif also?

scottjehl

Re: png8 in ThemeRoller

14 years ago

Todd and I are giving this one last try with php today. I think we may
have found a way to get the icons to look better with png8.
We'll let you know...

scottjehl

Re: png8 in ThemeRoller

14 years ago

This issue is now fixed. ThemeRoller now generates png 8 images that
look good in IE6!
Richard is clearing the cache now and then you'll see the update.
Big props to Todd for redrawing all the icons today to make this
happen!
...note: the icons in the TR app itself (left column) are still
png24's but they'll be updated soon.

scott.gon..

Re: png8 in ThemeRoller

14 years ago

This is great. Looking forward to having the demos look decent next time I test in IE6 :-)

rdworth

Re: png8 in ThemeRoller

14 years ago

Awesome news. Thanks Scott and Todd. Just announced
<a href="http://twitter.com/jqueryui/status/1134650715">http://twitter.com/jqueryui/status/1134650715</a>
- Richard

caphun1