My new logo looks terrible on a mobile browser (or any browser that ignores my CSS) because it is a white logo displayed on a white background. I would like to keep my logo white when my CSS is used, but change the color of the logo when my CSS is ignored.
Anyone know of a way that I display one image if my CSS will be observed and a different image if my CSS will be ignored?
Perferably without using Javascript (so that it renders correctly if a browser has Javascript turned off).
It’s not hard to do this if you have access to your web server config and can write a CGI script. You would rewrite requests to the image URL to go to a script that would serve the image data. The script would take two approaches:
1) If the browser at the other end is recognized and known to / not to do CSS, give it the appropriate image. This would let you deal with known mobile browsers that could be identified reliably, as most probably can.
2) If you don’t recognize the browser, the script looks at the tail of your web log for a request for the stylesheet (which would need to be in a separate file, not embedded in the HTML). If there’s no request for the style sheet from the same IP address, with the same http refererer, in a reasonable amount of time (say 1/4 of a second), then the client is very likely not doing CSS and so you send your alternate image. The consulting of the web log could be very fast - you just look at the very end. This part could also write a log, so additional agents could be dealt with quickly using the first approach.
See, no javascript at all.
Terry
An alternative you could try (I’m kind of winging this and haven’t actually tried this code myself):
* add a class or CSS id to the img tag. Let’s call the id “logo”
* change the img displayed to be the black / alternate image and not the white with black outline image you have now
* in your CSS file add these rules:
div#site-name {background: url(http://www.andrewparker.net/gongshow.gif);} // this is your current logo
img#logo {display:inline;visibility:hidden;}
Now, what should happen (in theory) is:
* CSS aware browsers should display your current logo as the background of the site-name div
* CSS aware browsers should NOT display the alternate logo (the visibility:hidden in the CSS) but should reserve the space that the logo takes up (the display:inline).
* CSS ignorant browsers should NOT display your logo (since it’s specified using CSS) and should display the alternate logo (since it’s only hidden through CSS)
One catch with this, possibly major, is that you lose the link-a-bility of the logo you have today. You can fudge this a bit with something like an onclick for the site-name div, but that’s javascripty which you were trying to avoid.
Yet another alternative to consider: FInd someone with photoshop or comparable application and create a version of your logo in the PNG format. Set the “fill” of the logo to be a PNG-alpha channel (or perhaps I have it reversed, set the strokes of the logo to be PNG-alpha) which will make it transparent against the background, yet retain the color. Actually I’m not all all certain that would work either.
Two interesting responses, thanks guys!
I do have access to CGI on my host, but I don’t want to rely on my log files for site functionality… that smells troublesome. I like the idea of user-agent intrepretation, but it will require constant maintainance as the browser market evolves.
Ed’s CSS hack is exactly the kind of thing I’m looking for, but you’re right, I might look my linkability… however, this totally smells like the right trail, and I’m going to experiment with different combinations of layers of images and div that are hyperlinked and placed on top of each other. Great suggestion.