Posted by jide on February 3, 2010 at 1:07pm
5 followers
| Project: | Drupal core |
| Version: | 7.x-dev |
| Component: | toolbar.module |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Issue Summary
in IE6, transparency in PNG24 are not supported unless we use a ugly CSS hack. We all know that.
But using the TweakPNG software (http://entropymine.com/jason/tweakpng), we can change the default background color IE6 uses when transparency is not supported, while not changing anything for browsers supporting transparency and not using any CSS trickery.
So we can choose any fallback color instead of the default gray.
Since the toolbar background is black, we can set the background to black so the crappy gray around PNG will vanish. Much better !
See attached screenshots and the modified toolbar.png (this is the version without shadow used in #535066: Use CSS3 / IE filter to render toolbar shadow).
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| ie6-before.png | 10.87 KB | Ignored: Check issue status. | None | None |
| ie6-after.png | 10.82 KB | Ignored: Check issue status. | None | None |
| toolbar.png | 401 bytes | Ignored: Check issue status. | None | None |
Comments
#1
hmm interesting, hadn't considered it, but perhaps we should also be looking at techniques like the one described on http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
#2
Interesting technique !
I'm just concerned how aliasing will render this way.
As discussed on IRC with seutje, either we use :
- The TweakPNG trick and have a black background as a default for IE6. Would render nicely, but only if the toolbar background stays black.
- Or the Fireworks technique we get a PNG8 transparency fallback. Aliasing may be less smooth, but would work on any background.
#2 may be the best compromise.
#3
Yay ! The fireworks technique works pretty well. We should do that for all transparent PNG images, in all modules and themes.
Attached images correct the toolbar, overlay and shortcut modules, and the Seven theme.
Edit : The toolbar image used is the one without shadow used in #535066: Use CSS3 / IE filter to render toolbar shadow.
#4
sweet, looks a lot better imo, still ugly, just less :D
sry I wasn't able to help out with this, don't have fireworks at home
marking as needs review
#5
Needs some more work to cover all images, but having a first review would be cool.
#6
And.. Yes does not look sharp, but hey, that's IE6 ;)
#7
Sub.
#8
I spent ages one day imagining this should be possible. Image editors do support a 'matte' color even on transparent areas, so I hoped that would show through. But after messing with a dozen approaches and applications, I still ended up with silver on IE6 ... sometimes.
It's good news if someone has really cracked it. It seemed like it would be easy in theory
#9
A better title.
#10
@dman : Yes it's a really neat technique. It's not theory, it works ;)
#11
As this is 6 months old, some of the images in #3 are out of date, so marking as needs work.