scottjehl / ecssential Goto Github PK
View Code? Open in Web Editor NEWAn experiment in optimized loading of mobile-first responsive CSS.
License: GNU General Public License v2.0
An experiment in optimized loading of mobile-first responsive CSS.
License: GNU General Public License v2.0
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?
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/
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.
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?
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.