Scott Jehl scottjehl

## detect IE and version number through injected conditional comments.js
//detect Internet Explorer and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check)

//version arg is for IE version (optional)
//comparison arg supports 'lte', 'gte', etc (optional)

var isIE = (function(undefined){

  var doc = document,
    doc_elem = doc.documentElement,
    cache = {},

## noncritcss.md

      
              1 file
            
          
              10 forks
            
          
              44 comments
            
          
              215 stars
            
          
                scottjehl
                / noncritcss.md
            
            
              Last active
              August 12, 2023 16:57
            
              
                Comparing two ways to load non-critical CSS
              
          
    I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.
TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).
Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

  
## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Fixed Toolbars Polyfill</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
	<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css">
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

## appendaround-db.js
/*! appendAround markup pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL
how-to:
	1. Insert potential element containers throughout the DOM
	2. give each container a data-set attribute with a value that matches all other containers' values
	3. Place your appendAround content in one of the potential containers
	4. Call appendAround() on that element when the DOM is ready
*/
(function( $ ){
	$.fn.appendAround = function(){
	  return this.each(function(){

## EnhanceJS: Resolution-based layout toggle.js
//EnhanceJS (enhancejs.googlecode.com)

//Quick idea for loading CSS depending on Screen resolution with EnhanceJS.
//Smart phones that pass capabilities tests would get mobile.css

//enhance page based on capabilities and serve different CSS based on screen resolution
enhance({
	loadStyles: screen.availWidth < 500 ? ['css/mobile.css'] : ['css/screen.css']
});

## gist:364802
/* coordinate-based click event
 - jsbin http://jsbin.com/ivaxu3/edit
*/
$.fn.clickxy = function(xy, callback){
	var inzone = false,
		tolerance = 10;

	return $(this)
		.bind('mousemove',function(e){
			var offset = $(this).offset(),

## throttledresize.js
// throttled resize event
(function( $ ) {

	$.event.special.throttledresize = {
		setup: function() {
			$( this ).bind( "resize", handler );
		},
		teardown: function(){
			$( this ).unbind( "resize", handler );
		}

## detect IE and version number through injected conditional comments.js
//EnhanceJS isIE test idea

//detect IE and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check)

//version arg is for IE version (optional)
//comparison arg supports 'lte', 'gte', etc (optional)

function isIE(version, comparison) {
	var cc = 'IE';
	if(version){

## head.html
<head>
  ....
</head>
<script>
    (function( w ){
			var doc = w.document,
				// quick async script inject
				ref = doc.getElementsByTagName( "script" )[0],
				loadJS = function( src ){
					var elem = doc.createElement( "script" );

## emToPx.js
/*
	* emToPx: convert a global em-based value to pixels
	* Copyright 2011, Scott Jehl, scottjehl.com
	* MIT License
	* Usage: emToPx function accepts a single number/float argument, returns a number
*/
var emToPx = (function( win ){
	var	doc		= win.document,
		body		= doc.body,
		prop		= "fontSize",
	//detect Internet Explorer and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check)

	//version arg is for IE version (optional)
	//comparison arg supports 'lte', 'gte', etc (optional)

	var isIE = (function(undefined){

	var doc = document,
	doc_elem = doc.documentElement,
	cache = {},
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Fixed Toolbars Polyfill</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
	<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css">
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	/*! appendAround markup pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL
	how-to:
	1. Insert potential element containers throughout the DOM
	2. give each container a data-set attribute with a value that matches all other containers' values
	3. Place your appendAround content in one of the potential containers
	4. Call appendAround() on that element when the DOM is ready
	*/
	(function( $ ){
	$.fn.appendAround = function(){
	return this.each(function(){
	//EnhanceJS (enhancejs.googlecode.com)

	//Quick idea for loading CSS depending on Screen resolution with EnhanceJS.
	//Smart phones that pass capabilities tests would get mobile.css

	//enhance page based on capabilities and serve different CSS based on screen resolution
	enhance({
	loadStyles: screen.availWidth < 500 ? ['css/mobile.css'] : ['css/screen.css']
	});
	/* coordinate-based click event
	- jsbin http://jsbin.com/ivaxu3/edit
	*/
	$.fn.clickxy = function(xy, callback){
	var inzone = false,
	tolerance = 10;

	return $(this)
	.bind('mousemove',function(e){
	var offset = $(this).offset(),
	// throttled resize event
	(function( $ ) {

	$.event.special.throttledresize = {
	setup: function() {
	$( this ).bind( "resize", handler );
	},
	teardown: function(){
	$( this ).unbind( "resize", handler );
	}
	//EnhanceJS isIE test idea

	//detect IE and version number through injected conditional comments (no UA detect, no need for cond. compilation / jscript check)

	//version arg is for IE version (optional)
	//comparison arg supports 'lte', 'gte', etc (optional)

	function isIE(version, comparison) {
	var cc = 'IE';
	if(version){
	<head>
	....
	</head>
	<script>
	(function( w ){
	var doc = w.document,
	// quick async script inject
	ref = doc.getElementsByTagName( "script" )[0],
	loadJS = function( src ){
	var elem = doc.createElement( "script" );
	/*
	* emToPx: convert a global em-based value to pixels
	* Copyright 2011, Scott Jehl, scottjehl.com
	* MIT License
	* Usage: emToPx function accepts a single number/float argument, returns a number
	*/
	var emToPx = (function( win ){
	var doc = win.document,
	body = doc.body,
	prop = "fontSize",