Edge object-fit Fallback without a Polyfill or Modernizr

UPDATE: Edge has object-fit support as of Edge 16, released on October 16, 2017.

For the A-Z Directory module, I wanted a sensible and aesthetically pleasing approach to displaying contact images. Without knowing the width and height dimensions of the images people would be using for their contact images, I looked to the object-fit CSS property to avoid squashing and stretching the images. Object-fit has great support in modern browsers except for Edge.

There are polyfills available to emulate Edge object-fit support, but I wanted a lightweight solution for my lightweight module. In searching for an alternative, I stumbled across this neat trick for CSS object-fit fallback on Edge. That great article explains the technique better than I could, but I didn’t want to use Modernizr for feature detection as outlined in the post.

Don’t get me wrong. Modernizr is great. I use it for a lot of my projects when I have control of the website build. But, in the millions of Joomla sites out there in the world, other extensions may use Modernizr and I didn’t want any conflicts, or to add additional bloat, or to add another dependency to my module other than jQuery, which Joomla loads anyway.

Edge, however, does support CSS feature queries (a.k.a. @supports) and getComputedStyle. With that support, I can accomplish my Edge fallback:

1) In CSS, I generate content using the before pseudo-class only if object-fit is supported. Chrome will generate this content in the DOM, but it will be hidden. Edge will not generate this content.

	@supports (object-fit: cover){
	.modazdirectory__results:before{
	content: "objectfit";
	display: none;
	}
	}

2) In Javascript, I get the content using getComputedStyle. Chrome will return “objectfit”. Edge will return “none”.

	var azresults = jQuery( '.modazdirectory__results' )[0];
	var objectfit = getComputedStyle( azresults, ':before' ).content;
	if( objectfit == 'none' ) {
	// Edge fallback
	// Javascript is nearly identical to the Medium article
	jQuery( '.modazdirectory__image' ).wrap( '<div class="modazdirectory__image-container"></div>' );
	jQuery( '.modazdirectory__image-container' ).each( function() {
	var $modazcontainer = jQuery( this ),
	modazImgUrl = $modazcontainer.find( 'img' ).prop( 'src' );

	if( modazImgUrl ) {
	$modazcontainer.css( 'backgroundImage', 'url(' + modazImgUrl + ')' );
	}
	});
	}

3) The full CSS. Again, nearly identical to the Medium article:

	.modazdirectory__image-container, /* generated via JS if object-fit is not supported */
	.modazdirectory__image{
	display: block;
	align-self: center;
	width: 85px;
	height: 85px;
	min-width: 85px;
	line-height: 85px;
	border-radius: 50%;
	margin-right: 10px;
	}

	.modazdirectory__image-container{
	background-size: cover;
	background-position: center center;
	}

	.modazdirectory__image{
	object-fit: cover;
	}

	.modazdirectory__image-container .modazdirectory__image{
	opacity: 0;
	}

	@supports (object-fit: cover){
	.modazdirectory__results:before{
	content: "objectfit";
	display: none;
	}
	}