alt131 - 6:01 pm on May 7, 2011 (gmt 0)
Hi greencode, yes – the above won’t work in ie<8. But good support in other browsers, so unless your target audience is definitely using legacy versions, probably only legacy ie to be concerned about.
I think the best way depends on your coding philosophy. jquery may suit you well, but note that script will brute-force ie6 (I think), but doesn’t provide for min-width, so ie6 will treat the specified min-width as the width. Probably not critical, but you may wish to check. Plus ie<9 doesn’t understand opacity either, so needs a filter. If you want the flexibility to use other selectors and properties elsewhere, you might consider a less specific library. I just noticed the latest version of Dean Edwards script has increased from 77kb to 117kb’s though – something to watch.
Another option is to feed a degraded version to ie<8. I detest elements for presentational purposes. But you could attach an image to spans, and use something like the AlphaImageLoader to reproduce opacity and scale. Or do something like below. It looks nasty (and is) ... but it is only a few bytes, avoids server hits for an image and can be hidden from assistive devices and understanding browsers.
<h1><span>• • • •</span>My Title<span>• • • •</span></h1>
You could enclose the spans in a conditional comment so only ie gets them, but I’d be inclined to have something in the main style sheet so I don't forget that eye-sore is in the html ;) so:
and then the style via a conditional comment:
<!--[if lte IE 7]>
margin: 0 10px;
You could use more/less bullets and style the span more accurately, but unless ie<8 is really important, I would suggest not being too concerned - the goal is a close representation, not an exact reproduction.
A last quick thought and needs exploring properly, but if you're using jqeuery, prepend and appemd might be an option - and they're already in the library so no additional code.