Skip to content

Instantly share code, notes, and snippets.

@nathansmith

nathansmith/adaptive_layout_idea.html

Created April 6, 2011 05:13
Show Gist options
  • Save nathansmith/905177 to your computer and use it in GitHub Desktop.
Save nathansmith/905177 to your computer and use it in GitHub Desktop.
Download ZIP
Conditionally serve CSS to screen widths that can handle it. With a fallback for when JavaScript is disabled and/or not supported.
Raw
adaptive_layout_idea.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Adaptive Layout Idea
</title>
<link rel="stylesheet" href="basic_defaults.css" />
<noscript>
<link rel="stylesheet" href="fallback.css" />
</noscript>
<script src="small_file_to_determine_css_based_on_width.js"></script>
</head>
<body>
<p>
Hello. Don't look at me. Magic is up above!
</p>
<script src="js_library_of_choice.js"></script>
<script src="other_site_specific.js"></script>
</body>
</html>
@milesw
Copy link

milesw commented Apr 6, 2011

Great idea. Could un-handled errors completely break your layout though?

@nathansmith
Copy link
Author

I guess, but so could un-handled CSS download or unrecognized media query. As with anything in web development, always test your code. :)

@milesw
Copy link

milesw commented Apr 6, 2011

Well I'm just curious how likely it is. You're far more experienced with JS than myself. Does keeping the width calculation confined to that first script help avoid possible issues in the other scripts? Ensuring small_file_to_determine_css_based_on_width.js gets loaded first should help, right?

@nathansmith
Copy link
Author

Yes, the width calculation is sandboxed and can't affect other scripts...

https://gist.github.com/905220

@milesw
Copy link

milesw commented Apr 6, 2011

Ah, excellent. Looking forward to testing this out soon. Seems much more flexible than media queries. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment