Modernization (BYOSP Part 4)

What happens if someone using an old web browser wants to view our slides? We can add the following div outside of the section elements containing the slide content.

<div id="warning">
    Your browser may not support the 
    features needed to display these slides. 
</div>

Following a long standing tradition amongst software developers, we are not going to the trouble of specifying exactly what might be missing. Instead, we are only hinting at a potential catastrophe to create an aura of mystery and suspense.

We don't want the warning to display on the good browsers, though, so we'll turn the warning off by default using CSS.

#warning {
    display: none;
}

Now we can download a custom Modernizr build to detect the features required by our slides. Thanks to the CSS classes added by Modernizr, we can add additional style code to turn on the warning if a feature is missing.

.no-flexbox #warning, 
.no-opacity #warning, 
.no-csstransitions #warning {
    display: block;
    color: red;
    font-size: smaller;
    position: fixed;
    bottom: 0px;
}

In this case we've decided to warn the user if their browser doesn't support flexbox, opacity, or CSS transitions.

Next up – printing.

For all the code, see github.