Using Modernizr to support the Scale CSS3 2d transform in older versions of IE


As of Platform preview 6, IE9 has support for CSS3 2d transforms. The final version of IE9 will support CSS3 2d transforms.

However, the IE9 beta doesn’t support CSS3 2d Transforms.

In the following demo I'll show you how to support the scale feature of CSS3 2d transforms using feature detection and progressive enhancement.

 The finished demo can be found here

To test if the browser is capable of supporting CSS3 2d Transforms I’m going to use Modernizr, Modernizr is a JavaScript Library that makes it easy to test if a browser supports a particular feature or not.

 

Step 1 – Setup Modernizr

To set up Modenizr download the script from their website and then add the following script reference to the page:

<script src="Scripts/modernizr-1.6.min.js" type="text/javascript"></script>

You then need to add the following class to the HTML element of the page:

 

<html class="no-js">

Step 2 – Setup jQuery

To make things easy I’m also going to add a reference to JQuery:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

 

Step 3 – Test for CSS Transforms

When the document loads I'm going to test if the browser supports csstransforms. If it does I'm going to use jQuery to Apply a CSS Class that uses transforms. If the browser doesn't support Transforms I’m going to attempt to use Filters by calling the function  resizeUsingFilters (Bear in mind this will only work with IE 6/7/8/9 Beta. It won’t work with other browsers that don’t support CSS3 transforms… If you have a fix for other browsers you could apply it here too, testing before you apply a fix would be a good idea here, but for simplicity I have not added it to this demo).

$(document).ready(function () { if (Modernizr.csstransforms) { var obj = $("#sizedBox").addClass("sizedBox"); $("#whoDoneIt").html("CSS3 Did this automagically using transforms"); } else { var obj = $("#sizedBox").get(0); resizeUsingFilters(obj, 0.5); $("#whoDoneIt").html("JavaScript did this because this browser dosen't support CSS3"); } });

 

Step 4 – Add Function to resize using Filters

This little function uses the proprietary MS filters which is supported by IE6, 7, 8, and IE9Beta

function resizeUsingFilters(obj, flMultiplier) { // If you don't do this at least once then you will get an error obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; // Resize obj.filters.item(0).M11 *= flMultiplier; obj.filters.item(0).M12 *= flMultiplier; obj.filters.item(0).M21 *= flMultiplier; obj.filters.item(0).M22 *= flMultiplier; }

 

Step 5 – Add CSS Class to do CSS transform

In step 2 we applied a CSS class to the box… You want to make sure this is added to the style sheet.

.sizedBox { -ms-transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform-origin: top left; -moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; width: 500px; height: 500px; background-color: #000; padding: 10px; margin-right: 10px; float: left; position: relative; }

Step 5 – Add the HTML

I’ve just used to simple boxes to illustrate that the scaling is working

<div id="sizedBox" class="basicBox"> I should be half the size of the box on the right. <div id="whoDoneIt"> Something went wrong, probably Modernizr failed to load the object in time.</div> </div> <div class="box"> The Box on the right should be half the size of me. </div>
Comments (2)

  1. Jt says:

    What is the point of feature detection instead of browser detection if it only works in one browser? Pretty sure there is none.

  2. thebeebs says:

    How do you now a feature is only avalible in one browser? What happens if a browser vendor updates or adds or revokes a feature. The point of using feature detection is that it stops you guessing about browser support.

Skip to main content