├── img
    ├── thumb.jpg
    └── cd-logo.svg
├── partials
    ├── _variables.scss
    ├── _mixins.scss
    └── _layout.scss
├── README.md
├── css
    ├── reset.css
    └── style.css
├── js
    ├── main.js
    └── modernizr.js
├── index.html
└── scss
    └── style.scss


/img/thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codyhouse/smart-fixed-navigation/HEAD/img/thumb.jpg


--------------------------------------------------------------------------------
/partials/_variables.scss:
--------------------------------------------------------------------------------
 1 | // colors
 2 | 
 3 | $color-1: #2c3e51; // blue
 4 | $color-2: #00bd9b; // green
 5 | $color-3: #e84a64; // pink
 6 | $color-4: #ffffff; // white
 7 | $color-5: #eff2f6; // light blue
 8 | 
 9 | // fonts 
10 | 
11 | $primary-font: 'Source Sans Pro', sans-serif;


--------------------------------------------------------------------------------
/partials/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // rem fallback - credits: http://zerosixthree.se/
 2 | 
 3 | @function calculateRem($size) {
 4 |   $remSize: $size / 16px;
 5 |   @return $remSize * 1rem;
 6 | }
 7 | 
 8 | @mixin font-size($size) {
 9 |   font-size: $size;
10 |   font-size: calculateRem($size);
11 | }
12 | 
13 | // border radius
14 | 
15 | @mixin border-radius($radius:.25em) {
16 |   border-radius: $radius;
17 | }
18 | 
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Smart Fixed Navigation
 2 | =========
 3 | 
 4 | A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.
 5 | 
 6 | [Article on CodyHouse](http://codyhouse.co/gem/smart-fixed-navigation/)
 7 | 
 8 | [Demo](http://codyhouse.co/demo/smart-fixed-navigation/index.html)
 9 |  
10 | [Terms](http://codyhouse.co/terms/)
11 | 


--------------------------------------------------------------------------------
/img/cd-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="124px" height="23px" viewBox="0 0 124 23" enable-background="new 0 0 124 23" xml:space="preserve">
 6 | <rect fill="#2C3E51" width="70" height="23"/>
 7 | <rect x="70" fill="#00BD9B" width="27" height="23"/>
 8 | <rect x="97" fill="#91CEC2" width="27" height="23"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/partials/_layout.scss:
--------------------------------------------------------------------------------
 1 | // breakpoints
 2 |    
 3 | $S:     320px;   
 4 | $M:     768px;     
 5 | $L:     1170px;     
 6 | 
 7 | // media queries
 8 | 
 9 | @mixin MQ($canvas) {
10 |   @if $canvas == S {
11 |    @media only screen and (min-width: $S) { @content; } 
12 |   }
13 |   @else if $canvas == M {
14 |    @media only screen and (min-width: $M) { @content; } 
15 |   }
16 |   @else if $canvas == L {
17 |    @media only screen and (min-width: $L) { @content; } 
18 |   }
19 | }
20 | 
21 | // super light grid - it works with the .cd-container class inside style.scss
22 | 
23 | @mixin column($percentage, $float-direction:left) {
24 |   width: 100% * $percentage;
25 |   float: $float-direction;
26 | }
27 | 
28 | 


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure, 
28 | footer, header, hgroup, menu, nav, section, main {
29 | 	display: block;
30 | }
31 | body {
32 | 	line-height: 1;
33 | }
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
 1 | jQuery(document).ready(function($){
 2 | 	// browser window scroll (in pixels) after which the "menu" link is shown
 3 | 	var offset = 300;
 4 | 
 5 | 	var navigationContainer = $('#cd-nav'),
 6 | 		mainNavigation = navigationContainer.find('#cd-main-nav ul');
 7 | 
 8 | 	//hide or show the "menu" link
 9 | 	checkMenu();
10 | 	$(window).scroll(function(){
11 | 		checkMenu();
12 | 	});
13 | 
14 | 	//open or close the menu clicking on the bottom "menu" link
15 | 	$('.cd-nav-trigger').on('click', function(){
16 | 		$(this).toggleClass('menu-is-open');
17 | 		//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
18 | 		mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');
19 | 
20 | 	});
21 | 
22 | 	function checkMenu() {
23 | 		if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
24 | 			navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
25 | 				mainNavigation.addClass('has-transitions');
26 | 			});
27 | 		} else if ($(window).scrollTop() <= offset) {
28 | 			//check if the menu is open when scrolling up
29 | 			if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
30 | 				//close the menu with animation
31 | 				mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
32 | 					//wait for the menu to be closed and do the rest
33 | 					mainNavigation.removeClass('is-visible is-hidden has-transitions');
34 | 					navigationContainer.removeClass('is-fixed');
35 | 					$('.cd-nav-trigger').removeClass('menu-is-open');
36 | 				});
37 | 			//check if the menu is open when scrolling up - fallback if transitions are not supported
38 | 			} else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
39 | 					mainNavigation.removeClass('is-visible has-transitions');
40 | 					navigationContainer.removeClass('is-fixed');
41 | 					$('.cd-nav-trigger').removeClass('menu-is-open');
42 | 			//scrolling up with menu closed
43 | 			} else {
44 | 				navigationContainer.removeClass('is-fixed');
45 | 				mainNavigation.removeClass('has-transitions');
46 | 			}
47 | 		} 
48 | 	}
49 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="no-js">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 | 	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
 8 | 
 9 | 	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
10 | 	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
11 | 	<script src="js/modernizr.js"></script> <!-- Modernizr -->
12 |   	
13 | 	<title>Smart Fixed Navigation</title>
14 | </head>
15 | <body>
16 | 	<header>
17 | 		<div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
18 | 		<h1>Smart Fixed Navigation</h1>
19 | 	</header>
20 | 
21 | 	<div id="cd-nav">
22 | 		<a href="#0" class="cd-nav-trigger">Menu<span></span></a>
23 | 
24 | 		<nav id="cd-main-nav">
25 | 			<ul>
26 | 				<li><a href="#0">Homepage</a></li>
27 | 				<li><a href="#0">Services</a></li>
28 | 				<li><a href="#0">Portfolio</a></li>
29 | 				<li><a href="#0">Pricing</a></li>
30 | 				<li><a href="#0">Contact</a></li>
31 | 			</ul>
32 | 		</nav>
33 | 	</div>
34 | 
35 | 	<main>
36 | 		<ul id="cd-gallery-items" class="cd-container">
37 | 			<li>
38 | 				<img src="img/thumb.jpg" alt="Preview image">
39 | 			</li>
40 | 
41 | 			<li>
42 | 				<img src="img/thumb.jpg" alt="Preview image">
43 | 			</li>
44 | 
45 | 			<li>
46 | 				<img src="img/thumb.jpg" alt="Preview image">
47 | 			</li>
48 | 
49 | 			<li>
50 | 				<img src="img/thumb.jpg" alt="Preview image">
51 | 			</li>
52 | 
53 | 			<li>
54 | 				<img src="img/thumb.jpg" alt="Preview image">
55 | 			</li>
56 | 
57 | 			<li>
58 | 				<img src="img/thumb.jpg" alt="Preview image">
59 | 			</li>
60 | 
61 | 			<li>
62 | 				<img src="img/thumb.jpg" alt="Preview image">
63 | 			</li>
64 | 
65 | 			<li>
66 | 				<img src="img/thumb.jpg" alt="Preview image">
67 | 			</li>
68 | 
69 | 			<li>
70 | 				<img src="img/thumb.jpg" alt="Preview image">
71 | 			</li>
72 | 
73 | 			<li>
74 | 				<img src="img/thumb.jpg" alt="Preview image">
75 | 			</li>
76 | 
77 | 			<li>
78 | 				<img src="img/thumb.jpg" alt="Preview image">
79 | 			</li>
80 | 
81 | 			<li>
82 | 				<img src="img/thumb.jpg" alt="Preview image">
83 | 			</li>
84 | 		</ul> <!-- cd-gallery-items -->
85 | 	</main>
86 | <script src="js/jquery-2.1.1.js"></script>
87 | <script src="js/main.js"></script> <!-- Resource jQuery -->
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
  1 | @import 'bourbon'; // http://bourbon.io/
  2 | 
  3 | @import '../partials/variables'; // colors, fonts etc...
  4 | 
  5 | @import '../partials/mixins'; // custom mixins
  6 | 
  7 | @import '../partials/layout'; // responsive grid and media queries
  8 | 
  9 | /* -------------------------------- 
 10 | 
 11 | Primary style
 12 | 
 13 | -------------------------------- */
 14 | 
 15 | html * {
 16 | 	-webkit-font-smoothing: antialiased;
 17 | 	-moz-osx-font-smoothing: grayscale;
 18 | }
 19 | 
 20 | *, *:after, *:before {
 21 | 	@include box-sizing(border-box);
 22 | }
 23 | 
 24 | body {
 25 | 	font: {
 26 | 		size: 100%;
 27 | 		family: $primary-font; // variables inside partials > _variables.scss
 28 | 	}
 29 | 	color: $color-1;
 30 | 	background-color: $color-1;
 31 | }
 32 | 
 33 | a {
 34 | 	color: $color-3;
 35 | 	text-decoration: none;
 36 | }
 37 | 
 38 | img {
 39 | 	max-width: 100%;
 40 | }
 41 | 
 42 | /* -------------------------------- 
 43 | 
 44 | Modules - reusable parts of our design
 45 | 
 46 | -------------------------------- */
 47 | 
 48 | .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 49 | 	width: 90%;
 50 | 	max-width: $L; // breakpoints inside partials > _layout.scss
 51 | 	margin: 0 auto;
 52 | 
 53 | 	&::after { /* clearfix */
 54 | 		content: '';
 55 | 		display: table;
 56 | 		clear: both;
 57 | 	}
 58 | }
 59 | 
 60 | /* -------------------------------- 
 61 | 
 62 | Main components 
 63 | 
 64 | -------------------------------- */
 65 | 
 66 | header {
 67 | 	position: relative;
 68 | 	height: 200px;
 69 | 	background: $color-4;
 70 | 	text-align: center;
 71 | 	margin-bottom: 1em;
 72 | 	padding-top: 3em;
 73 | 
 74 | 	#cd-logo {
 75 | 		margin-bottom: 3em;
 76 | 	}
 77 | 
 78 | 	h1 {
 79 | 		@include font-size(20px);
 80 | 	}
 81 | 
 82 | 	@include MQ(M) {
 83 | 		margin-bottom: 4em;
 84 | 	}
 85 | 
 86 | 	@include MQ(L) {
 87 | 		height: 400px;
 88 | 		padding-top: 11em;
 89 | 
 90 | 		#cd-logo {
 91 | 			position: absolute;
 92 | 			top: 40px;
 93 | 			left: 5%;
 94 | 		}
 95 | 
 96 | 		h1 {
 97 | 			@include font-size(40px);
 98 | 			font-weight: 300;
 99 | 		}
100 | 	}
101 | }
102 | 
103 | #cd-nav { 
104 | 	ul {
105 | 		/* mobile first */
106 | 		position: fixed;
107 | 		width: 90%;
108 | 		max-width: 400px;
109 | 		right: 5%;
110 | 		bottom: 20px;
111 | 		@include border-radius;
112 | 		box-shadow: 0 0 10px rgba($color-3, .4);
113 | 		background: $color-4;
114 | 		visibility: hidden;
115 | 
116 | 		/* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
117 | 		overflow: hidden;
118 | 
119 | 		z-index: 1;
120 | 
121 | 		/* Force Hardware Acceleration in WebKit */
122 | 		-webkit-backface-visibility: hidden;
123 | 		backface-visibility: hidden;
124 | 
125 | 		@include transform(scale(0));
126 | 		@include transform-origin(100% 100%);
127 | 		-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
128 | 		-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
129 | 		transition: transform 0.3s, visibility 0s 0.3s;
130 | 
131 | 		li {
132 | 			/* Force Hardware Acceleration in WebKit */
133 | 			-webkit-backface-visibility: hidden;
134 | 			backface-visibility: hidden;
135 | 		}
136 | 
137 | 		&.is-visible {
138 | 			visibility: visible;
139 | 			@include transform(scale(1));
140 | 			-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
141 | 			-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
142 | 			transition: transform 0.3s, visibility 0s 0s;
143 | 
144 | 			li:nth-child(1) { /* list items animation */
145 | 				@include animation(cd-slide-in .2s);
146 | 			}
147 | 
148 | 			li:nth-child(2) {
149 | 				@include animation(cd-slide-in .3s);
150 | 			}
151 | 
152 | 			li:nth-child(3) {
153 | 				@include animation(cd-slide-in .4s);
154 | 			}
155 | 
156 | 			li:nth-child(4) {
157 | 				@include animation(cd-slide-in .5s);
158 | 			}
159 | 
160 | 			li:nth-child(5) {
161 | 				@include animation(cd-slide-in .6s);
162 | 			}
163 | 		}
164 | 	}
165 | 
166 | 	li a {
167 | 		display: block;
168 | 		padding: 1.6em;
169 | 		border-bottom: 1px solid $color-5;
170 | 	}
171 | 
172 | 	li:last-child a {
173 | 		border-bottom: none;
174 | 	}
175 | 
176 | 	@include MQ(L) {
177 | 		ul {
178 | 			/* the navigation moves to the top */
179 | 			position: absolute;
180 | 			width: auto;
181 | 			max-width: none;
182 | 			bottom: auto;
183 | 			top: 36px;
184 | 			background: transparent;
185 | 			visibility: visible;
186 | 			box-shadow: none;
187 | 			@include transform(scale(1));
188 | 			@include transition(all 0s);
189 | 		}
190 | 
191 | 		li {
192 | 			display: inline-block;
193 | 		}
194 | 
195 | 		li a {
196 | 			opacity: 1;
197 | 			padding: .4em;
198 | 			margin-left: 1.6em;
199 | 			border-bottom: none;
200 | 
201 | 			&:hover {
202 | 				color: $color-2;
203 | 			}
204 | 		}
205 | 
206 | 		&.is-fixed ul {
207 | 			/* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
208 | 			position: fixed;
209 | 			width: 90%;
210 | 			max-width: 400px;
211 | 			bottom: 20px;
212 | 			top: auto;
213 | 			background: $color-4;
214 | 			visibility: hidden;
215 | 			box-shadow: 0 0 10px rgba($color-3, .4);
216 | 			@include transform(scale(0));
217 | 			
218 | 			li {
219 | 				display: block;
220 | 			}
221 | 
222 | 			li a {
223 | 				padding: 1.6em;
224 | 				margin-left: 0;
225 | 				border-bottom: 1px solid $color-5;
226 | 			}
227 | 		}
228 | 
229 | 		ul.has-transitions {
230 | 			/* this class is used to bring back transitions when the navigation moves at the bottom right */
231 | 			-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
232 | 			-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
233 | 			transition: transform 0.3s, visibility 0s 0.3s;
234 | 		}
235 | 
236 | 		ul.is-visible {
237 | 			/* this class is used to bring back the navigation animation - as on touch devices */
238 | 			visibility: visible;
239 | 			@include transform(scale(1));
240 | 
241 | 			-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
242 | 			-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
243 | 			transition: transform 0.3s, visibility 0s 0s;
244 | 		}
245 | 
246 | 		ul.is-hidden {
247 | 			/* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
248 | 			@include transform(scale(0));
249 | 			-webkit-transition: -webkit-transform 0.3s;
250 | 			-moz-transition: -moz-transform 0.3s;
251 | 			transition: transform 0.3s;
252 | 		}
253 | 	}
254 | }
255 | 
256 | .cd-nav-trigger {
257 | 	position: fixed;
258 | 	bottom: 20px;
259 | 	right: 5%;
260 | 	width: 44px;
261 | 	height: 44px;
262 | 	background: $color-4;
263 | 	@include border-radius;
264 | 	box-shadow: 0 0 10px rgba($color-3, .4);
265 | 
266 | 	/* image replacement */
267 | 	overflow: hidden;
268 | 	text-indent: 100%;
269 | 	white-space: nowrap;
270 | 
271 | 	z-index: 2;
272 | 
273 | 	span {
274 | 		/* the span element is used to create the menu icon */
275 | 		position: absolute;
276 | 		display: block;
277 | 		width: 20px;
278 | 		height: 2px;
279 | 		background: $color-3;
280 | 		top: 50%;
281 | 		margin-top: -1px;
282 | 		left: 50%;
283 | 		margin-left: -10px;
284 | 		-webkit-transition: background 0.3s;
285 | 		-moz-transition: background 0.3s;
286 | 		transition: background 0.3s;
287 | 
288 | 		&::before, &::after {
289 | 			content: '';
290 | 			position: absolute;
291 | 			left: 0;
292 | 			background: inherit;
293 | 			width: 100%;
294 | 			height: 100%;
295 | 
296 | 			/* Force Hardware Acceleration in WebKit */
297 | 			@include transform(translateZ(0));
298 | 			-webkit-backface-visibility: hidden;
299 | 			backface-visibility: hidden;
300 | 
301 | 			-webkit-transition: -webkit-transform 0.3s, background 0s;
302 | 			-moz-transition: -moz-transform 0.3s, background 0s;
303 | 			transition: transform 0.3s, background 0s;
304 | 		}
305 | 
306 | 		&::before {
307 | 			top: -6px;
308 | 			@include transform(rotate(0));
309 | 		}
310 | 
311 | 		&::after {
312 | 			bottom: -6px;
313 | 			@include transform(rotate(0));
314 | 		}
315 | 	}
316 | 
317 | 	&.menu-is-open {
318 | 		box-shadow: none;
319 | 	}
320 | 
321 | 	&.menu-is-open span {
322 | 		background: rgba($color-3, 0);
323 | 
324 | 		&::before, &::after {
325 | 			background: rgba($color-3, 1);
326 | 		}
327 | 
328 | 		&::before {
329 | 			top: 0;
330 | 			@include transform(rotate(135deg));
331 | 		}
332 | 
333 | 		&::after {
334 | 			bottom: 0;
335 | 			@include transform(rotate(225deg));
336 | 		}
337 | 	}
338 | 
339 | 	@include MQ(L) {
340 | 		/* the the menu triger is hidden by default on desktop devices */
341 | 		visibility: hidden;
342 | 		@include transform(scale(0));
343 | 		-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
344 | 		-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
345 | 		transition: transform 0.3s, visibility 0s 0.3s;
346 | 
347 | 		.is-fixed & {
348 | 			visibility: visible;
349 | 			@include transition(all 0s);
350 | 			@include transform(scale(1));
351 | 			@include animation(cd-bounce-in .3s linear);
352 | 		}
353 | 	}
354 | }
355 | 
356 | #cd-gallery-items {
357 | 	li {
358 | 		margin-bottom: 1.5em;
359 | 		box-shadow: 0 1px 2px rgba(#000, .2);
360 | 		@include border-radius;
361 | 
362 | 		img {
363 | 			width: 100%;
364 | 			display: block;
365 | 			@include border-radius;
366 | 		}
367 | 	}
368 | 
369 | 	@include MQ(M) {
370 | 		li {
371 | 			@include column(.48); // see how this mixin works inside partials > _layout.scss
372 | 			margin-bottom: 2em;
373 | 			margin-right: 4%;
374 | 
375 | 			&:nth-child(2n) {
376 | 				margin-right: 0;
377 | 			}
378 | 		}
379 | 	}
380 | 
381 | 	@include MQ(L) {
382 | 		li {
383 | 			@include column(.31);
384 | 			margin-bottom: 2.5em;
385 | 			margin-right: 3.5%;
386 | 
387 | 			&:nth-child(2n) {
388 | 				margin-right: 3.5%;
389 | 			}
390 | 
391 | 			&:nth-child(3n) {
392 | 				margin-right: 0;
393 | 			}
394 | 		}
395 | 	}
396 | }
397 | 
398 | @include keyframes(cd-slide-in) {
399 | 	0% {
400 | 		@include transform(translateX(100px));
401 | 	}
402 | 
403 | 	100% {
404 | 		@include transform(translateY(0));
405 | 	}
406 | }
407 | 
408 | @include keyframes(cd-bounce-in) {
409 | 	0% {
410 | 		@include transform(scale(0));
411 | 	}
412 | 
413 | 	60% {
414 | 		@include transform(scale(1.2));
415 | 	}
416 | 
417 | 	100% {
418 | 		@include transform(scale(1));
419 | 	}
420 | }
421 | 
422 | 
423 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /* -------------------------------- 
  2 | 
  3 | Primary style
  4 | 
  5 | -------------------------------- */
  6 | html * {
  7 |   -webkit-font-smoothing: antialiased;
  8 |   -moz-osx-font-smoothing: grayscale;
  9 | }
 10 | 
 11 | *, *:after, *:before {
 12 |   -webkit-box-sizing: border-box;
 13 |   -moz-box-sizing: border-box;
 14 |   box-sizing: border-box;
 15 | }
 16 | 
 17 | body {
 18 |   font-size: 100%;
 19 |   font-family: "Source Sans Pro", sans-serif;
 20 |   color: #2c3e51;
 21 |   background-color: #2c3e51;
 22 | }
 23 | 
 24 | a {
 25 |   color: #e84a64;
 26 |   text-decoration: none;
 27 | }
 28 | 
 29 | img {
 30 |   max-width: 100%;
 31 | }
 32 | 
 33 | /* -------------------------------- 
 34 | 
 35 | Modules - reusable parts of our design
 36 | 
 37 | -------------------------------- */
 38 | .cd-container {
 39 |   /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 40 |   width: 90%;
 41 |   max-width: 1170px;
 42 |   margin: 0 auto;
 43 | }
 44 | .cd-container::after {
 45 |   /* clearfix */
 46 |   content: '';
 47 |   display: table;
 48 |   clear: both;
 49 | }
 50 | 
 51 | /* -------------------------------- 
 52 | 
 53 | Main components 
 54 | 
 55 | -------------------------------- */
 56 | header {
 57 |   position: relative;
 58 |   height: 200px;
 59 |   background: white;
 60 |   text-align: center;
 61 |   margin-bottom: 1em;
 62 |   padding-top: 3em;
 63 | }
 64 | header #cd-logo {
 65 |   margin-bottom: 3em;
 66 | }
 67 | header h1 {
 68 |   font-size: 20px;
 69 |   font-size: 1.25rem;
 70 | }
 71 | @media only screen and (min-width: 768px) {
 72 |   header {
 73 |     margin-bottom: 4em;
 74 |   }
 75 | }
 76 | @media only screen and (min-width: 1170px) {
 77 |   header {
 78 |     height: 400px;
 79 |     padding-top: 11em;
 80 |   }
 81 |   header #cd-logo {
 82 |     position: absolute;
 83 |     top: 40px;
 84 |     left: 5%;
 85 |   }
 86 |   header h1 {
 87 |     font-size: 40px;
 88 |     font-size: 2.5rem;
 89 |     font-weight: 300;
 90 |   }
 91 | }
 92 | 
 93 | #cd-nav ul {
 94 |   /* mobile first */
 95 |   position: fixed;
 96 |   width: 90%;
 97 |   max-width: 400px;
 98 |   right: 5%;
 99 |   bottom: 20px;
100 |   border-radius: 0.25em;
101 |   box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
102 |   background: white;
103 |   visibility: hidden;
104 |   /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
105 |   overflow: hidden;
106 |   z-index: 1;
107 |   /* Force Hardware Acceleration in WebKit */
108 |   -webkit-backface-visibility: hidden;
109 |   backface-visibility: hidden;
110 |   -webkit-transform: scale(0);
111 |   -moz-transform: scale(0);
112 |   -ms-transform: scale(0);
113 |   -o-transform: scale(0);
114 |   transform: scale(0);
115 |   -webkit-transform-origin: 100% 100%;
116 |   -moz-transform-origin: 100% 100%;
117 |   -ms-transform-origin: 100% 100%;
118 |   -o-transform-origin: 100% 100%;
119 |   transform-origin: 100% 100%;
120 |   -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
121 |   -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
122 |   transition: transform 0.3s, visibility 0s 0.3s;
123 | }
124 | #cd-nav ul li {
125 |   /* Force Hardware Acceleration in WebKit */
126 |   -webkit-backface-visibility: hidden;
127 |   backface-visibility: hidden;
128 | }
129 | #cd-nav ul.is-visible {
130 |   visibility: visible;
131 |   -webkit-transform: scale(1);
132 |   -moz-transform: scale(1);
133 |   -ms-transform: scale(1);
134 |   -o-transform: scale(1);
135 |   transform: scale(1);
136 |   -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
137 |   -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
138 |   transition: transform 0.3s, visibility 0s 0s;
139 | }
140 | #cd-nav ul.is-visible li:nth-child(1) {
141 |   /* list items animation */
142 |   -webkit-animation: cd-slide-in 0.2s;
143 |   -moz-animation: cd-slide-in 0.2s;
144 |   animation: cd-slide-in 0.2s;
145 | }
146 | #cd-nav ul.is-visible li:nth-child(2) {
147 |   -webkit-animation: cd-slide-in 0.3s;
148 |   -moz-animation: cd-slide-in 0.3s;
149 |   animation: cd-slide-in 0.3s;
150 | }
151 | #cd-nav ul.is-visible li:nth-child(3) {
152 |   -webkit-animation: cd-slide-in 0.4s;
153 |   -moz-animation: cd-slide-in 0.4s;
154 |   animation: cd-slide-in 0.4s;
155 | }
156 | #cd-nav ul.is-visible li:nth-child(4) {
157 |   -webkit-animation: cd-slide-in 0.5s;
158 |   -moz-animation: cd-slide-in 0.5s;
159 |   animation: cd-slide-in 0.5s;
160 | }
161 | #cd-nav ul.is-visible li:nth-child(5) {
162 |   -webkit-animation: cd-slide-in 0.6s;
163 |   -moz-animation: cd-slide-in 0.6s;
164 |   animation: cd-slide-in 0.6s;
165 | }
166 | #cd-nav li a {
167 |   display: block;
168 |   padding: 1.6em;
169 |   border-bottom: 1px solid #eff2f6;
170 | }
171 | #cd-nav li:last-child a {
172 |   border-bottom: none;
173 | }
174 | @media only screen and (min-width: 1170px) {
175 |   #cd-nav ul {
176 |     /* the navigation moves to the top */
177 |     position: absolute;
178 |     width: auto;
179 |     max-width: none;
180 |     bottom: auto;
181 |     top: 36px;
182 |     background: transparent;
183 |     visibility: visible;
184 |     box-shadow: none;
185 |     -webkit-transform: scale(1);
186 |     -moz-transform: scale(1);
187 |     -ms-transform: scale(1);
188 |     -o-transform: scale(1);
189 |     transform: scale(1);
190 |     -webkit-transition: all 0s;
191 |     -moz-transition: all 0s;
192 |     transition: all 0s;
193 |   }
194 |   #cd-nav li {
195 |     display: inline-block;
196 |   }
197 |   #cd-nav li a {
198 |     opacity: 1;
199 |     padding: .4em;
200 |     margin-left: 1.6em;
201 |     border-bottom: none;
202 |   }
203 |   #cd-nav li a:hover {
204 |     color: #00bd9b;
205 |   }
206 |   #cd-nav.is-fixed ul {
207 |     /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
208 |     position: fixed;
209 |     width: 90%;
210 |     max-width: 400px;
211 |     bottom: 20px;
212 |     top: auto;
213 |     background: white;
214 |     visibility: hidden;
215 |     box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
216 |     -webkit-transform: scale(0);
217 |     -moz-transform: scale(0);
218 |     -ms-transform: scale(0);
219 |     -o-transform: scale(0);
220 |     transform: scale(0);
221 |   }
222 |   #cd-nav.is-fixed ul li {
223 |     display: block;
224 |   }
225 |   #cd-nav.is-fixed ul li a {
226 |     padding: 1.6em;
227 |     margin-left: 0;
228 |     border-bottom: 1px solid #eff2f6;
229 |   }
230 |   #cd-nav ul.has-transitions {
231 |     /* this class is used to bring back transitions when the navigation moves at the bottom right */
232 |     -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
233 |     -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
234 |     transition: transform 0.3s, visibility 0s 0.3s;
235 |   }
236 |   #cd-nav ul.is-visible {
237 |     /* this class is used to bring back the navigation animation - as on touch devices */
238 |     visibility: visible;
239 |     -webkit-transform: scale(1);
240 |     -moz-transform: scale(1);
241 |     -ms-transform: scale(1);
242 |     -o-transform: scale(1);
243 |     transform: scale(1);
244 |     -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
245 |     -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
246 |     transition: transform 0.3s, visibility 0s 0s;
247 |   }
248 |   #cd-nav ul.is-hidden {
249 |     /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
250 |     -webkit-transform: scale(0);
251 |     -moz-transform: scale(0);
252 |     -ms-transform: scale(0);
253 |     -o-transform: scale(0);
254 |     transform: scale(0);
255 |     -webkit-transition: -webkit-transform 0.3s;
256 |     -moz-transition: -moz-transform 0.3s;
257 |     transition: transform 0.3s;
258 |   }
259 | }
260 | 
261 | .cd-nav-trigger {
262 |   position: fixed;
263 |   bottom: 20px;
264 |   right: 5%;
265 |   width: 44px;
266 |   height: 44px;
267 |   background: white;
268 |   border-radius: 0.25em;
269 |   box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
270 |   /* image replacement */
271 |   overflow: hidden;
272 |   text-indent: 100%;
273 |   white-space: nowrap;
274 |   z-index: 2;
275 | }
276 | .cd-nav-trigger span {
277 |   /* the span element is used to create the menu icon */
278 |   position: absolute;
279 |   display: block;
280 |   width: 20px;
281 |   height: 2px;
282 |   background: #e84a64;
283 |   top: 50%;
284 |   margin-top: -1px;
285 |   left: 50%;
286 |   margin-left: -10px;
287 |   -webkit-transition: background 0.3s;
288 |   -moz-transition: background 0.3s;
289 |   transition: background 0.3s;
290 | }
291 | .cd-nav-trigger span::before, .cd-nav-trigger span::after {
292 |   content: '';
293 |   position: absolute;
294 |   left: 0;
295 |   background: inherit;
296 |   width: 100%;
297 |   height: 100%;
298 |   /* Force Hardware Acceleration in WebKit */
299 |   -webkit-transform: translateZ(0);
300 |   -moz-transform: translateZ(0);
301 |   -ms-transform: translateZ(0);
302 |   -o-transform: translateZ(0);
303 |   transform: translateZ(0);
304 |   -webkit-backface-visibility: hidden;
305 |   backface-visibility: hidden;
306 |   -webkit-transition: -webkit-transform 0.3s, background 0s;
307 |   -moz-transition: -moz-transform 0.3s, background 0s;
308 |   transition: transform 0.3s, background 0s;
309 | }
310 | .cd-nav-trigger span::before {
311 |   top: -6px;
312 |   -webkit-transform: rotate(0);
313 |   -moz-transform: rotate(0);
314 |   -ms-transform: rotate(0);
315 |   -o-transform: rotate(0);
316 |   transform: rotate(0);
317 | }
318 | .cd-nav-trigger span::after {
319 |   bottom: -6px;
320 |   -webkit-transform: rotate(0);
321 |   -moz-transform: rotate(0);
322 |   -ms-transform: rotate(0);
323 |   -o-transform: rotate(0);
324 |   transform: rotate(0);
325 | }
326 | .cd-nav-trigger.menu-is-open {
327 |   box-shadow: none;
328 | }
329 | .cd-nav-trigger.menu-is-open span {
330 |   background: rgba(232, 74, 100, 0);
331 | }
332 | .cd-nav-trigger.menu-is-open span::before, .cd-nav-trigger.menu-is-open span::after {
333 |   background: #e84a64;
334 | }
335 | .cd-nav-trigger.menu-is-open span::before {
336 |   top: 0;
337 |   -webkit-transform: rotate(135deg);
338 |   -moz-transform: rotate(135deg);
339 |   -ms-transform: rotate(135deg);
340 |   -o-transform: rotate(135deg);
341 |   transform: rotate(135deg);
342 | }
343 | .cd-nav-trigger.menu-is-open span::after {
344 |   bottom: 0;
345 |   -webkit-transform: rotate(225deg);
346 |   -moz-transform: rotate(225deg);
347 |   -ms-transform: rotate(225deg);
348 |   -o-transform: rotate(225deg);
349 |   transform: rotate(225deg);
350 | }
351 | @media only screen and (min-width: 1170px) {
352 |   .cd-nav-trigger {
353 |     /* the the menu triger is hidden by default on desktop devices */
354 |     visibility: hidden;
355 |     -webkit-transform: scale(0);
356 |     -moz-transform: scale(0);
357 |     -ms-transform: scale(0);
358 |     -o-transform: scale(0);
359 |     transform: scale(0);
360 |     -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
361 |     -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
362 |     transition: transform 0.3s, visibility 0s 0.3s;
363 |   }
364 |   .is-fixed .cd-nav-trigger {
365 |     visibility: visible;
366 |     -webkit-transition: all 0s;
367 |     -moz-transition: all 0s;
368 |     transition: all 0s;
369 |     -webkit-transform: scale(1);
370 |     -moz-transform: scale(1);
371 |     -ms-transform: scale(1);
372 |     -o-transform: scale(1);
373 |     transform: scale(1);
374 |     -webkit-animation: cd-bounce-in 0.3s linear;
375 |     -moz-animation: cd-bounce-in 0.3s linear;
376 |     animation: cd-bounce-in 0.3s linear;
377 |   }
378 | }
379 | 
380 | #cd-gallery-items li {
381 |   margin-bottom: 1.5em;
382 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
383 |   border-radius: 0.25em;
384 | }
385 | #cd-gallery-items li img {
386 |   width: 100%;
387 |   display: block;
388 |   border-radius: 0.25em;
389 | }
390 | @media only screen and (min-width: 768px) {
391 |   #cd-gallery-items li {
392 |     width: 48%;
393 |     float: left;
394 |     margin-bottom: 2em;
395 |     margin-right: 4%;
396 |   }
397 |   #cd-gallery-items li:nth-child(2n) {
398 |     margin-right: 0;
399 |   }
400 | }
401 | @media only screen and (min-width: 1170px) {
402 |   #cd-gallery-items li {
403 |     width: 31%;
404 |     float: left;
405 |     margin-bottom: 2.5em;
406 |     margin-right: 3.5%;
407 |   }
408 |   #cd-gallery-items li:nth-child(2n) {
409 |     margin-right: 3.5%;
410 |   }
411 |   #cd-gallery-items li:nth-child(3n) {
412 |     margin-right: 0;
413 |   }
414 | }
415 | 
416 | @-webkit-keyframes cd-slide-in {
417 |   0% {
418 |     -webkit-transform: translateX(100px);
419 |   }
420 | 
421 |   100% {
422 |     -webkit-transform: translateY(0);
423 |   }
424 | }
425 | @-moz-keyframes cd-slide-in {
426 |   0% {
427 |     -moz-transform: translateX(100px);
428 |   }
429 | 
430 |   100% {
431 |     -moz-transform: translateY(0);
432 |   }
433 | }
434 | @keyframes cd-slide-in {
435 |   0% {
436 |     -webkit-transform: translateX(100px);
437 |     -moz-transform: translateX(100px);
438 |     -ms-transform: translateX(100px);
439 |     -o-transform: translateX(100px);
440 |     transform: translateX(100px);
441 |   }
442 | 
443 |   100% {
444 |     -webkit-transform: translateY(0);
445 |     -moz-transform: translateY(0);
446 |     -ms-transform: translateY(0);
447 |     -o-transform: translateY(0);
448 |     transform: translateY(0);
449 |   }
450 | }
451 | @-webkit-keyframes cd-bounce-in {
452 |   0% {
453 |     -webkit-transform: scale(0);
454 |   }
455 | 
456 |   60% {
457 |     -webkit-transform: scale(1.2);
458 |   }
459 | 
460 |   100% {
461 |     -webkit-transform: scale(1);
462 |   }
463 | }
464 | @-moz-keyframes cd-bounce-in {
465 |   0% {
466 |     -moz-transform: scale(0);
467 |   }
468 | 
469 |   60% {
470 |     -moz-transform: scale(1.2);
471 |   }
472 | 
473 |   100% {
474 |     -moz-transform: scale(1);
475 |   }
476 | }
477 | @keyframes cd-bounce-in {
478 |   0% {
479 |     -webkit-transform: scale(0);
480 |     -moz-transform: scale(0);
481 |     -ms-transform: scale(0);
482 |     -o-transform: scale(0);
483 |     transform: scale(0);
484 |   }
485 | 
486 |   60% {
487 |     -webkit-transform: scale(1.2);
488 |     -moz-transform: scale(1.2);
489 |     -ms-transform: scale(1.2);
490 |     -o-transform: scale(1.2);
491 |     transform: scale(1.2);
492 |   }
493 | 
494 |   100% {
495 |     -webkit-transform: scale(1);
496 |     -moz-transform: scale(1);
497 |     -ms-transform: scale(1);
498 |     -o-transform: scale(1);
499 |     transform: scale(1);
500 |   }
501 | }
502 | 


--------------------------------------------------------------------------------
/js/modernizr.js:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * Modernizr v2.7.1
   3 |  * www.modernizr.com
   4 |  *
   5 |  * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton
   6 |  * Available under the BSD and MIT licenses: www.modernizr.com/license/
   7 |  */
   8 | 
   9 | /*
  10 |  * Modernizr tests which native CSS3 and HTML5 features are available in
  11 |  * the current UA and makes the results available to you in two ways:
  12 |  * as properties on a global Modernizr object, and as classes on the
  13 |  * <html> element. This information allows you to progressively enhance
  14 |  * your pages with a granular level of control over the experience.
  15 |  *
  16 |  * Modernizr has an optional (not included) conditional resource loader
  17 |  * called Modernizr.load(), based on Yepnope.js (yepnopejs.com).
  18 |  * To get a build that includes Modernizr.load(), as well as choosing
  19 |  * which tests to include, go to www.modernizr.com/download/
  20 |  *
  21 |  * Authors        Faruk Ates, Paul Irish, Alex Sexton
  22 |  * Contributors   Ryan Seddon, Ben Alman
  23 |  */
  24 | 
  25 | window.Modernizr = (function( window, document, undefined ) {
  26 | 
  27 |     var version = '2.7.1',
  28 | 
  29 |     Modernizr = {},
  30 | 
  31 |     /*>>cssclasses*/
  32 |     // option for enabling the HTML classes to be added
  33 |     enableClasses = true,
  34 |     /*>>cssclasses*/
  35 | 
  36 |     docElement = document.documentElement,
  37 | 
  38 |     /**
  39 |      * Create our "modernizr" element that we do most feature tests on.
  40 |      */
  41 |     mod = 'modernizr',
  42 |     modElem = document.createElement(mod),
  43 |     mStyle = modElem.style,
  44 | 
  45 |     /**
  46 |      * Create the input element for various Web Forms feature tests.
  47 |      */
  48 |     inputElem /*>>inputelem*/ = document.createElement('input') /*>>inputelem*/ ,
  49 | 
  50 |     /*>>smile*/
  51 |     smile = ':)',
  52 |     /*>>smile*/
  53 | 
  54 |     toString = {}.toString,
  55 | 
  56 |     // TODO :: make the prefixes more granular
  57 |     /*>>prefixes*/
  58 |     // List of property values to set for css tests. See ticket #21
  59 |     prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),
  60 |     /*>>prefixes*/
  61 | 
  62 |     /*>>domprefixes*/
  63 |     // Following spec is to expose vendor-specific style properties as:
  64 |     //   elem.style.WebkitBorderRadius
  65 |     // and the following would be incorrect:
  66 |     //   elem.style.webkitBorderRadius
  67 | 
  68 |     // Webkit ghosts their properties in lowercase but Opera & Moz do not.
  69 |     // Microsoft uses a lowercase `ms` instead of the correct `Ms` in IE8+
  70 |     //   erik.eae.net/archives/2008/03/10/21.48.10/
  71 | 
  72 |     // More here: github.com/Modernizr/Modernizr/issues/issue/21
  73 |     omPrefixes = 'Webkit Moz O ms',
  74 | 
  75 |     cssomPrefixes = omPrefixes.split(' '),
  76 | 
  77 |     domPrefixes = omPrefixes.toLowerCase().split(' '),
  78 |     /*>>domprefixes*/
  79 | 
  80 |     /*>>ns*/
  81 |     ns = {'svg': 'http://www.w3.org/2000/svg'},
  82 |     /*>>ns*/
  83 | 
  84 |     tests = {},
  85 |     inputs = {},
  86 |     attrs = {},
  87 | 
  88 |     classes = [],
  89 | 
  90 |     slice = classes.slice,
  91 | 
  92 |     featureName, // used in testing loop
  93 | 
  94 | 
  95 |     /*>>teststyles*/
  96 |     // Inject element with style element and some CSS rules
  97 |     injectElementWithStyles = function( rule, callback, nodes, testnames ) {
  98 | 
  99 |       var style, ret, node, docOverflow,
 100 |           div = document.createElement('div'),
 101 |           // After page load injecting a fake body doesn't work so check if body exists
 102 |           body = document.body,
 103 |           // IE6 and 7 won't return offsetWidth or offsetHeight unless it's in the body element, so we fake it.
 104 |           fakeBody = body || document.createElement('body');
 105 | 
 106 |       if ( parseInt(nodes, 10) ) {
 107 |           // In order not to give false positives we create a node for each test
 108 |           // This also allows the method to scale for unspecified uses
 109 |           while ( nodes-- ) {
 110 |               node = document.createElement('div');
 111 |               node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
 112 |               div.appendChild(node);
 113 |           }
 114 |       }
 115 | 
 116 |       // <style> elements in IE6-9 are considered 'NoScope' elements and therefore will be removed
 117 |       // when injected with innerHTML. To get around this you need to prepend the 'NoScope' element
 118 |       // with a 'scoped' element, in our case the soft-hyphen entity as it won't mess with our measurements.
 119 |       // msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx
 120 |       // Documents served as xml will throw if using &shy; so use xml friendly encoded version. See issue #277
 121 |       style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
 122 |       div.id = mod;
 123 |       // IE6 will false positive on some tests due to the style element inside the test div somehow interfering offsetHeight, so insert it into body or fakebody.
 124 |       // Opera will act all quirky when injecting elements in documentElement when page is served as xml, needs fakebody too. #270
 125 |       (body ? div : fakeBody).innerHTML += style;
 126 |       fakeBody.appendChild(div);
 127 |       if ( !body ) {
 128 |           //avoid crashing IE8, if background image is used
 129 |           fakeBody.style.background = '';
 130 |           //Safari 5.13/5.1.4 OSX stops loading if ::-webkit-scrollbar is used and scrollbars are visible
 131 |           fakeBody.style.overflow = 'hidden';
 132 |           docOverflow = docElement.style.overflow;
 133 |           docElement.style.overflow = 'hidden';
 134 |           docElement.appendChild(fakeBody);
 135 |       }
 136 | 
 137 |       ret = callback(div, rule);
 138 |       // If this is done after page load we don't want to remove the body so check if body exists
 139 |       if ( !body ) {
 140 |           fakeBody.parentNode.removeChild(fakeBody);
 141 |           docElement.style.overflow = docOverflow;
 142 |       } else {
 143 |           div.parentNode.removeChild(div);
 144 |       }
 145 | 
 146 |       return !!ret;
 147 | 
 148 |     },
 149 |     /*>>teststyles*/
 150 | 
 151 |     /*>>mq*/
 152 |     // adapted from matchMedia polyfill
 153 |     // by Scott Jehl and Paul Irish
 154 |     // gist.github.com/786768
 155 |     testMediaQuery = function( mq ) {
 156 | 
 157 |       var matchMedia = window.matchMedia || window.msMatchMedia;
 158 |       if ( matchMedia ) {
 159 |         return matchMedia(mq).matches;
 160 |       }
 161 | 
 162 |       var bool;
 163 | 
 164 |       injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) {
 165 |         bool = (window.getComputedStyle ?
 166 |                   getComputedStyle(node, null) :
 167 |                   node.currentStyle)['position'] == 'absolute';
 168 |       });
 169 | 
 170 |       return bool;
 171 | 
 172 |      },
 173 |      /*>>mq*/
 174 | 
 175 | 
 176 |     /*>>hasevent*/
 177 |     //
 178 |     // isEventSupported determines if a given element supports the given event
 179 |     // kangax.github.com/iseventsupported/
 180 |     //
 181 |     // The following results are known incorrects:
 182 |     //   Modernizr.hasEvent("webkitTransitionEnd", elem) // false negative
 183 |     //   Modernizr.hasEvent("textInput") // in Webkit. github.com/Modernizr/Modernizr/issues/333
 184 |     //   ...
 185 |     isEventSupported = (function() {
 186 | 
 187 |       var TAGNAMES = {
 188 |         'select': 'input', 'change': 'input',
 189 |         'submit': 'form', 'reset': 'form',
 190 |         'error': 'img', 'load': 'img', 'abort': 'img'
 191 |       };
 192 | 
 193 |       function isEventSupported( eventName, element ) {
 194 | 
 195 |         element = element || document.createElement(TAGNAMES[eventName] || 'div');
 196 |         eventName = 'on' + eventName;
 197 | 
 198 |         // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
 199 |         var isSupported = eventName in element;
 200 | 
 201 |         if ( !isSupported ) {
 202 |           // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
 203 |           if ( !element.setAttribute ) {
 204 |             element = document.createElement('div');
 205 |           }
 206 |           if ( element.setAttribute && element.removeAttribute ) {
 207 |             element.setAttribute(eventName, '');
 208 |             isSupported = is(element[eventName], 'function');
 209 | 
 210 |             // If property was created, "remove it" (by setting value to `undefined`)
 211 |             if ( !is(element[eventName], 'undefined') ) {
 212 |               element[eventName] = undefined;
 213 |             }
 214 |             element.removeAttribute(eventName);
 215 |           }
 216 |         }
 217 | 
 218 |         element = null;
 219 |         return isSupported;
 220 |       }
 221 |       return isEventSupported;
 222 |     })(),
 223 |     /*>>hasevent*/
 224 | 
 225 |     // TODO :: Add flag for hasownprop ? didn't last time
 226 | 
 227 |     // hasOwnProperty shim by kangax needed for Safari 2.0 support
 228 |     _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;
 229 | 
 230 |     if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
 231 |       hasOwnProp = function (object, property) {
 232 |         return _hasOwnProperty.call(object, property);
 233 |       };
 234 |     }
 235 |     else {
 236 |       hasOwnProp = function (object, property) { /* yes, this can give false positives/negatives, but most of the time we don't care about those */
 237 |         return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
 238 |       };
 239 |     }
 240 | 
 241 |     // Adapted from ES5-shim https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js
 242 |     // es5.github.com/#x15.3.4.5
 243 | 
 244 |     if (!Function.prototype.bind) {
 245 |       Function.prototype.bind = function bind(that) {
 246 | 
 247 |         var target = this;
 248 | 
 249 |         if (typeof target != "function") {
 250 |             throw new TypeError();
 251 |         }
 252 | 
 253 |         var args = slice.call(arguments, 1),
 254 |             bound = function () {
 255 | 
 256 |             if (this instanceof bound) {
 257 | 
 258 |               var F = function(){};
 259 |               F.prototype = target.prototype;
 260 |               var self = new F();
 261 | 
 262 |               var result = target.apply(
 263 |                   self,
 264 |                   args.concat(slice.call(arguments))
 265 |               );
 266 |               if (Object(result) === result) {
 267 |                   return result;
 268 |               }
 269 |               return self;
 270 | 
 271 |             } else {
 272 | 
 273 |               return target.apply(
 274 |                   that,
 275 |                   args.concat(slice.call(arguments))
 276 |               );
 277 | 
 278 |             }
 279 | 
 280 |         };
 281 | 
 282 |         return bound;
 283 |       };
 284 |     }
 285 | 
 286 |     /**
 287 |      * setCss applies given styles to the Modernizr DOM node.
 288 |      */
 289 |     function setCss( str ) {
 290 |         mStyle.cssText = str;
 291 |     }
 292 | 
 293 |     /**
 294 |      * setCssAll extrapolates all vendor-specific css strings.
 295 |      */
 296 |     function setCssAll( str1, str2 ) {
 297 |         return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
 298 |     }
 299 | 
 300 |     /**
 301 |      * is returns a boolean for if typeof obj is exactly type.
 302 |      */
 303 |     function is( obj, type ) {
 304 |         return typeof obj === type;
 305 |     }
 306 | 
 307 |     /**
 308 |      * contains returns a boolean for if substr is found within str.
 309 |      */
 310 |     function contains( str, substr ) {
 311 |         return !!~('' + str).indexOf(substr);
 312 |     }
 313 | 
 314 |     /*>>testprop*/
 315 | 
 316 |     // testProps is a generic CSS / DOM property test.
 317 | 
 318 |     // In testing support for a given CSS property, it's legit to test:
 319 |     //    `elem.style[styleName] !== undefined`
 320 |     // If the property is supported it will return an empty string,
 321 |     // if unsupported it will return undefined.
 322 | 
 323 |     // We'll take advantage of this quick test and skip setting a style
 324 |     // on our modernizr element, but instead just testing undefined vs
 325 |     // empty string.
 326 | 
 327 |     // Because the testing of the CSS property names (with "-", as
 328 |     // opposed to the camelCase DOM properties) is non-portable and
 329 |     // non-standard but works in WebKit and IE (but not Gecko or Opera),
 330 |     // we explicitly reject properties with dashes so that authors
 331 |     // developing in WebKit or IE first don't end up with
 332 |     // browser-specific content by accident.
 333 | 
 334 |     function testProps( props, prefixed ) {
 335 |         for ( var i in props ) {
 336 |             var prop = props[i];
 337 |             if ( !contains(prop, "-") && mStyle[prop] !== undefined ) {
 338 |                 return prefixed == 'pfx' ? prop : true;
 339 |             }
 340 |         }
 341 |         return false;
 342 |     }
 343 |     /*>>testprop*/
 344 | 
 345 |     // TODO :: add testDOMProps
 346 |     /**
 347 |      * testDOMProps is a generic DOM property test; if a browser supports
 348 |      *   a certain property, it won't return undefined for it.
 349 |      */
 350 |     function testDOMProps( props, obj, elem ) {
 351 |         for ( var i in props ) {
 352 |             var item = obj[props[i]];
 353 |             if ( item !== undefined) {
 354 | 
 355 |                 // return the property name as a string
 356 |                 if (elem === false) return props[i];
 357 | 
 358 |                 // let's bind a function
 359 |                 if (is(item, 'function')){
 360 |                   // default to autobind unless override
 361 |                   return item.bind(elem || obj);
 362 |                 }
 363 | 
 364 |                 // return the unbound function or obj or value
 365 |                 return item;
 366 |             }
 367 |         }
 368 |         return false;
 369 |     }
 370 | 
 371 |     /*>>testallprops*/
 372 |     /**
 373 |      * testPropsAll tests a list of DOM properties we want to check against.
 374 |      *   We specify literally ALL possible (known and/or likely) properties on
 375 |      *   the element including the non-vendor prefixed one, for forward-
 376 |      *   compatibility.
 377 |      */
 378 |     function testPropsAll( prop, prefixed, elem ) {
 379 | 
 380 |         var ucProp  = prop.charAt(0).toUpperCase() + prop.slice(1),
 381 |             props   = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
 382 | 
 383 |         // did they call .prefixed('boxSizing') or are we just testing a prop?
 384 |         if(is(prefixed, "string") || is(prefixed, "undefined")) {
 385 |           return testProps(props, prefixed);
 386 | 
 387 |         // otherwise, they called .prefixed('requestAnimationFrame', window[, elem])
 388 |         } else {
 389 |           props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
 390 |           return testDOMProps(props, prefixed, elem);
 391 |         }
 392 |     }
 393 |     /*>>testallprops*/
 394 | 
 395 | 
 396 |     /**
 397 |      * Tests
 398 |      * -----
 399 |      */
 400 | 
 401 |     // The *new* flexbox
 402 |     // dev.w3.org/csswg/css3-flexbox
 403 | 
 404 |     tests['flexbox'] = function() {
 405 |       return testPropsAll('flexWrap');
 406 |     };
 407 | 
 408 |     // The *old* flexbox
 409 |     // www.w3.org/TR/2009/WD-css3-flexbox-20090723/
 410 | 
 411 |     tests['flexboxlegacy'] = function() {
 412 |         return testPropsAll('boxDirection');
 413 |     };
 414 | 
 415 |     // On the S60 and BB Storm, getContext exists, but always returns undefined
 416 |     // so we actually have to call getContext() to verify
 417 |     // github.com/Modernizr/Modernizr/issues/issue/97/
 418 | 
 419 |     tests['canvas'] = function() {
 420 |         var elem = document.createElement('canvas');
 421 |         return !!(elem.getContext && elem.getContext('2d'));
 422 |     };
 423 | 
 424 |     tests['canvastext'] = function() {
 425 |         return !!(Modernizr['canvas'] && is(document.createElement('canvas').getContext('2d').fillText, 'function'));
 426 |     };
 427 | 
 428 |     // webk.it/70117 is tracking a legit WebGL feature detect proposal
 429 | 
 430 |     // We do a soft detect which may false positive in order to avoid
 431 |     // an expensive context creation: bugzil.la/732441
 432 | 
 433 |     tests['webgl'] = function() {
 434 |         return !!window.WebGLRenderingContext;
 435 |     };
 436 | 
 437 |     /*
 438 |      * The Modernizr.touch test only indicates if the browser supports
 439 |      *    touch events, which does not necessarily reflect a touchscreen
 440 |      *    device, as evidenced by tablets running Windows 7 or, alas,
 441 |      *    the Palm Pre / WebOS (touch) phones.
 442 |      *
 443 |      * Additionally, Chrome (desktop) used to lie about its support on this,
 444 |      *    but that has since been rectified: crbug.com/36415
 445 |      *
 446 |      * We also test for Firefox 4 Multitouch Support.
 447 |      *
 448 |      * For more info, see: modernizr.github.com/Modernizr/touch.html
 449 |      */
 450 | 
 451 |     tests['touch'] = function() {
 452 |         var bool;
 453 | 
 454 |         if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
 455 |           bool = true;
 456 |         } else {
 457 |           injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function( node ) {
 458 |             bool = node.offsetTop === 9;
 459 |           });
 460 |         }
 461 | 
 462 |         return bool;
 463 |     };
 464 | 
 465 | 
 466 |     // geolocation is often considered a trivial feature detect...
 467 |     // Turns out, it's quite tricky to get right:
 468 |     //
 469 |     // Using !!navigator.geolocation does two things we don't want. It:
 470 |     //   1. Leaks memory in IE9: github.com/Modernizr/Modernizr/issues/513
 471 |     //   2. Disables page caching in WebKit: webk.it/43956
 472 |     //
 473 |     // Meanwhile, in Firefox < 8, an about:config setting could expose
 474 |     // a false positive that would throw an exception: bugzil.la/688158
 475 | 
 476 |     tests['geolocation'] = function() {
 477 |         return 'geolocation' in navigator;
 478 |     };
 479 | 
 480 | 
 481 |     tests['postmessage'] = function() {
 482 |       return !!window.postMessage;
 483 |     };
 484 | 
 485 | 
 486 |     // Chrome incognito mode used to throw an exception when using openDatabase
 487 |     // It doesn't anymore.
 488 |     tests['websqldatabase'] = function() {
 489 |       return !!window.openDatabase;
 490 |     };
 491 | 
 492 |     // Vendors had inconsistent prefixing with the experimental Indexed DB:
 493 |     // - Webkit's implementation is accessible through webkitIndexedDB
 494 |     // - Firefox shipped moz_indexedDB before FF4b9, but since then has been mozIndexedDB
 495 |     // For speed, we don't test the legacy (and beta-only) indexedDB
 496 |     tests['indexedDB'] = function() {
 497 |       return !!testPropsAll("indexedDB", window);
 498 |     };
 499 | 
 500 |     // documentMode logic from YUI to filter out IE8 Compat Mode
 501 |     //   which false positives.
 502 |     tests['hashchange'] = function() {
 503 |       return isEventSupported('hashchange', window) && (document.documentMode === undefined || document.documentMode > 7);
 504 |     };
 505 | 
 506 |     // Per 1.6:
 507 |     // This used to be Modernizr.historymanagement but the longer
 508 |     // name has been deprecated in favor of a shorter and property-matching one.
 509 |     // The old API is still available in 1.6, but as of 2.0 will throw a warning,
 510 |     // and in the first release thereafter disappear entirely.
 511 |     tests['history'] = function() {
 512 |       return !!(window.history && history.pushState);
 513 |     };
 514 | 
 515 |     tests['draganddrop'] = function() {
 516 |         var div = document.createElement('div');
 517 |         return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
 518 |     };
 519 | 
 520 |     // FF3.6 was EOL'ed on 4/24/12, but the ESR version of FF10
 521 |     // will be supported until FF19 (2/12/13), at which time, ESR becomes FF17.
 522 |     // FF10 still uses prefixes, so check for it until then.
 523 |     // for more ESR info, see: mozilla.org/en-US/firefox/organizations/faq/
 524 |     tests['websockets'] = function() {
 525 |         return 'WebSocket' in window || 'MozWebSocket' in window;
 526 |     };
 527 | 
 528 | 
 529 |     // css-tricks.com/rgba-browser-support/
 530 |     tests['rgba'] = function() {
 531 |         // Set an rgba() color and check the returned value
 532 | 
 533 |         setCss('background-color:rgba(150,255,150,.5)');
 534 | 
 535 |         return contains(mStyle.backgroundColor, 'rgba');
 536 |     };
 537 | 
 538 |     tests['hsla'] = function() {
 539 |         // Same as rgba(), in fact, browsers re-map hsla() to rgba() internally,
 540 |         //   except IE9 who retains it as hsla
 541 | 
 542 |         setCss('background-color:hsla(120,40%,100%,.5)');
 543 | 
 544 |         return contains(mStyle.backgroundColor, 'rgba') || contains(mStyle.backgroundColor, 'hsla');
 545 |     };
 546 | 
 547 |     tests['multiplebgs'] = function() {
 548 |         // Setting multiple images AND a color on the background shorthand property
 549 |         //  and then querying the style.background property value for the number of
 550 |         //  occurrences of "url(" is a reliable method for detecting ACTUAL support for this!
 551 | 
 552 |         setCss('background:url(https://),url(https://),red url(https://)');
 553 | 
 554 |         // If the UA supports multiple backgrounds, there should be three occurrences
 555 |         //   of the string "url(" in the return value for elemStyle.background
 556 | 
 557 |         return (/(url\s*\(.*?){3}/).test(mStyle.background);
 558 |     };
 559 | 
 560 | 
 561 | 
 562 |     // this will false positive in Opera Mini
 563 |     //   github.com/Modernizr/Modernizr/issues/396
 564 | 
 565 |     tests['backgroundsize'] = function() {
 566 |         return testPropsAll('backgroundSize');
 567 |     };
 568 | 
 569 |     tests['borderimage'] = function() {
 570 |         return testPropsAll('borderImage');
 571 |     };
 572 | 
 573 | 
 574 |     // Super comprehensive table about all the unique implementations of
 575 |     // border-radius: muddledramblings.com/table-of-css3-border-radius-compliance
 576 | 
 577 |     tests['borderradius'] = function() {
 578 |         return testPropsAll('borderRadius');
 579 |     };
 580 | 
 581 |     // WebOS unfortunately false positives on this test.
 582 |     tests['boxshadow'] = function() {
 583 |         return testPropsAll('boxShadow');
 584 |     };
 585 | 
 586 |     // FF3.0 will false positive on this test
 587 |     tests['textshadow'] = function() {
 588 |         return document.createElement('div').style.textShadow === '';
 589 |     };
 590 | 
 591 | 
 592 |     tests['opacity'] = function() {
 593 |         // Browsers that actually have CSS Opacity implemented have done so
 594 |         //  according to spec, which means their return values are within the
 595 |         //  range of [0.0,1.0] - including the leading zero.
 596 | 
 597 |         setCssAll('opacity:.55');
 598 | 
 599 |         // The non-literal . in this regex is intentional:
 600 |         //   German Chrome returns this value as 0,55
 601 |         // github.com/Modernizr/Modernizr/issues/#issue/59/comment/516632
 602 |         return (/^0.55$/).test(mStyle.opacity);
 603 |     };
 604 | 
 605 | 
 606 |     // Note, Android < 4 will pass this test, but can only animate
 607 |     //   a single property at a time
 608 |     //   daneden.me/2011/12/putting-up-with-androids-bullshit/
 609 |     tests['cssanimations'] = function() {
 610 |         return testPropsAll('animationName');
 611 |     };
 612 | 
 613 | 
 614 |     tests['csscolumns'] = function() {
 615 |         return testPropsAll('columnCount');
 616 |     };
 617 | 
 618 | 
 619 |     tests['cssgradients'] = function() {
 620 |         /**
 621 |          * For CSS Gradients syntax, please see:
 622 |          * webkit.org/blog/175/introducing-css-gradients/
 623 |          * developer.mozilla.org/en/CSS/-moz-linear-gradient
 624 |          * developer.mozilla.org/en/CSS/-moz-radial-gradient
 625 |          * dev.w3.org/csswg/css3-images/#gradients-
 626 |          */
 627 | 
 628 |         var str1 = 'background-image:',
 629 |             str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
 630 |             str3 = 'linear-gradient(left top,#9f9, white);';
 631 | 
 632 |         setCss(
 633 |              // legacy webkit syntax (FIXME: remove when syntax not in use anymore)
 634 |               (str1 + '-webkit- '.split(' ').join(str2 + str1) +
 635 |              // standard syntax             // trailing 'background-image:'
 636 |               prefixes.join(str3 + str1)).slice(0, -str1.length)
 637 |         );
 638 | 
 639 |         return contains(mStyle.backgroundImage, 'gradient');
 640 |     };
 641 | 
 642 | 
 643 |     tests['cssreflections'] = function() {
 644 |         return testPropsAll('boxReflect');
 645 |     };
 646 | 
 647 | 
 648 |     tests['csstransforms'] = function() {
 649 |         return !!testPropsAll('transform');
 650 |     };
 651 | 
 652 | 
 653 |     tests['csstransforms3d'] = function() {
 654 | 
 655 |         var ret = !!testPropsAll('perspective');
 656 | 
 657 |         // Webkit's 3D transforms are passed off to the browser's own graphics renderer.
 658 |         //   It works fine in Safari on Leopard and Snow Leopard, but not in Chrome in
 659 |         //   some conditions. As a result, Webkit typically recognizes the syntax but
 660 |         //   will sometimes throw a false positive, thus we must do a more thorough check:
 661 |         if ( ret && 'webkitPerspective' in docElement.style ) {
 662 | 
 663 |           // Webkit allows this media query to succeed only if the feature is enabled.
 664 |           // `@media (transform-3d),(-webkit-transform-3d){ ... }`
 665 |           injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) {
 666 |             ret = node.offsetLeft === 9 && node.offsetHeight === 3;
 667 |           });
 668 |         }
 669 |         return ret;
 670 |     };
 671 | 
 672 | 
 673 |     tests['csstransitions'] = function() {
 674 |         return testPropsAll('transition');
 675 |     };
 676 | 
 677 | 
 678 |     /*>>fontface*/
 679 |     // @font-face detection routine by Diego Perini
 680 |     // javascript.nwbox.com/CSSSupport/
 681 | 
 682 |     // false positives:
 683 |     //   WebOS github.com/Modernizr/Modernizr/issues/342
 684 |     //   WP7   github.com/Modernizr/Modernizr/issues/538
 685 |     tests['fontface'] = function() {
 686 |         var bool;
 687 | 
 688 |         injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}', function( node, rule ) {
 689 |           var style = document.getElementById('smodernizr'),
 690 |               sheet = style.sheet || style.styleSheet,
 691 |               cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';
 692 | 
 693 |           bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
 694 |         });
 695 | 
 696 |         return bool;
 697 |     };
 698 |     /*>>fontface*/
 699 | 
 700 |     // CSS generated content detection
 701 |     tests['generatedcontent'] = function() {
 702 |         var bool;
 703 | 
 704 |         injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) {
 705 |           bool = node.offsetHeight >= 3;
 706 |         });
 707 | 
 708 |         return bool;
 709 |     };
 710 | 
 711 | 
 712 | 
 713 |     // These tests evaluate support of the video/audio elements, as well as
 714 |     // testing what types of content they support.
 715 |     //
 716 |     // We're using the Boolean constructor here, so that we can extend the value
 717 |     // e.g.  Modernizr.video     // true
 718 |     //       Modernizr.video.ogg // 'probably'
 719 |     //
 720 |     // Codec values from : github.com/NielsLeenheer/html5test/blob/9106a8/index.html#L845
 721 |     //                     thx to NielsLeenheer and zcorpan
 722 | 
 723 |     // Note: in some older browsers, "no" was a return value instead of empty string.
 724 |     //   It was live in FF3.5.0 and 3.5.1, but fixed in 3.5.2
 725 |     //   It was also live in Safari 4.0.0 - 4.0.4, but fixed in 4.0.5
 726 | 
 727 |     tests['video'] = function() {
 728 |         var elem = document.createElement('video'),
 729 |             bool = false;
 730 | 
 731 |         // IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224
 732 |         try {
 733 |             if ( bool = !!elem.canPlayType ) {
 734 |                 bool      = new Boolean(bool);
 735 |                 bool.ogg  = elem.canPlayType('video/ogg; codecs="theora"')      .replace(/^no$/,'');
 736 | 
 737 |                 // Without QuickTime, this value will be `undefined`. github.com/Modernizr/Modernizr/issues/546
 738 |                 bool.h264 = elem.canPlayType('video/mp4; codecs="avc1.42E01E"') .replace(/^no$/,'');
 739 | 
 740 |                 bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,'');
 741 |             }
 742 | 
 743 |         } catch(e) { }
 744 | 
 745 |         return bool;
 746 |     };
 747 | 
 748 |     tests['audio'] = function() {
 749 |         var elem = document.createElement('audio'),
 750 |             bool = false;
 751 | 
 752 |         try {
 753 |             if ( bool = !!elem.canPlayType ) {
 754 |                 bool      = new Boolean(bool);
 755 |                 bool.ogg  = elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,'');
 756 |                 bool.mp3  = elem.canPlayType('audio/mpeg;')               .replace(/^no$/,'');
 757 | 
 758 |                 // Mimetypes accepted:
 759 |                 //   developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
 760 |                 //   bit.ly/iphoneoscodecs
 761 |                 bool.wav  = elem.canPlayType('audio/wav; codecs="1"')     .replace(/^no$/,'');
 762 |                 bool.m4a  = ( elem.canPlayType('audio/x-m4a;')            ||
 763 |                               elem.canPlayType('audio/aac;'))             .replace(/^no$/,'');
 764 |             }
 765 |         } catch(e) { }
 766 | 
 767 |         return bool;
 768 |     };
 769 | 
 770 | 
 771 |     // In FF4, if disabled, window.localStorage should === null.
 772 | 
 773 |     // Normally, we could not test that directly and need to do a
 774 |     //   `('localStorage' in window) && ` test first because otherwise Firefox will
 775 |     //   throw bugzil.la/365772 if cookies are disabled
 776 | 
 777 |     // Also in iOS5 Private Browsing mode, attempting to use localStorage.setItem
 778 |     // will throw the exception:
 779 |     //   QUOTA_EXCEEDED_ERRROR DOM Exception 22.
 780 |     // Peculiarly, getItem and removeItem calls do not throw.
 781 | 
 782 |     // Because we are forced to try/catch this, we'll go aggressive.
 783 | 
 784 |     // Just FWIW: IE8 Compat mode supports these features completely:
 785 |     //   www.quirksmode.org/dom/html5.html
 786 |     // But IE8 doesn't support either with local files
 787 | 
 788 |     tests['localstorage'] = function() {
 789 |         try {
 790 |             localStorage.setItem(mod, mod);
 791 |             localStorage.removeItem(mod);
 792 |             return true;
 793 |         } catch(e) {
 794 |             return false;
 795 |         }
 796 |     };
 797 | 
 798 |     tests['sessionstorage'] = function() {
 799 |         try {
 800 |             sessionStorage.setItem(mod, mod);
 801 |             sessionStorage.removeItem(mod);
 802 |             return true;
 803 |         } catch(e) {
 804 |             return false;
 805 |         }
 806 |     };
 807 | 
 808 | 
 809 |     tests['webworkers'] = function() {
 810 |         return !!window.Worker;
 811 |     };
 812 | 
 813 | 
 814 |     tests['applicationcache'] = function() {
 815 |         return !!window.applicationCache;
 816 |     };
 817 | 
 818 | 
 819 |     // Thanks to Erik Dahlstrom
 820 |     tests['svg'] = function() {
 821 |         return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect;
 822 |     };
 823 | 
 824 |     // specifically for SVG inline in HTML, not within XHTML
 825 |     // test page: paulirish.com/demo/inline-svg
 826 |     tests['inlinesvg'] = function() {
 827 |       var div = document.createElement('div');
 828 |       div.innerHTML = '<svg/>';
 829 |       return (div.firstChild && div.firstChild.namespaceURI) == ns.svg;
 830 |     };
 831 | 
 832 |     // SVG SMIL animation
 833 |     tests['smil'] = function() {
 834 |         return !!document.createElementNS && /SVGAnimate/.test(toString.call(document.createElementNS(ns.svg, 'animate')));
 835 |     };
 836 | 
 837 |     // This test is only for clip paths in SVG proper, not clip paths on HTML content
 838 |     // demo: srufaculty.sru.edu/david.dailey/svg/newstuff/clipPath4.svg
 839 | 
 840 |     // However read the comments to dig into applying SVG clippaths to HTML content here:
 841 |     //   github.com/Modernizr/Modernizr/issues/213#issuecomment-1149491
 842 |     tests['svgclippaths'] = function() {
 843 |         return !!document.createElementNS && /SVGClipPath/.test(toString.call(document.createElementNS(ns.svg, 'clipPath')));
 844 |     };
 845 | 
 846 |     /*>>webforms*/
 847 |     // input features and input types go directly onto the ret object, bypassing the tests loop.
 848 |     // Hold this guy to execute in a moment.
 849 |     function webforms() {
 850 |         /*>>input*/
 851 |         // Run through HTML5's new input attributes to see if the UA understands any.
 852 |         // We're using f which is the <input> element created early on
 853 |         // Mike Taylr has created a comprehensive resource for testing these attributes
 854 |         //   when applied to all input types:
 855 |         //   miketaylr.com/code/input-type-attr.html
 856 |         // spec: www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
 857 | 
 858 |         // Only input placeholder is tested while textarea's placeholder is not.
 859 |         // Currently Safari 4 and Opera 11 have support only for the input placeholder
 860 |         // Both tests are available in feature-detects/forms-placeholder.js
 861 |         Modernizr['input'] = (function( props ) {
 862 |             for ( var i = 0, len = props.length; i < len; i++ ) {
 863 |                 attrs[ props[i] ] = !!(props[i] in inputElem);
 864 |             }
 865 |             if (attrs.list){
 866 |               // safari false positive's on datalist: webk.it/74252
 867 |               // see also github.com/Modernizr/Modernizr/issues/146
 868 |               attrs.list = !!(document.createElement('datalist') && window.HTMLDataListElement);
 869 |             }
 870 |             return attrs;
 871 |         })('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));
 872 |         /*>>input*/
 873 | 
 874 |         /*>>inputtypes*/
 875 |         // Run through HTML5's new input types to see if the UA understands any.
 876 |         //   This is put behind the tests runloop because it doesn't return a
 877 |         //   true/false like all the other tests; instead, it returns an object
 878 |         //   containing each input type with its corresponding true/false value
 879 | 
 880 |         // Big thanks to @miketaylr for the html5 forms expertise. miketaylr.com/
 881 |         Modernizr['inputtypes'] = (function(props) {
 882 | 
 883 |             for ( var i = 0, bool, inputElemType, defaultView, len = props.length; i < len; i++ ) {
 884 | 
 885 |                 inputElem.setAttribute('type', inputElemType = props[i]);
 886 |                 bool = inputElem.type !== 'text';
 887 | 
 888 |                 // We first check to see if the type we give it sticks..
 889 |                 // If the type does, we feed it a textual value, which shouldn't be valid.
 890 |                 // If the value doesn't stick, we know there's input sanitization which infers a custom UI
 891 |                 if ( bool ) {
 892 | 
 893 |                     inputElem.value         = smile;
 894 |                     inputElem.style.cssText = 'position:absolute;visibility:hidden;';
 895 | 
 896 |                     if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) {
 897 | 
 898 |                       docElement.appendChild(inputElem);
 899 |                       defaultView = document.defaultView;
 900 | 
 901 |                       // Safari 2-4 allows the smiley as a value, despite making a slider
 902 |                       bool =  defaultView.getComputedStyle &&
 903 |                               defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' &&
 904 |                               // Mobile android web browser has false positive, so must
 905 |                               // check the height to see if the widget is actually there.
 906 |                               (inputElem.offsetHeight !== 0);
 907 | 
 908 |                       docElement.removeChild(inputElem);
 909 | 
 910 |                     } else if ( /^(search|tel)$/.test(inputElemType) ){
 911 |                       // Spec doesn't define any special parsing or detectable UI
 912 |                       //   behaviors so we pass these through as true
 913 | 
 914 |                       // Interestingly, opera fails the earlier test, so it doesn't
 915 |                       //  even make it here.
 916 | 
 917 |                     } else if ( /^(url|email)$/.test(inputElemType) ) {
 918 |                       // Real url and email support comes with prebaked validation.
 919 |                       bool = inputElem.checkValidity && inputElem.checkValidity() === false;
 920 | 
 921 |                     } else {
 922 |                       // If the upgraded input compontent rejects the :) text, we got a winner
 923 |                       bool = inputElem.value != smile;
 924 |                     }
 925 |                 }
 926 | 
 927 |                 inputs[ props[i] ] = !!bool;
 928 |             }
 929 |             return inputs;
 930 |         })('search tel url email datetime date month week time datetime-local number range color'.split(' '));
 931 |         /*>>inputtypes*/
 932 |     }
 933 |     /*>>webforms*/
 934 | 
 935 | 
 936 |     // End of test definitions
 937 |     // -----------------------
 938 | 
 939 | 
 940 | 
 941 |     // Run through all tests and detect their support in the current UA.
 942 |     // todo: hypothetically we could be doing an array of tests and use a basic loop here.
 943 |     for ( var feature in tests ) {
 944 |         if ( hasOwnProp(tests, feature) ) {
 945 |             // run the test, throw the return value into the Modernizr,
 946 |             //   then based on that boolean, define an appropriate className
 947 |             //   and push it into an array of classes we'll join later.
 948 |             featureName  = feature.toLowerCase();
 949 |             Modernizr[featureName] = tests[feature]();
 950 | 
 951 |             classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
 952 |         }
 953 |     }
 954 | 
 955 |     /*>>webforms*/
 956 |     // input tests need to run.
 957 |     Modernizr.input || webforms();
 958 |     /*>>webforms*/
 959 | 
 960 | 
 961 |     /**
 962 |      * addTest allows the user to define their own feature tests
 963 |      * the result will be added onto the Modernizr object,
 964 |      * as well as an appropriate className set on the html element
 965 |      *
 966 |      * @param feature - String naming the feature
 967 |      * @param test - Function returning true if feature is supported, false if not
 968 |      */
 969 |      Modernizr.addTest = function ( feature, test ) {
 970 |        if ( typeof feature == 'object' ) {
 971 |          for ( var key in feature ) {
 972 |            if ( hasOwnProp( feature, key ) ) {
 973 |              Modernizr.addTest( key, feature[ key ] );
 974 |            }
 975 |          }
 976 |        } else {
 977 | 
 978 |          feature = feature.toLowerCase();
 979 | 
 980 |          if ( Modernizr[feature] !== undefined ) {
 981 |            // we're going to quit if you're trying to overwrite an existing test
 982 |            // if we were to allow it, we'd do this:
 983 |            //   var re = new RegExp("\\b(no-)?" + feature + "\\b");
 984 |            //   docElement.className = docElement.className.replace( re, '' );
 985 |            // but, no rly, stuff 'em.
 986 |            return Modernizr;
 987 |          }
 988 | 
 989 |          test = typeof test == 'function' ? test() : test;
 990 | 
 991 |          if (typeof enableClasses !== "undefined" && enableClasses) {
 992 |            docElement.className += ' ' + (test ? '' : 'no-') + feature;
 993 |          }
 994 |          Modernizr[feature] = test;
 995 | 
 996 |        }
 997 | 
 998 |        return Modernizr; // allow chaining.
 999 |      };
1000 | 
1001 | 
1002 |     // Reset modElem.cssText to nothing to reduce memory footprint.
1003 |     setCss('');
1004 |     modElem = inputElem = null;
1005 | 
1006 |     /*>>shiv*/
1007 |     /**
1008 |      * @preserve HTML5 Shiv prev3.7.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
1009 |      */
1010 |     ;(function(window, document) {
1011 |         /*jshint evil:true */
1012 |         /** version */
1013 |         var version = '3.7.0';
1014 | 
1015 |         /** Preset options */
1016 |         var options = window.html5 || {};
1017 | 
1018 |         /** Used to skip problem elements */
1019 |         var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
1020 | 
1021 |         /** Not all elements can be cloned in IE **/
1022 |         var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
1023 | 
1024 |         /** Detect whether the browser supports default html5 styles */
1025 |         var supportsHtml5Styles;
1026 | 
1027 |         /** Name of the expando, to work with multiple documents or to re-shiv one document */
1028 |         var expando = '_html5shiv';
1029 | 
1030 |         /** The id for the the documents expando */
1031 |         var expanID = 0;
1032 | 
1033 |         /** Cached data for each document */
1034 |         var expandoData = {};
1035 | 
1036 |         /** Detect whether the browser supports unknown elements */
1037 |         var supportsUnknownElements;
1038 | 
1039 |         (function() {
1040 |           try {
1041 |             var a = document.createElement('a');
1042 |             a.innerHTML = '<xyz></xyz>';
1043 |             //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
1044 |             supportsHtml5Styles = ('hidden' in a);
1045 | 
1046 |             supportsUnknownElements = a.childNodes.length == 1 || (function() {
1047 |               // assign a false positive if unable to shiv
1048 |               (document.createElement)('a');
1049 |               var frag = document.createDocumentFragment();
1050 |               return (
1051 |                 typeof frag.cloneNode == 'undefined' ||
1052 |                 typeof frag.createDocumentFragment == 'undefined' ||
1053 |                 typeof frag.createElement == 'undefined'
1054 |               );
1055 |             }());
1056 |           } catch(e) {
1057 |             // assign a false positive if detection fails => unable to shiv
1058 |             supportsHtml5Styles = true;
1059 |             supportsUnknownElements = true;
1060 |           }
1061 | 
1062 |         }());
1063 | 
1064 |         /*--------------------------------------------------------------------------*/
1065 | 
1066 |         /**
1067 |          * Creates a style sheet with the given CSS text and adds it to the document.
1068 |          * @private
1069 |          * @param {Document} ownerDocument The document.
1070 |          * @param {String} cssText The CSS text.
1071 |          * @returns {StyleSheet} The style element.
1072 |          */
1073 |         function addStyleSheet(ownerDocument, cssText) {
1074 |           var p = ownerDocument.createElement('p'),
1075 |           parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
1076 | 
1077 |           p.innerHTML = 'x<style>' + cssText + '</style>';
1078 |           return parent.insertBefore(p.lastChild, parent.firstChild);
1079 |         }
1080 | 
1081 |         /**
1082 |          * Returns the value of `html5.elements` as an array.
1083 |          * @private
1084 |          * @returns {Array} An array of shived element node names.
1085 |          */
1086 |         function getElements() {
1087 |           var elements = html5.elements;
1088 |           return typeof elements == 'string' ? elements.split(' ') : elements;
1089 |         }
1090 | 
1091 |         /**
1092 |          * Returns the data associated to the given document
1093 |          * @private
1094 |          * @param {Document} ownerDocument The document.
1095 |          * @returns {Object} An object of data.
1096 |          */
1097 |         function getExpandoData(ownerDocument) {
1098 |           var data = expandoData[ownerDocument[expando]];
1099 |           if (!data) {
1100 |             data = {};
1101 |             expanID++;
1102 |             ownerDocument[expando] = expanID;
1103 |             expandoData[expanID] = data;
1104 |           }
1105 |           return data;
1106 |         }
1107 | 
1108 |         /**
1109 |          * returns a shived element for the given nodeName and document
1110 |          * @memberOf html5
1111 |          * @param {String} nodeName name of the element
1112 |          * @param {Document} ownerDocument The context document.
1113 |          * @returns {Object} The shived element.
1114 |          */
1115 |         function createElement(nodeName, ownerDocument, data){
1116 |           if (!ownerDocument) {
1117 |             ownerDocument = document;
1118 |           }
1119 |           if(supportsUnknownElements){
1120 |             return ownerDocument.createElement(nodeName);
1121 |           }
1122 |           if (!data) {
1123 |             data = getExpandoData(ownerDocument);
1124 |           }
1125 |           var node;
1126 | 
1127 |           if (data.cache[nodeName]) {
1128 |             node = data.cache[nodeName].cloneNode();
1129 |           } else if (saveClones.test(nodeName)) {
1130 |             node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
1131 |           } else {
1132 |             node = data.createElem(nodeName);
1133 |           }
1134 | 
1135 |           // Avoid adding some elements to fragments in IE < 9 because
1136 |           // * Attributes like `name` or `type` cannot be set/changed once an element
1137 |           //   is inserted into a document/fragment
1138 |           // * Link elements with `src` attributes that are inaccessible, as with
1139 |           //   a 403 response, will cause the tab/window to crash
1140 |           // * Script elements appended to fragments will execute when their `src`
1141 |           //   or `text` property is set
1142 |           return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
1143 |         }
1144 | 
1145 |         /**
1146 |          * returns a shived DocumentFragment for the given document
1147 |          * @memberOf html5
1148 |          * @param {Document} ownerDocument The context document.
1149 |          * @returns {Object} The shived DocumentFragment.
1150 |          */
1151 |         function createDocumentFragment(ownerDocument, data){
1152 |           if (!ownerDocument) {
1153 |             ownerDocument = document;
1154 |           }
1155 |           if(supportsUnknownElements){
1156 |             return ownerDocument.createDocumentFragment();
1157 |           }
1158 |           data = data || getExpandoData(ownerDocument);
1159 |           var clone = data.frag.cloneNode(),
1160 |           i = 0,
1161 |           elems = getElements(),
1162 |           l = elems.length;
1163 |           for(;i<l;i++){
1164 |             clone.createElement(elems[i]);
1165 |           }
1166 |           return clone;
1167 |         }
1168 | 
1169 |         /**
1170 |          * Shivs the `createElement` and `createDocumentFragment` methods of the document.
1171 |          * @private
1172 |          * @param {Document|DocumentFragment} ownerDocument The document.
1173 |          * @param {Object} data of the document.
1174 |          */
1175 |         function shivMethods(ownerDocument, data) {
1176 |           if (!data.cache) {
1177 |             data.cache = {};
1178 |             data.createElem = ownerDocument.createElement;
1179 |             data.createFrag = ownerDocument.createDocumentFragment;
1180 |             data.frag = data.createFrag();
1181 |           }
1182 | 
1183 | 
1184 |           ownerDocument.createElement = function(nodeName) {
1185 |             //abort shiv
1186 |             if (!html5.shivMethods) {
1187 |               return data.createElem(nodeName);
1188 |             }
1189 |             return createElement(nodeName, ownerDocument, data);
1190 |           };
1191 | 
1192 |           ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
1193 |                                                           'var n=f.cloneNode(),c=n.createElement;' +
1194 |                                                           'h.shivMethods&&(' +
1195 |                                                           // unroll the `createElement` calls
1196 |                                                           getElements().join().replace(/[\w\-]+/g, function(nodeName) {
1197 |             data.createElem(nodeName);
1198 |             data.frag.createElement(nodeName);
1199 |             return 'c("' + nodeName + '")';
1200 |           }) +
1201 |             ');return n}'
1202 |                                                          )(html5, data.frag);
1203 |         }
1204 | 
1205 |         /*--------------------------------------------------------------------------*/
1206 | 
1207 |         /**
1208 |          * Shivs the given document.
1209 |          * @memberOf html5
1210 |          * @param {Document} ownerDocument The document to shiv.
1211 |          * @returns {Document} The shived document.
1212 |          */
1213 |         function shivDocument(ownerDocument) {
1214 |           if (!ownerDocument) {
1215 |             ownerDocument = document;
1216 |           }
1217 |           var data = getExpandoData(ownerDocument);
1218 | 
1219 |           if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
1220 |             data.hasCSS = !!addStyleSheet(ownerDocument,
1221 |                                           // corrects block display not defined in IE6/7/8/9
1222 |                                           'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
1223 |                                             // adds styling not present in IE6/7/8/9
1224 |                                             'mark{background:#FF0;color:#000}' +
1225 |                                             // hides non-rendered elements
1226 |                                             'template{display:none}'
1227 |                                          );
1228 |           }
1229 |           if (!supportsUnknownElements) {
1230 |             shivMethods(ownerDocument, data);
1231 |           }
1232 |           return ownerDocument;
1233 |         }
1234 | 
1235 |         /*--------------------------------------------------------------------------*/
1236 | 
1237 |         /**
1238 |          * The `html5` object is exposed so that more elements can be shived and
1239 |          * existing shiving can be detected on iframes.
1240 |          * @type Object
1241 |          * @example
1242 |          *
1243 |          * // options can be changed before the script is included
1244 |          * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
1245 |          */
1246 |         var html5 = {
1247 | 
1248 |           /**
1249 |            * An array or space separated string of node names of the elements to shiv.
1250 |            * @memberOf html5
1251 |            * @type Array|String
1252 |            */
1253 |           'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',
1254 | 
1255 |           /**
1256 |            * current version of html5shiv
1257 |            */
1258 |           'version': version,
1259 | 
1260 |           /**
1261 |            * A flag to indicate that the HTML5 style sheet should be inserted.
1262 |            * @memberOf html5
1263 |            * @type Boolean
1264 |            */
1265 |           'shivCSS': (options.shivCSS !== false),
1266 | 
1267 |           /**
1268 |            * Is equal to true if a browser supports creating unknown/HTML5 elements
1269 |            * @memberOf html5
1270 |            * @type boolean
1271 |            */
1272 |           'supportsUnknownElements': supportsUnknownElements,
1273 | 
1274 |           /**
1275 |            * A flag to indicate that the document's `createElement` and `createDocumentFragment`
1276 |            * methods should be overwritten.
1277 |            * @memberOf html5
1278 |            * @type Boolean
1279 |            */
1280 |           'shivMethods': (options.shivMethods !== false),
1281 | 
1282 |           /**
1283 |            * A string to describe the type of `html5` object ("default" or "default print").
1284 |            * @memberOf html5
1285 |            * @type String
1286 |            */
1287 |           'type': 'default',
1288 | 
1289 |           // shivs the document according to the specified `html5` object options
1290 |           'shivDocument': shivDocument,
1291 | 
1292 |           //creates a shived element
1293 |           createElement: createElement,
1294 | 
1295 |           //creates a shived documentFragment
1296 |           createDocumentFragment: createDocumentFragment
1297 |         };
1298 | 
1299 |         /*--------------------------------------------------------------------------*/
1300 | 
1301 |         // expose html5
1302 |         window.html5 = html5;
1303 | 
1304 |         // shiv the document
1305 |         shivDocument(document);
1306 | 
1307 |     }(this, document));
1308 |     /*>>shiv*/
1309 | 
1310 |     // Assign private properties to the return object with prefix
1311 |     Modernizr._version      = version;
1312 | 
1313 |     // expose these for the plugin API. Look in the source for how to join() them against your input
1314 |     /*>>prefixes*/
1315 |     Modernizr._prefixes     = prefixes;
1316 |     /*>>prefixes*/
1317 |     /*>>domprefixes*/
1318 |     Modernizr._domPrefixes  = domPrefixes;
1319 |     Modernizr._cssomPrefixes  = cssomPrefixes;
1320 |     /*>>domprefixes*/
1321 | 
1322 |     /*>>mq*/
1323 |     // Modernizr.mq tests a given media query, live against the current state of the window
1324 |     // A few important notes:
1325 |     //   * If a browser does not support media queries at all (eg. oldIE) the mq() will always return false
1326 |     //   * A max-width or orientation query will be evaluated against the current state, which may change later.
1327 |     //   * You must specify values. Eg. If you are testing support for the min-width media query use:
1328 |     //       Modernizr.mq('(min-width:0)')
1329 |     // usage:
1330 |     // Modernizr.mq('only screen and (max-width:768)')
1331 |     Modernizr.mq            = testMediaQuery;
1332 |     /*>>mq*/
1333 | 
1334 |     /*>>hasevent*/
1335 |     // Modernizr.hasEvent() detects support for a given event, with an optional element to test on
1336 |     // Modernizr.hasEvent('gesturestart', elem)
1337 |     Modernizr.hasEvent      = isEventSupported;
1338 |     /*>>hasevent*/
1339 | 
1340 |     /*>>testprop*/
1341 |     // Modernizr.testProp() investigates whether a given style property is recognized
1342 |     // Note that the property names must be provided in the camelCase variant.
1343 |     // Modernizr.testProp('pointerEvents')
1344 |     Modernizr.testProp      = function(prop){
1345 |         return testProps([prop]);
1346 |     };
1347 |     /*>>testprop*/
1348 | 
1349 |     /*>>testallprops*/
1350 |     // Modernizr.testAllProps() investigates whether a given style property,
1351 |     //   or any of its vendor-prefixed variants, is recognized
1352 |     // Note that the property names must be provided in the camelCase variant.
1353 |     // Modernizr.testAllProps('boxSizing')
1354 |     Modernizr.testAllProps  = testPropsAll;
1355 |     /*>>testallprops*/
1356 | 
1357 | 
1358 |     /*>>teststyles*/
1359 |     // Modernizr.testStyles() allows you to add custom styles to the document and test an element afterwards
1360 |     // Modernizr.testStyles('#modernizr { position:absolute }', function(elem, rule){ ... })
1361 |     Modernizr.testStyles    = injectElementWithStyles;
1362 |     /*>>teststyles*/
1363 | 
1364 | 
1365 |     /*>>prefixed*/
1366 |     // Modernizr.prefixed() returns the prefixed or nonprefixed property name variant of your input
1367 |     // Modernizr.prefixed('boxSizing') // 'MozBoxSizing'
1368 | 
1369 |     // Properties must be passed as dom-style camelcase, rather than `box-sizing` hypentated style.
1370 |     // Return values will also be the camelCase variant, if you need to translate that to hypenated style use:
1371 |     //
1372 |     //     str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
1373 | 
1374 |     // If you're trying to ascertain which transition end event to bind to, you might do something like...
1375 |     //
1376 |     //     var transEndEventNames = {
1377 |     //       'WebkitTransition' : 'webkitTransitionEnd',
1378 |     //       'MozTransition'    : 'transitionend',
1379 |     //       'OTransition'      : 'oTransitionEnd',
1380 |     //       'msTransition'     : 'MSTransitionEnd',
1381 |     //       'transition'       : 'transitionend'
1382 |     //     },
1383 |     //     transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
1384 | 
1385 |     Modernizr.prefixed      = function(prop, obj, elem){
1386 |       if(!obj) {
1387 |         return testPropsAll(prop, 'pfx');
1388 |       } else {
1389 |         // Testing DOM property e.g. Modernizr.prefixed('requestAnimationFrame', window) // 'mozRequestAnimationFrame'
1390 |         return testPropsAll(prop, obj, elem);
1391 |       }
1392 |     };
1393 |     /*>>prefixed*/
1394 | 
1395 | 
1396 |     /*>>cssclasses*/
1397 |     // Remove "no-js" class from <html> element, if it exists:
1398 |     docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') +
1399 | 
1400 |                             // Add the new classes to the <html> element.
1401 |                             (enableClasses ? ' js ' + classes.join(' ') : '');
1402 |     /*>>cssclasses*/
1403 | 
1404 |     return Modernizr;
1405 | 
1406 | })(this, this.document);
1407 | 


--------------------------------------------------------------------------------