The principal problem with using HTML 5 and CSS 3 isn’t the adoption rate or the differences between browsers, it is knowing what those differences are in the first place. Once that is known developers can work around the limitations using graceful degradation techniques. To help figure that out many turn to the open source project Modernizr.
Rather than look at user-agent strings, Modernizr uses a series of tests to determine the capabilities of a browser. In a few milliseconds it can perform over 40 tests and record their results as properties on an object called Modernizr. Using this information developers can detect if a feature they are using isn’t supported and react accordingly.
New in version 2, Modernizr now comes with a conditional resource loader for JavaScript and CSS. This resource loader takes three arguments, the first being an expression listing the features that are required. The second argument is the list of JavaScript and CSS files to be loaded if the expression returns true. The third argument is the fallback files to use if the necessary features are not present.
In addition to graceful degradation, the loader can be used to bring in a polyfill. For those of you who are not familiar with the term, a pollyfill is “a JavaScript shim that replicates the standard API for older browsers”. While not always recommended, pollyfills can be used to add support for the vast majority of HTML 5 features that Modernizr detects.
In order to improve performance, Modernizr can be customized to only perform the tests that are needed by the site. This is done via the Modernizr download page, which also services as a list of detectable features. There is a separate list of undetectable features and possible workarounds on their github site.
/filters:no_upscale()/sponsorship/topic/25afca57-6bcb-4c42-9a70-fbea10ce4fc7/MicrosoftLogoRSB-1678874949003.png)
/minibooks/jhipster-mini-book-7/en/smallimage/logo-1677849630224.jpg){kind=logo}
/articles/qworum-modular-ui-architecture/en/smallimage/logo-1677607675773.jpg){kind=logo}
/presentations/module-federation/en/smallimage/Zack Jackson-s-1675669107665.jpg)
/articles/separation-concerns-nodejs/en/smallimage/LOGO-1666024675039.jpg){kind=logo}
/articles/nodejs-monorepo/en/smallimage/LOGO-1665418345953.jpg){kind=logo}
/articles/asp-dotnet-minimal-apis/en/smallimage/logo-1678972581766.jpg){kind=logo}
/articles/functional-dotnet-development/en/smallimage/Fsharp-vs-Csharp-is-one-more-functional-than-the-other-small-1676023056578.jpg)
/articles/dotnet-grpc-json-transcoding/en/smallimage/logo-1674822319367.jpg){kind=logo}
/articles/Dotnet-Seven-MSMQ-Alternatives/en/smallimage/logo-1670585778128.jpg){kind=logo}
/articles/polygot-microservices-dapr-aks/en/smallimage/logo-1666079703389.jpg){kind=logo}
/articles/billions-messages-minute/en/smallimage/LOGO-1679471830613.jpg){kind=logo}
/presentations/java-compiler-intermediate-representation/en/smallimage/chris_seaton-s-1679038354209.jpg)
Community comments
Beware of polyfills and JS shims
by Flinn Mueller,
Re: Beware of polyfills and JS shims
by Wanderson Santos,
Beware of polyfills and JS shims
by Flinn Mueller,
Your message is awaiting moderation. Thank you for participating in the discussion.
These kinds of techniques never work as advertised and almost always introduce performance issues. This isn't a proper solution for supporting browsers.
Re: Beware of polyfills and JS shims
by Wanderson Santos,
Your message is awaiting moderation. Thank you for participating in the discussion.
@Flinn Mueller Please, show us your solution!