jQuery backup for old browser support

Question

https://stackoverflow.com/a/12059220/1421561

I love Davids code, but like to know the best way to give it support in < IE7. My first idea was to use a statement "if there is a child add a class". The class would then link to a background image positioned in a similar way.

What would your solution be?

Here is Davids fiddle: http://jsfiddle.net/w9xnv/2/

Edit: support for this in < IE7:

.menu li > a:after { margin-left: 5px; content: '\25BA'; }

< Ie7 ? Really so, IE 6? IE6 was released in 2001. Firefox 1 wasn't even released until 2004 and you aren't supporting firefox 1 are you? I know sometimes you don't have an option, but support for an 11 year old browser sure is pushing it. — John Koerner, Oct 20 '12 at 18:26
Agreed -- there really is no point supporting IE6. Even support for IE7 is being dropped by major sites these days. See [the stats here](http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201009-201209) and decide for yourself just how valuable it is to your site to support them. For what it's worth, I don't know of any way to support `:after` in IE7. — Spudley, Oct 20 '12 at 20:02

score 1 · Answer 1 · answered Oct 20 '12 at 20:11

Unfortunately, I don't know of any way to support the :before and :after selectors in IE7 or earlier. It simply isn't supported.

For a lot of CSS stuff, there are hacks that can force old IEs to work -- tools like Selectivizr or CSS3Pie.

However I know of no such hacks for :after. Sorry about that.

You can research it for yourself:

http://caniuse.com/#search=after to confirm browser support. This site also lists relevant resources, which often includes links to relevant hacks. (none listed for this one though)
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills - a pretty comprehensive list of hacks that implement modern browser features in older browsers. Again, no sign of support for :after here.

My sincere advice is to drop support for IE7 on your site. Unless you have a specific need to support it, the odds are no-one will even notice -- there are very few IE7 users out there these days; the usage for it dropped off much quicker than IE6, and today they're both sitting at under 1% of global browser usage. Judge for yourself whether it's worthwhile sweating over that half percent of users (who are probably well used to seeing sites that don't work properly anyway).

This may be the case if you look at the www users as one population. The service we are building will be used on many government computers and they are unfortunately still using IE7. We don't really have an option. — Victor, Oct 21 '12 at 14:20
@Victor - that's fair enough; as I said, you need to judge for yourself. If you have a specific need to deal with IE7 then you need to code for it. Unfortunately, in that case the only advice I can give is not to use `:after` in your stylesheet (or if you do, accept that IE7 users won't see it). The good news is that a lot of ither CSS can be polyfilled, see the links I gave for help with that. — Spudley, Oct 21 '12 at 18:48

score 0 · Accepted Answer · answered Oct 21 '12 at 14:13

It seemed that no one read that I wanted a jQuery backup for this. I understood already that there was no support for this with CSS for IE7.

Anyhow this is my solution, if someone would be looking for the same thing.

JS (jQuery):

<!--[if IE 7]>
    <script type="text/javascript"> 
         $(function () {
             $("#mainnavi li:has(ul)").addClass("ie7_dropdown_arrow");
         });    
    </script>   
<![endif]-->

CSS:

#mainnavi .ie7_dropdown_arrow {
    *background: url(../images/dropdown_arrow.png) no-repeat right 0px;
    *padding-right: 20px;
}

#mainnavi .ie7_dropdown_arrow:hover {
    *background: url(../images/dropdown_arrow.png) no-repeat right -15px;   
}

jQuery backup for old browser support

2 Answers2