article:
Tutorial: Android Programming
article:
Plugin: Refine Slide

eCSSential

Advertisement

Making responsive CSS load the way it should.

The Problem

Loading CSS in an optimized or prioritized fashion is very difficult. In order for a website to load cleanly, all CSS needed for rendering that page layout must be referenced in the head of a document. This is because stylesheets loaded in this way will block page rendering until they are loaded and ready to apply. If a stylesheet is referenced later in a document, or loaded dynamically via JS, users will often see a FOUC while that stylesheet loads concurrently with page rendering.

Unfortunately, this limitation can make for a lot of overhead in responsive designs, particularly if a stylesheet contains a large amount of CSS for breakpoints that don't currently apply at a particular viewport size, or worse, CSS that won't ever apply on a particular device. More unfortunate, using separate link elements with media attributes to reference stylesheets with their intended breakpoints doesn't prevent those stylesheets from downloading and blocking page rendering, even in environments where they don't currently or will never apply.

Lastly, if for some reason a stylesheet takes a long time to load, most browsers will let it continue to block page rendering for 30 seconds or more!



How eCSSential Helps

eCSSential is a JavaScript utility that is designed to make browsers download files in a faster, more responsible manner than they do by default. Technically speaking, it is a tiny bit of JavaScript that when placed in the head of a page, determines which of your stylesheets should be loaded immediately and block page rendering (any stylesheets intended for mobile-first breakpoints that currently apply), which stylesheets should be deferred to load asynchronously (any stylesheets intended for breakpoints that don't currently apply to the current viewport size, but could apply later, given the device's screen size), and which stylesheets should never be loaded at all (any stylesheets intended for viewport dimensions that are larger than the device's screen). Once sorted, the essential (or eCSSential if you will) files are loaded in a way that ensures page rendering will be blocked until they're ready. The other less-essential files are loaded in a non-blocking way, letting the page render while they are fetched.

In one further improvement to browsers' default loading behavior, stylesheets that are loaded in a blocking manner are given 8 seconds (by default) to load before they are refetched asynchonously, allowing the page to appear and be used.


How To Use

Including the full source of eCSSential.min.js (find that in the /dist folder) inline in the head of your page, and then calling eCSSential(), passing each of the paths to your CSS files paired with a media query describing where they are intended to apply.

<head>
    ...
    <script>
        <!-- Add eCSSential.min.js inline here -->
        eCSSential({
            "all": "css/all.css",
            "(min-width: 20em)": "css/min-20em.css",
            "(min-width: 37.5em)": "css/min-37.5em.css",
            "(min-width: 50em)": "css/min-50em.css",
            "(min-width: 62.5em)": "css/min-62.5em.css"
        });
    </script>
</head>

with a noscript


<head>
    ...
    <script>
        <!-- Add eCSSential.min.js inline here -->
        eCSSential({
            ....
        });
    </script>
    <!-- for non-JS users, load the first few breakpoints for a fallback layout -->
    <noscript>
        <link rel="stylesheet" href="css/all.css">
        <link rel="stylesheet" href="css/min-37.5em.css">
        <link rel="stylesheet" href="css/min-50em.css">
    </noscript>
</head>

Notes

eCSSential includes the window.matchMedia polyfill so that it can run CSS3 media queries via JavaScript in browsers that don't support matchMedia. If you don't need to include the window.matchMedia polyfill (if say, perhaps it's already in your page), just remove the reference to it in the grunt.js file and generate a new build.


Information

* [c]2012 @scottjehl, Filament Group, Inc.
* Licenses: MIT, GPLv2




website
github
download

demo: Default eCSSential Usage
demo: eCSSential with concatenated CSS files
demo: eCSSential with IE-specific stylesheets
demo: eCSSential with a media query polyfill
demo: eCSSential concatentated files demo

Advertisement
Tags: css, plugin, html, web, responsive, speed, webdevelop, design

Leave a Comment

No Comment

© Creative3x Ltd.