Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I capture :after content in IE8?

I am applying an :after pseudo element to the body displaying the name of my media query breakpoint like so:

body::after {
  content: 'medium';
  display: none;
}

The reason for doing this can be found here: http://adactio.com/journal/5429/

I want to get the content value of :after using javascript in IE8.

This is how i am doing it for other browsers:

var breakpoint = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

But IE8 does not support getComputedStyle(), i know it supports currentStyle instead, but after a bit of trying i was unable to use it correctly.

This is the kind of thing i was trying with no success:

var breakpoint = document.body.currentStyle.getPropertyValue('content');

Anybody know how to do this?

Edit: After BoltClock's note i have now changed my css to this (one semi colon):

body:after {
  content: 'medium';
  display: none;
}

Before using two the content was not even appearing in IE8, so it would have had nothing to return. Unfortunately i still can't get IE8 to return the content.

I am trying this:

if (style = document.body.currentStyle) {
  for (var prop in style) {
    if (prop === 'content') {
      alert(prop);
    }
  }
}

I get nothing, but if i change 'content' to some other property like 'backgroundColor' it will alert something. So i'm thinking that even though msdn lists content as one of the available properties of currentStyle http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx it does not actually return it, unless i'm doing something else wrong.

like image 535
codekipple Avatar asked Oct 18 '12 16:10

codekipple


1 Answers

After a lot of trying i've come to the conclusion that it is not possible. But thankfully i have found a js script which is achieving exactly what i was after.

https://github.com/JoshBarr/js-media-queries

As well as using Jeremy Keith's technique of putting the breakpoint label in the body:after they have put the breakpoint label in font-family on the html element. This enables support for ie8 and some cases where android was not able to return the :after content either.

like image 193
codekipple Avatar answered Sep 23 '22 12:09

codekipple