0

CSS2.1 :before, :after pseudo-elements are a really useful for inserting static content. But what is the best way to degrade it gracefully for older browsers that do not support such feature?

Is creating an element instead so far the best option?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Donatas Cereska
  • 515
  • 1
  • 5
  • 11
  • 1
    Just my personal opinion, but I stopped caring about IE7 some time ago. At this point, anyone still using IE7 has deliberately disabled Windows Update, as it would have bumped them up to at least IE9. If they're going to make our lives difficult, why should we bother? – Niet the Dark Absol Jul 10 '14 at 15:00
  • 2
    the best way would be to ignore those old IE versions. Those pseudo elements work from IE8 ... – Laurent S. Jul 10 '14 at 15:00
  • http://caniuse.com/css-gencontent are you really supporting IE7 in __2014__? – Evan Davis Jul 10 '14 at 15:00
  • 1
    I believe you can use [selectivizr](http://selectivizr.com/) for this. – APAD1 Jul 10 '14 at 15:02
  • God help you if you're trying to support IE6. – Jeff Jul 10 '14 at 15:02
  • If your site will break in IE7 because you are using pseudo-elements then you are probably using them wrong. These pseudo-elements are **intended** for stylistic enhancements not for basic functionality. They should most certainly **not** be used for adding actual **content**. – Paulie_D Jul 10 '14 at 15:03
  • Is it truly worth it to support the 1% of people still using IE6? – Feign Jul 10 '14 at 15:03
  • The requirement is so IE7+. – Donatas Cereska Jul 10 '14 at 15:05
  • @Paulie_D: Layouts that depend on pseudo-elements can break even when the generated content isn't essential content. – BoltClock Jul 10 '14 at 15:07

1 Answers1

2

IE8 (mostly) supports pseudo elements. There are some issues with opacity and z-index (http://css-tricks.com/browser-support-pseudo-elements/).

IE7 is <1% world wide; supporting IE7 isn't doing anyone any favors (the user needs to be forced to upgrade). However, if you must support IE7, than I can see two workarounds:

  1. As you suggested, simply create the extra HTML element. Not necessarily semantic, but if you are support IE7...you gotta do what you gotta do.

  2. You can use Javascript to inject the element so search engines won't see the extra element (if that is a concern).

Jason
  • 4,079
  • 4
  • 22
  • 32