core and enhanced are definitions we have for ‘experiences’ that we serve to a browser. The experience we serve depends on the presence of some features within the browser.
Generally, older browsers that don’t support newer JavaScript features will get a core experience, and modern browsers will get the enhanced experience.
To determine whether or not a browser supports those features, we use a ‘cuts the mustard’ test.
This test checks browsers for some features that are only implemented by modern browsers. We recommend the following test:
var script = document.createElement('script');
var supportsDeferredScripts = "defer" in script && "async" in script;
window.cutsTheMustard = (typeof document.documentElement.dataset === 'object' && ('visibilityState' in document) && supportsDeferredScripts);The styling we choose to display rely on class names. Keeping with the experiences, we will be using core and enhanced. Origami components contain fallback styling for the browsers that fail the test. We need to toggle the class names based on the result of the test, and to avoid flashes of content we’ll always assume that the experience we will be served is core, until proven otherwise.
Your <html> will need the core class:
<html class="core">And we’ll want to add a script to replace that class with enhanced if the browser does pass the test:
if (window.cutsTheMustard) {
document.documentElement.classList.replace('core', 'enhanced');
}Finally, we need to add instructions for our styling to handle the html class:
.core .o--if-js,
.enhanced .o--if-no-js {
display: none !important;
}If our browser passes the test and there is JavaScript that should only be served for the enhanced experience, we can load the JavaScript dynamically.
If there is JavaScript to execute regardless of the experience served to the browser, we should add a <script> element to load that JavaScript.
<script>
(function(src) {
if (window.cutsTheMustard) {
script.async = script.defer = true;
script.src = src;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
}
}('https://example.com/main.js));
</script>Origami follow the FT Browser Support Policy document available to FT staff.
In the physical world, ‘Polyfilla’ is a type of plaster that is used to fill in small holes in walls. In web development, polyfills are snippets of code that implement a feature on browsers that do not natively support that feature. It means that we can write modern JavaScript without having to invest a large amount of time in making it work in older browsers.
What can be time consuming, is identifying the polyfills we need, so for that, we use and maintain the Polyfill Service which hosts all of its own documentation.