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.