Guide on obtaining an obscure style guideline in MS Edge using JavaScript

Question

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

If you are looking to utilize the object-fit CSS rule, keep in mind that it is not supported in MSIE and MS Edge Browsers. While there are polyfills available for IE, none of them seem to work in Edge from my experience.

For instance, the polyfill fitie by Jonathan Neal works with IE but seems to fail in Edge (at least on the systems I've tested). This could be due to fitie relying on JS objects like element.currentStyle and element.runtimeStyle, which are no longer supported in Edge browsers. Using

window.getComputedStyle(element).getPropertyValue('object-fit')

doesn't return any value in Edge.

So how can one retrieve the value of the CSS rule object-fit using 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

There must be a way around this limitation since it's not completely ignored. The Developer Tools do show the rule underlined as expected.
https://i.sstatic.net/mAhYH.png

Bonus question:

Are there any polyfills available for object-fit that actually work in Edge?

javascript css microsoft-edge object-fit

Answer 1

Answer №1

You have the ability to directly reference it:

// '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>

The style property will return undefined in browsers that do not support it (such as Edge) even with a polyfill.

The issue lies in the fact that Edge does not recognize the object-fit rule when parsing the CSS, causing it to skip over it. Even if you try to shim the behavior with other properties or JavaScript, Edge remains unaware of it.

To specifically address the question "So how do I obtain the value of the CSS rule object-fit in MS Edge browser using JavaScript?" you can use

window.getComputedStyle(ele).objectFit

to retrieve the value, which will always be undefined (even after shimming).

Regarding the bonus question: background-size: cover is supported by Edge, allowing you to apply the image as a CSS background to a display:inline-block element and achieve the desired effect. You can easily replace the <img> with a styled <div>...

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>

This represents the basic concept - a shim like object-fit-images expands on this idea and supports additional properties like object-position.

Alternatively (with more HTML involved), you can retain the <img> tag and encase it in a container that emulates applying object-fit relative to it. This is the approach taken by object-fit-polyfill.

Both shims should function effectively in Edge.

Answer 2

You have the ability to directly reference it:

// '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>

The style property will return undefined in browsers that do not support it (such as Edge) even with a polyfill.

The issue lies in the fact that Edge does not recognize the object-fit rule when parsing the CSS, causing it to skip over it. Even if you try to shim the behavior with other properties or JavaScript, Edge remains unaware of it.

To specifically address the question "So how do I obtain the value of the CSS rule object-fit in MS Edge browser using JavaScript?" you can use

window.getComputedStyle(ele).objectFit

to retrieve the value, which will always be undefined (even after shimming).

Regarding the bonus question: background-size: cover is supported by Edge, allowing you to apply the image as a CSS background to a display:inline-block element and achieve the desired effect. You can easily replace the <img> with a styled <div>...

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>

This represents the basic concept - a shim like object-fit-images expands on this idea and supports additional properties like object-position.

Alternatively (with more HTML involved), you can retain the <img> tag and encase it in a container that emulates applying object-fit relative to it. This is the approach taken by object-fit-polyfill.

Both shims should function effectively in Edge.

Answer 3

Answer №2

I'm interested in utilizing the object-fit CSS rule.

To achieve an image covering its parent without needing to retrieve the value of the object-fit CSS rule with JavaScript in the MS Edge browser, you can take advantage of a solution that replicates the behavior of object-fit: cover using transform: translate and min-width/height properties.

Bonus: This method works seamlessly without the need for polyfills and is compatible across all browsers down to IE9.

Side note, MS Edge version 16 supports object-fit

Here's a code snippet that achieves the same effect as object-fit: cover by leveraging transform: translate and min-width/height:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

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

If desired, you can utilize CSS @supports to reset the aforementioned properties and incorporate object-fit:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@supports (object-fit: cover) {
  #i {
    min-width: auto;
    min-height: auto;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

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

Another option to consider when dealing with images within a div element is to use inline style for the background-image property instead of an img tag.

In cases where a fixed-width/height div defines the boundaries for the image, this is a simple example of implementing that approach:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>

Update:

You can also replicate object-fit: contain by adjusting the max-width and max-height properties:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;                   
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

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

Updated based on a comment

Simulating object-fit for videos can be more complex compared to images due to differences in how video elements behave. Various demos showcase different outcomes when mimicking cover or contain for videos.

To achieve consistent results similar to images, a script might be necessary to adjust the video's dimensions proportionally based on aspect ratios.

Additional resources and approaches for simulating backgrounds like object-fit are discussed in another Stack Overflow post: Simulate background-size:cover on <video> or <img>.

Another workaround involves utilizing media queries and max/min-aspect-ratio:

View Fiddle demo

Source:

Answer 4

I'm interested in utilizing the object-fit CSS rule.

To achieve an image covering its parent without needing to retrieve the value of the object-fit CSS rule with JavaScript in the MS Edge browser, you can take advantage of a solution that replicates the behavior of object-fit: cover using transform: translate and min-width/height properties.

Bonus: This method works seamlessly without the need for polyfills and is compatible across all browsers down to IE9.

Side note, MS Edge version 16 supports object-fit

Here's a code snippet that achieves the same effect as object-fit: cover by leveraging transform: translate and min-width/height:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

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

If desired, you can utilize CSS @supports to reset the aforementioned properties and incorporate object-fit:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@supports (object-fit: cover) {
  #i {
    min-width: auto;
    min-height: auto;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

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

Another option to consider when dealing with images within a div element is to use inline style for the background-image property instead of an img tag.

In cases where a fixed-width/height div defines the boundaries for the image, this is a simple example of implementing that approach:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>

Update:

You can also replicate object-fit: contain by adjusting the max-width and max-height properties:

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;                   
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

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

Updated based on a comment

Simulating object-fit for videos can be more complex compared to images due to differences in how video elements behave. Various demos showcase different outcomes when mimicking cover or contain for videos.

To achieve consistent results similar to images, a script might be necessary to adjust the video's dimensions proportionally based on aspect ratios.

Additional resources and approaches for simulating backgrounds like object-fit are discussed in another Stack Overflow post: Simulate background-size:cover on <video> or <img>.

Another workaround involves utilizing media queries and max/min-aspect-ratio:

View Fiddle demo

Source:

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

Edit

Bonus question:

Answer №1

Answer №2

Similar questions

Mastering VSCode IntelliSense: Unleashing the Power of Type Declarations

Efficiently map nested properties of this.props within the render method

Utilizing the JSON.parse method in JavaScript in conjunction with an Ajax request while incorporating the escape character "\n" for new line functionality

Encountering a DOM exception with React 16.6 due to lazy loading/Susp

Response from the server to multiple asynchronous XMLHttpRequests

Extract reference value from an HTML element

How to Convert JSON from an Object to a String using jQuery?

Encountering an issue while attempting to run a Node.js server on a Mac, receiving the error message "no appropriate image located."

instructions for ensuring gridview spans entire width of panel

When attempting to compress JavaScript with uglify-js, an unexpected token error occurs with the symbol ($)

Encountering the error "Cannot access property 'stroke' of undefined" when utilizing constructors in React and p5

What is the best method for choosing elements when I already possess a DOM element?

Adding a badge to a div in Angular 6: What you need to know!

Converting javascript html object lowercase

Automatically compute and convert currency formats using JavaScript

Displaying JavaScript values one by one using a for loop and alert

"I'm trying to incorporate react-datepicker into my ReScript application, but I'm struggling to

Looping through each combination of elements in a Map

how to set up automatic login for a user after changing their password using passport-local-mongoose

Is it possible to utilize JavaScript for transmitting and storing data on a server?