This is part 4 of the series. If you’re picking up the series at this point and you have difficulty following along, take a moment and review the prior posts.
In the last post, we had just linked Modernizr into the project. in the process of reviewing our modifications, I noticed an error in our strategy (OK, I admit it, I made a mistake). Let me explain. When we install our solution, we are
installing it in the root site of our site collection
so
that it available for all sub sites of the root site. Rather than using the “~site” placeholder in our path, we need to point our path to the site collection root, not the current site. The reason is simple. Unless we modify the masterpage on a
sub site, it uses the template for its parent or the root site. Additionally, all those “js” and “css” resources also exist only in the root, unless we create a copy of them in our sub site. Obviously, best practices would dictate that only one
copy of the Masterpage and the resources exist. That way changes are consistently maintained from a single location. The solution is fairly simple. We replace those “~site” placeholders with “~sitecollection”.
SharePoint decided to add the “ScriptLink(x)” IDs, so I decided to leave them and an investigation of their purpose for later.
The
next step required (there are many good Modernizr tutorials online, just Google “Modernizr Tutorial”) is to add a class to the HTML tag of our masterpage.
What happens when the page loads and the Modernizr.js file runs, is Modernizr replaces that class statement with an list of the HTML5 features indicating whether or not they are supported in the current browser.
This
is a client side - run time action, so whatever browser is being used will be analyzed for compatibility. The features prefixed with “no-“ are not supported in the current browser. The features without this prefix are supported. There
are some subtle differences between the reported feature names and the HTML5 standard, and you can easily identify them either with the Modernizr online documentation of one of the many tutorials. For example, in out image, the
“borderradius” informs us that border radiuses are supported in my browser, however, the CSS attribute for this feature is “border-radius”.
(You may have noticed that I used IE Tools to capture the modifications to the HTML made by Modernizr. The reason is that IE “view source” only displays the source from the original location, NOT the in memory modified code which
is running.)
So what do we need to do to implement those features identified as not supported in our browser? This is exactly where “polyfills” come into action. There is an excellent list of polyfills for HTML5 compiled for us -- HTML Cross Browser Polyfills. The next step is to decide which unsupported features are required and add the polyfill library(ies) required for our application on the browsers we’ve chosen to support. Then using the list at HTML Cross Browser Polyfills, we can download and integrate the library(ies) required to support those missing features.
The question of which features to support in your application is not an easy one. Do you have control over which browsers will be supported by your audience? Whether the application is intended for the internet, intranet or
extranet
may significantly impact that answer. Trying to support all features would result in a lot of additional JavaScript and CSS code and would likely impact the performance of your pages. Even if you decide to only support Microsoft Internet Explorer,
the differences in HTML5 features supported in each version is significant (the IE10 data below is from the current pre-release of IE10 which is part of the Developer Preview).
The next important question is which features are REQUIRED for your page. Because many of the features “fail gracefully”, careful consideration should be given to whether the added code weight and complexity of the additional features is worth the performance impact. In my first post of the series, I showed an image of the IE8 verses IE9 rendering of the content with “border-radius” styling. If that was the only feature I was interested in supporting in my pages, then I would likely choose to let the IE8 user see the content with square corners and edges.
The following table identifies which HTML5 features are supported in each IE versions 8 through 10. It should become apparent that as newer versions of Internet Explorer are deployed, many of the new HTML5 and CSS3 features will come natively and much of the complexity of integrating polyfills will become unnecessary and a wasted effort. As you will see later after we’ve added more features, Internet Explorer 10 actually outshines the competitors in HTML5 rendering. I’ll leave it to you to draw you own opinions and conclusions.
IE8 | IE 9 | IE 10 | ||
no-flexboxr | no-flexboxr | no-flexboxr | ||
no-flexbox-legacyr | no-flexbox-legacyr | flexbox-legacyr | ||
no-canvasr | canvasr | canvasr | ||
no-canvastextr | canvastextr | canvastextr | ||
no-webglr | no-webglr | no-webglr | ||
no-touchr | no-touchr | no-touchr | ||
no-geolocationr | geolocationr | geolocationr | ||
postmessager | postmessager | postmessager | ||
no-websqldatabaser | no-websqldatabaser | no-websqldatabaser | ||
no-indexeddbr | no-indexeddbr | indexeddbr | ||
hashchanger | hashchanger | hashchanger | ||
no-historyr | no-historyr | historyr | ||
draganddropr | draganddropr | draganddropr | ||
no-websocketsr | no-websocketsr | websocketsr | ||
no-rgbar | rgbar | rgbar | ||
no-hslar | hslar | hslar | ||
no-multiplebgsr | multiplebgsr | multiplebgsr | ||
no-backgroundsizer | backgroundsizer | backgroundsizer | ||
no-borderimager | no-borderimager | no-borderimager | ||
no-borderradiusr | borderradiusr | borderradiusr | ||
no-boxshadowr | boxshadowr | boxshadowr | ||
no-textshadowr | no-textshadowr | textshadowr | ||
no-opacityr | opacityr | opacityr | ||
no-cssanimationsr | no-cssanimationsr | cssanimationsr | ||
no-csscolumnsr | no-csscolumnsr | csscolumnsr | ||
no-cssgradientsr | no-cssgradientsr | cssgradientsr | ||
no-cssreflectionsr | no-cssreflectionsr | no-cssreflectionsr | ||
no-csstransformsr | csstransformsr | csstransformsr | ||
no-csstransforms3dr | no-csstransforms3dr | csstransforms3dr | ||
no-csstransitionsr | no-csstransitionsr | csstransitionsr | ||
fontfacer | fontfacer | fontfacer | ||
generatedcontentr | generatedcontentr | generatedcontentr | ||
no-videor | videor | videor | ||
no-audior | audior | audior | ||
localstorager | localstorager | localstorager | ||
sessionstorager | sessionstorager | sessionstorager | ||
no-webworkersr | no-webworkersr | webworkersr | ||
no-applicationcacher | no-applicationcacher | applicationcacher | ||
no-svgr | svgr | svgr | ||
no-inlinesvgr | inlinesvgr | inlinesvgr | ||
no-smilr | no-smilr | no-smilr | ||
no-svgclippaths | svgclippaths | svgclippaths | ||