markup.tips
| Page | Description | Published On |
|---|---|---|
| Silence Your CSS Footprint With Sass Silent… | Efficiently group your common styles together to reduce your CSS footprint in this Thinkful project.. | |
| Sticking Components above the Fold | Get stuck riding the bleeding edge with this unstable CSS3 feature | |
| Creating an Accessible to-do list powered by… | Enhance a simple to–do list with React.js |
|
| Adopting Orphans with | Up your typography game with the use of this single HTML entity | |
| Making your Markup Speak | Using speakable.jquery.js you too can make your markup talk | |
| Loading Modernizr from a CDN | Get the best of both worlds by loading Modernizr from a CDN near you | |
| Creating an Accessible Settings Table | Create an accessible settings table using HTML5, CSS3, and a sprinkle of jQuery |
Modernizr from a CDN
Modernizr is a lightweight feature detection library for HTML5 and CSS3. Odds are if you use it, you use it on just about everything you work on.
There is a good argument to not load Modernizr from a CDN at all. HTML5 Boilerplate doesn't, but let's say you want to:
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>try{Modernizr} catch(e) {document.write('<script src="./assets/js/vendor/modernizr-2.8.3.min.js"><\/script>')}</script>
This concept comes from HTML5 Boilerplate's technique of loading jQuery from a CDN with a local fallback. First, we attempt to load Modernizr from Cloudflare but in the event that requests fails we fallback to a local copy. This is done using the classic try…catch statement. If Modernizr failed to load from Cloudflare our try statement will fail given at that time Modernizr === undefined. Our catch statement would then execute and inject our local copy to the DOM using document.write().
Disqus This