Speckyboy RSS: How Modernizr Can Help You Implement CSS Fallbacks

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

How Modernizr Can Help You Implement CSS Fallbacks


By Eric Karkovack on Apr 04, 2021 08:24 pm


As web designers, we are often encouraged to utilize the latest and greatest features that CSS has to offer. And there are plenty of compelling reasons to do so. Techniques like CSS Grid and Flexbox make quick work of common layouts, while CSS animations add movement and interactivity. That’s just the tip of the iceberg.

However, implementing these features can sometimes come at the cost of browser compatibility. For websites that still have a significant number of users with older browsers, or for features that are very new, there’s a risk in leaving some people out.

Philosophically speaking, some designers are fine with this – and that’s OK. But implementing fallbacks for these features may be easier than you think. These failsafe measures offer a reasonable facsimile of a particular layout or design element and are compatible with legacy web browsers.

Today, we’ll show you how to utilize the Modernizr feature detection library for this purpose. Here we go!

What Is Modernizr?

Modernizr is one of those handy tools that web designers have been relying on for years. It’s a library that can be customized to “detect” (in reality, it’s running tests) specific features as a web page loads. From there, it adds CSS classes to the page’s <HTML> element, allowing designers to target their code based on what the library finds.

In our case, we’ll be using it to detect CSS Flexbox. However, it’s also able to look for features related to HTML and JavaScript. For instance, you can use it to determine whether a browser supports HTML5. If not, the available HTML5 shiv script can be used to bring it up to code, so-to-speak.

What’s really nice is that you can customize Modernizr to meet the needs of your project. Their website’s UI will let you pick and choose only the items you want detect. Once you’ve made your selections, click on the “Build” button to generate a custom downloadable package.

Our Build

For our purposes (and to keep things simple), we’re building our Modernizr package to detect Flexbox. We’ll also choose to minify the code and add CSS classes as well.

The Modernizr website.

Step 1: Setting Up the Demo

To demonstrate how this all works will require a couple of files – both available on GitHub:

  • flexgrid.css – This is our simple CSS Flexbox grid system. You’ll notice it has classes for different alignments and column widths. In addition, there are a special set of .no-flexbox classes that use old school CSS floats as well. This will help us create a similar layout style in legacy browsers.
  • modernizr-custom.js – The aforementioned script will detect whether or not CSS Flexbox is supported by the current browser.

Next, we’ll want to create a new HTML document that calls both of the above files in the <head> area. In addition, the document will need an example CSS Flexbox layout and some content.

You can feel free to use the demo file below for experimentation. It contains a simple 3-column layout, along with some minor visual enhancements (more on that in a bit).

Step 2: View the HTML Document in a Modern Browser

Now it’s time to see how our demo looks in a browser. To start, let’s use a modern web browser that supports Flexbox.

A 3-column CSS layout.

At least, we suspect that it supports Flexbox. How can we tell for sure? That’s what Modernizr is here to do.

In our case, we’ll want to look at our demo page’s source, specifically the <HTML> element. If there is a class of flexbox added to the element, we know our browser supports the feature. Go ahead and view the page source in your browser – we’ll wait.

Where’s the Class?

If you tried to view the full source of the page, you may have noticed that the <HTML> element doesn’t contain a class. Don’t worry – this is normal.

That’s because the class is added at runtime, after Modernizr tests for the selected feature. Therefore, it won’t show up in the full source code.

Use Your Browser’s Developer Tools

Instead, open up your web browser’s developer tools (hit the F12 button on your keyboard). That will provide an accurate look at the <HTML> element.

Here, we’re using the latest version of Firefox Developer Edition. According to Modernizr, it supports CSS Flexbox. Yay!

Firefox Developer Tools displaying CSS Flexbox support.

Step 3: Test the CSS Fallback in a Legacy Browser

Everything’s looking pretty great in our modern browser. But how about legacy software?

Our styles are set to use CSS floats in browsers that don’t support Flexbox. That fallback should allow us to create a multicolumn layout, even on ancient setups.

According to Can I use, Flexbox has partial support as far back as Internet Explorer 10, Firefox 2, Chrome 4 and Safari 3.1. Many years have gone by since these browsers were in wide use. However, IE in particular is still hanging on here and there.

Modernizr can be configured to test for partial support – but it gets messy. It leads to writing more CSS fallbacks that take a number of different situations into account. It’s not very efficient. Therefore, we’re looking for all-or-nothing support in our tests.

Let’s take a look at our demo in IE 10 (via a browser testing service) and see what happens.

A 3-column CSS layout, with the third column pushed to a new row.

Not too shabby. Our third column gets pushed down to the next row, which can be tweaked. But what about Flexbox support?

A quick view of IE’s developer tools shows that our <HTML> element displays a class of no-flexbox. That means Flexbox is not supported here, and the CSS fallback is being utilized.

Internet Explorer Developer Tools displays no support for CSS Flexbox.

Fixing the Layout for CSS Floats

Our fallback CSS floats will not cooperate with the visual enhancements we made. The third column is pushed down to a second row, which doesn’t look very nice.

That’s because floats add padding and borders to the column width that we previously set in the stylesheet. Flexbox, on the other hand, can adjust to these items without adding to the overall column width. Hence the difference in the results.

There are a few different things we could do to rectify the situation. We might cut the width of the columns or even shrink the margin between columns. Let’s try cutting the column width from 30.66% to 28.66%.

Comparison: CSS Flexbox layout (top) and CSS float fallback (bottom).

It worked! Our columns are now happily displayed and reasonably similar to the Flexbox versions. Some spacing differences aside, this is at least usable within an old browser. We could go in and make further changes to get even closer to the original.

Detect Browser Features and Adjust Accordingly

While our demonstration focused on detecting CSS Flexbox, Modernizr can do so much more. It can look for other common features such as HTML Canvas, SVG support, CSS Grid and an array of other useful tidbits.

The idea is that, once you know what a user’s browser is capable of, you can adjust your code to follow suit. This makes adopting newer CSS specifications, for example, a much less worrisome process.

Perhaps you won’t need to use fallbacks in every instance. But it’s nice to know that implementing them is easy to do, with the help of Modernizr.

The post How Modernizr Can Help You Implement CSS Fallbacks appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

25 Free iPhone Mockup Photoshop PSD Templates
Weekly News for Designers № 586
The 12 Best Double Exposure Effect Photoshop Action Sets in 2021
25 High-Quality Free Swirl & Ribbon Photoshop Brushes
How to Gain the Trust of Your Web Design Clients
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: Weekly News for Designers № 586

Friday, April 2, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 586 By Speckyboy on Apr 02, 2021 08:42 am Envato Elements

Speckyboy RSS: 25 High-Quality Free Swirl & Ribbon Photoshop Brushes

Wednesday, March 31, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration 25 High-Quality Free Swirl & Ribbon Photoshop Brushes By Paul Andrew on Mar 31, 2021 07:30

Speckyboy RSS: How to Gain the Trust of Your Web Design Clients

Wednesday, March 31, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration How to Gain the Trust of Your Web Design Clients By Eric Karkovack on Mar 29, 2021 09:19 pm

Speckyboy RSS: How a Custom WordPress Plugin Can Help You Manage a Website

Monday, March 29, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration How a Custom WordPress Plugin Can Help You Manage a Website By Eric Karkovack on Mar 28, 2021

Speckyboy RSS: Weekly News for Designers № 585

Friday, March 26, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 585 By Speckyboy on Mar 26, 2021 10:48 am Envato Elements 100

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New

Accessibility Weekly #244: Looking at WCAG 2.5.5 for Better Target Sizes

Monday, June 14, 2021

Sponsored by Automattic. They're hiring. June 14, 2021 • Issue #244 View this issue online or browse the full issue archive. Featured: Looking at WCAG 2.5.5 for better target sizes Todd Libby talks

Bullet Charts, Tapestry, Group Orders, Media Queries, Health Icons

Monday, June 14, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 14 2021 How bullet charts taught me about the importance

✏ Perfection in Design, 11 Landing Page Design Tips, Scarlet illustrations, and more...

Sunday, June 13, 2021

Adding Shadows to SVG Icons with CSS and SVG Filters CSS-TRICKS.COM COMMENTS Perfection in Design: Why It's a Bad Idea HONGKIAT.COM COMMENTS Scarlet Illustrations - Abstract and Surreal

✏ Web Design Done Well, NoCode Revolution, Akar Icons, and more...

Saturday, June 12, 2021

✨Grab a Free .design Domain Name for your Portfolio✨ [ad] PORKBUN.COM Web Design Done Well: Making Use of Audio SMASHINGMAGAZINE.COM COMMENTS Website Design Mockup: Pitch your Ideas the Best Way

✏ Front-End Auditing Tools, Privacy Analysis of FLoC, Free Tailwind Kit, and more...

Friday, June 11, 2021

✨Grab a Free .design Domain Name for your Portfolio✨ [ad] PORKBUN.COM 13 Inspiring Graphic Design Trends for 2021 VECTORNATOR.IO COMMENTS Link Shorteners: Why You Shouldn't Use Them GCS.

Celebrating High Point, Welcoming Lila Allen

Friday, June 11, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

💪 Diverse Fitness App Designs and more

Friday, June 11, 2021

Take A Peek At The Latest UpLabs Freebies 🔭 Check out these fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. Only $9.99 for UpLabs Premium! Seize the