How to get unknown style rule in MS Edge with JavaScript

Question

I want to use object-fit CSS rule.
This is not supported in MSIE and MS Edge Browser.
While there are some polyfills for IE, there is none to my knowledge that works in Edge.

E.g. the polyfill fitie by Jonathan Neal works with IE, but not in Edge (at least not on my machine). This is because fitie uses element.currentStyle and element.runtimeStyle which are MS only JS objects which do not any support in Edge browsers anymore. But if I use window.getComputedStyle(element).getPropertyValue('object-fit'), Edge returns nothing.

So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?

img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));

div {
  width: 400px;
  height: 320px;
  overflow: hidden;
}
#i {
  display: block;
  width: 100%;
  height: 100%;
  -ms-object-fit: cover;
  object-fit: cover;
}

div {
  box-sizing: border-box;
  border: 1px solid gold;
}
div,
p {
  font-family: sans-serif;
  font-size: 20px;
  width: 400px;
  margin: 0 auto;
}

<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>

Edit

It must be possible somehow, as it is not fully ignored.
The Developer Tools show the rule curly underlined

---

Bonus question:

Is there any polyfill for object-fit that works in Edge?

Answer 1

You should be able reference it directly:

// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',  
    window.getComputedStyle(document.querySelector('.test')).objectFit);

// 'rgb(255,0,0)' in both
console.log('color', 
    window.getComputedStyle(document.querySelector('.test')).color);

.test{ color: red; }

<div class="test">test</div>

That style property will be undefined in browsers that don't support it (like Edge) even with a polyfill.

The problem is that, as far as Edge is concerned: there is no object-fit rule. When Edge parses the CSS it fails to recognise the rule and just skips it. If you shim the behavior with other properties or JS that doesn't change the fact that Edge just doesn't know about it.

So, in answer specifically to "So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?" you can do window.getComputedStyle(ele).objectFit to get the value, and it's always undefined (even if successfully shimmed).

For the bonus question: background-size: cover is supported by Edge, so you should be able to set the image as a CSS background to a display:inline-block element and get the behaviour that you want. You can swap out the <img> for a styled <div> fairly easily...

var img = document.querySelector('.i');

// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {

  // Create a div
  var div = document.createElement('div');
  div.className = img.className;

  // Set the background image to be the source
  div.style.backgroundImage = 'url(' + img.src + ')';

  // Set background-size to the object-fit we want
  div.style.backgroundSize = 'cover';

  // Swap them
  img.parentNode.replaceChild(div, img);
}

.test {
  width: 400px;
  height: 320px;
  overflow: hidden;
  border: 1px solid red;
}

.i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="test">
  <img src="https://dummyimage.com/640x240/333/444.png" class="i" /></div>

That's just the basic idea - a shim like object-fit-images takes this idea a lot further and supports additional properties like object-position.

Alternatively (and with a lot more HTML) you can keep the <img> tag and wrap it in a container that behaves like it's applying object-fit relative to it. This is what object-fit-polyfill has done.

Both shims should work in Edge.