Serve CSS Files Based On Screen Width Using Adapt.js
18
Apr
Adapt.js is a tiny (<1kb minified) JavaScript file that can load CSS files according to the width of the web pages.
Before the browser renders a page, it checks for the width and decides the CSS file to be used from a given array.
This can be easily accomplished with a server-side script, however, Adapt.js will work even if caching is enabled and it has support for the resize + orientationchange events.
A potential drawback is the possibility of the flash of unstyled content (the same problem that occurs when using JS-powered web fonts) which can occur only for a tiny period time.
The usage of the script is very straightforward, just include it to your web pages, define the rules and that's it.
Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://adapt.960.gs/
Download: https://github.com/nathansmith/adapt/
Compatibility: All Major Browsers
Website: http://adapt.960.gs/
Download: https://github.com/nathansmith/adapt/
- Tags:
Javascript
- Filed under: Extras, GPL License, MIT License, Other Scripts/Apps.
- 1 Comment
One Response for "Serve CSS Files Based On Screen Width Using Adapt.js"
This is “silly.” We already have some powerful media queries to achieve this, working natively in most clients, now, and mediaquery.js fixes them in gteIE8.
They may not be as short but you avoid the FOUC you described. More info here http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries