YUI 3 Quick Tip: Conditionally load dataURI’d CSS or MHTML
If you’re already using the YUI 3 Loader to load some of your CSS like I do for some sites this can come in really handy. You could also do this via conditional comments, but you can’t control when the load happens in that case.
The trick is to define the trigger for the MHTML module to trigger off of the regular module, & also make sure that the MHTML module will supersede the regular one. Then, it’s a simple matter of setting up either the simple UA check or a test function that returns true/false.
Note the when config setting’s value of “instead” that specifies that this module should replace “icons-css”. That only happens if the test function returns true, indicating hte module should be loaded. Since IE 8+ supports dataURIs, we return true only if running IE 7 or lower which causes the “icons-css” module to be replaced by “icons-css-mhtml”.
It’s a neat trick, huge thanks to Adam Moore of the YUI team for teaching me about it on the forums! Also thanks to Nicholas Zakas for creating CSSEmbed (also here), the tool that makes generating DataURI & MHTML versions of a stylesheet ridiculously easy. Stoyan Stefanov gets a mention here too because of his awesome DataURI/MHTML research.
November 12th, 2010 Comments Off
