scottjehl / ecssential Goto Github PK

View Code? Open in Web Editor NEW

409.0 409.0 33.0 66 KB

An experiment in optimized loading of mobile-first responsive CSS.

License: GNU General Public License v2.0

JavaScript 91.20% CSS 7.67% HTML 1.13%

ecssential's People

Contributors

Stargazers

Watchers

ecssential's Issues

Mobile devices are loading all CSS files

I'm trying this out on a site that I'm building right now, and when I test it on my iPhone it loads all of the stylesheets, even if they're bigger than it needs.

Here is the code I'm using:

    <script type="text/javascript" src="assets/js/eCSSential.min.js"></script>
    <script type="text/javascript">
        eCSSential({
            'all': 'assets/css/default.css',
            '(min-width: 30em)': 'assets/css/480.css',
            '(min-width: 45em)': 'assets/css/720.css',
            '(min-width: 50em)': 'assets/css/800.css',
            '(min-width: 60em)': 'assets/css/980.css',
            '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)': 'assets/css/hires.css',
            'IE6 IE7 IE8': 'assets/css/ie8.css'
        });
    </script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="assets/css/master.css" media="screen" />
    </noscript>

Is there something simple that I'm missing?

Firefox doesn't seem to defer non-applicable scripts

This is a waterfall of enochs.co.uk converted to use eCSSential, the viewport size is 800x600 and the browser is Firefox

http://www.webpagetest.org/result/121219_WW_16721679bce4186f9d51d1d8829e96a8/1/details/

<!-- Styling for all devices -->
<link rel="stylesheet" media="screen" href="/assets/css/screen.core.css" />
<link rel="stylesheet" media="print"  href="/assets/css/print.css" />

<!-- Styling for progressively larger displays
     NOTE:      breakpoints are decided based on the design, not device
     REFERENCE: http://mattwilcox.net/archive/entry/id/1075/ -->
<script>
 /*! eCSSential - v0.1.0 - 2012-06-08
     * https://github.com/scottjehl/eCSSential
     * Copyright (c) 2012 Scott Jehl, @scottjehl, Filament Group, Inc.; Licensed GPL, MIT; Include matchMedia.js: http://j.mp/jay3wJ (MIT)  
*/

[snip... eCSSential code inline here]

        eCSSential({
            "only screen and (min-width: 320px)": "/assets/css/screen.320.css",
            "only screen and (min-width: 480px)": "/assets/css/screen.480.css",
            "only screen and (min-width: 750px)": "/assets/css/screen.750.css",
            "only screen and (min-width: 960px)": "/assets/css/screen.960.css"
        });
    </script>

In my view request 14 - screen.960.css should be being deferred until the end of the waterfall

It appears the eCSSential is active as the initial requests in the waterfall have an altered order compared to the original -http://www.webpagetest.org/result/121219_X1_d70c093ccac6e456aab869d5aa417b1f/1/details/

[request] add release tags

we are cdnjs team, and could you add version tags so that we can host and auto update your project, then make users get your new version in feature.

Question about concatenated files

Not a bug or a problem, just a question for clarification. With the concatenated file method, is the concatenated file that gets loaded a joining of just the files needed for a particular screen size, or a file for all the possible files that could be loaded, so in other words, in the latter case, the same as the file that would be loaded if js was off?

iPhone doesn't download stylesheets that should be deferred

This is a waterfall of enochs.co.uk converted to use eCSSential, tested using iPhone on WebPageTest and the same test has been repeated using the iPhone simulator

http://www.webpagetest.org/result/121219_8G_f81754e92249611edd9ac3f2f4267c29/1/details/

<!-- Styling for all devices -->
<link rel="stylesheet" media="screen" href="/assets/css/screen.core.css" />
<link rel="stylesheet" media="print"  href="/assets/css/print.css" />

<!-- Styling for progressively larger displays
     NOTE:      breakpoints are decided based on the design, not device
     REFERENCE: http://mattwilcox.net/archive/entry/id/1075/ -->
<script>
 /*! eCSSential - v0.1.0 - 2012-06-08
     * https://github.com/scottjehl/eCSSential
     * Copyright (c) 2012 Scott Jehl, @scottjehl, Filament Group, Inc.; Licensed GPL, MIT; Include matchMedia.js: http://j.mp/jay3wJ (MIT)  
*/

[snip... eCSSential code inline here]

        eCSSential({
            "only screen and (min-width: 320px)": "/assets/css/screen.320.css",
            "only screen and (min-width: 480px)": "/assets/css/screen.480.css",
            "only screen and (min-width: 750px)": "/assets/css/screen.750.css",
            "only screen and (min-width: 960px)": "/assets/css/screen.960.css"
        });
    </script>

Only screen.320.css is downloaded, the other stylesheets are not downloaded

LINK tag in DIV breaks window resizing

Because you're putting the LINK tags in a DIV above the HEAD tag, window resizing doesn't work correctly. Why exactly do you put them here? This doesn't allow the overrides that are supposed to happen.

Figure out if IE check could be improved

I'd rather not have the UA-based IE check that's in there now, but it's lighter than other approaches, and doesn't suffer any fate at the hands of uglify.js (as does @cc_on). At the least, one thing to add is a check that it's not WP7 / Mobile IE.

scottjehl / ecssential Goto Github PK

ecssential's People

Contributors

Stargazers

Watchers

Forkers

ecssential's Issues

Mobile devices are loading all CSS files

Firefox doesn't seem to defer non-applicable scripts

[request] add release tags

Question about concatenated files

iPhone doesn't download stylesheets that should be deferred

LINK tag in DIV breaks window resizing

Figure out if IE check could be improved

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs