css for code blocks
css for code blocks
<div class="au-grid">
<div class="container">
<div class="row">
<ul class="au-card-list au-card-list--matchheight">
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 1</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 2</h3>
</div>
<p>Some text</p>
<p>More text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 3</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 4</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 5</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 6</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 7</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
<li class="col-sm-3 col-xs-6">
<div class="au-card au-body">
<div class="au-card__inner">
<div class="au-card__title">
<h3 class="au-card__title">Card 8</h3>
</div>
<p>Some text</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
//css code for blocks
.au-card {
display: block;
width: 100%;
border-radius: 4px;
border: 1px solid red;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
background: #fff;
overflow: hidden
}
.au-card.au-card--shadow {
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
}
.au-card.au-card--shadow:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
}
.au-card.au-card--clickable:focus-within {
outline: 3px solid #9263DE;
outline-offset: 2px
}
.au-card.au-card--clickable .au-card--clickable__link:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.au-card.au-card--clickable .au-card--clickable__link:focus {
outline: none
}
.lt-ie9 .au-card.au-card--clickable .au-card--clickable__link:focus {
outline: 3px solid #9263DE;
outline-offset: 2px
}
.au-card *+.au-card__divider,
.au-card *+.au-card__body,
.au-card *+.au-card__footer {
margin-top: 16px;
margin-top: 1rem
}
.au-card .au-card__divider {
border: #d3d3d3 0.5px solid;
margin-bottom: 0
}
.au-card .au-card__title {
margin: 0 0 16px 0;
margin: 0 0 1rem 0
}
.au-card .au-card__header {
font-weight: bold;
margin: 0;
border-bottom: solid 1px #d3d3d3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 16px;
padding: 1rem
}
.au-card .au-card__footer {
padding: 16px;
padding: 1rem;
margin: 0;
border-top: solid 1px #d3d3d3;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px
}
.au-card .au-card__inner {
padding: 16px;
padding: 1rem
}
.lt-ie9 .au-card {
border: solid 1px gray
}
.au-card.au-card--centred,
.au-card .au-card--centred {
text-align: center
}
a.au-card {
color: #313131;
cursor: pointer;
text-decoration: none
}
a.au-card .au-card__title {
color: #00698f;
text-decoration: underline;
text-decoration-skip-ink: auto
}
a.au-card:hover .au-card__title {
text-decoration: none;
color: #313131
}
a.au-card:focus {
outline: 3px solid #9263DE;
outline-offset: 2px
}
a.au-card.au-card--shadow:focus {
border-radius: 0
}
a.au-card.au-card--shadow:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
}
.au-card-list {
list-style: none;
padding: 0
}
.au-card-list:before,
.au-card-list:after {
content: " ";
display: table
}
.au-card-list:after {
clear: both
}
.au-card-list:before {
display: none
}
.au-card-list li {
list-style: none;
padding: 0;
margin-top: 24px;
margin-top: 1.5rem
}
.au-card-list.au-card-list--matchheight {
display: flex;
flex-wrap: wrap
}
.au-card-list.au-card-list--matchheight li {
/* display: flex */
}
.au-card-list.au-card-list--matchheight .au-card {
display: block;
height: 100%; /* <- This has been added. */
/* flex-direction: column */
}
/*! @gov.au/grid-12 v2.1.0 */.au-grid .container{box-sizing:border-box}@media (min-width: 768px){.au-grid .container{width:744px}}@media (min-width: 992px){.au-grid .container{width:968px}}@media (min-width: 1200px){.au-grid .container{width:1176px}}.au-grid .container,.au-grid .container-fluid{box-sizing:border-box;margin-right:auto;margin-left:auto;padding-left:12px;padding-right:12px}.au-grid .container:before,.au-grid .container:after,.au-grid .container-fluid:before,.au-grid .container-fluid:after{content:" ";display:table}.au-grid .container:after,.au-grid .container-fluid:after{clear:both}.au-grid .row{margin-left:-12px;margin-right:-12px}.au-grid .row:before,.au-grid .row:after{content:" ";display:table}.au-grid .row:after{clear:both}.au-grid .col-xs-1,.au-grid .col-sm-1,.au-grid .col-md-1,.au-grid .col-lg-1,.au-grid .col-xs-2,.au-grid .col-sm-2,.au-grid .col-md-2,.au-grid .col-lg-2,.au-grid .col-xs-3,.au-grid .col-sm-3,.au-grid .col-md-3,.au-grid .col-lg-3,.au-grid .col-xs-4,.au-grid .col-sm-4,.au-grid .col-md-4,.au-grid .col-lg-4,.au-grid .col-xs-5,.au-grid .col-sm-5,.au-grid .col-md-5,.au-grid .col-lg-5,.au-grid .col-xs-6,.au-grid .col-sm-6,.au-grid .col-md-6,.au-grid .col-lg-6,.au-grid .col-xs-7,.au-grid .col-sm-7,.au-grid .col-md-7,.au-grid .col-lg-7,.au-grid .col-xs-8,.au-grid .col-sm-8,.au-grid .col-md-8,.au-grid .col-lg-8,.au-grid .col-xs-9,.au-grid .col-sm-9,.au-grid .col-md-9,.au-grid .col-lg-9,.au-grid .col-xs-10,.au-grid .col-sm-10,.au-grid .col-md-10,.au-grid .col-lg-10,.au-grid .col-xs-11,.au-grid .col-sm-11,.au-grid .col-md-11,.au-grid .col-lg-11,.au-grid .col-xs-12,.au-grid .col-sm-12,.au-grid .col-md-12,.au-grid .col-lg-12{box-sizing:border-box;position:relative;min-height:1px;padding-left:12px;padding-right:12px}.au-grid .col-xs-1,.au-grid .col-xs-2,.au-grid .col-xs-3,.au-grid .col-xs-4,.au-grid .col-xs-5,.au-grid .col-xs-6,.au-grid .col-xs-7,.au-grid .col-xs-8,.au-grid .col-xs-9,.au-grid .col-xs-10,.au-grid .col-xs-11,.au-grid .col-xs-12{float:left}.au-grid .col-xs-1{width:8.33333%}.au-grid .col-xs-2{width:16.66667%}.au-grid .col-xs-3{width:25%}.au-grid .col-xs-4{width:33.33333%}.au-grid .col-xs-5{width:41.66667%}.au-grid .col-xs-6{width:50%}.au-grid .col-xs-7{width:58.33333%}.au-grid .col-xs-8{width:66.66667%}.au-grid .col-xs-9{width:75%}.au-grid .col-xs-10{width:83.33333%}.au-grid .col-xs-11{width:91.66667%}.au-grid .col-xs-12{width:100%}.au-grid .col-xs-pull-0{right:auto}.au-grid .col-xs-pull-1{right:8.33333%}.au-grid .col-xs-pull-2{right:16.66667%}.au-grid .col-xs-pull-3{right:25%}.au-grid .col-xs-pull-4{right:33.33333%}.au-grid .col-xs-pull-5{right:41.66667%}.au-grid .col-xs-pull-6{right:50%}.au-grid .col-xs-pull-7{right:58.33333%}.au-grid .col-xs-pull-8{right:66.66667%}.au-grid .col-xs-pull-9{right:75%}.au-grid .col-xs-pull-10{right:83.33333%}.au-grid .col-xs-pull-11{right:91.66667%}.au-grid .col-xs-pull-12{right:100%}.au-grid .col-xs-push-0{left:auto}.au-grid .col-xs-push-1{left:8.33333%}.au-grid .col-xs-push-2{left:16.66667%}.au-grid .col-xs-push-3{left:25%}.au-grid .col-xs-push-4{left:33.33333%}.au-grid .col-xs-push-5{left:41.66667%}.au-grid .col-xs-push-6{left:50%}.au-grid .col-xs-push-7{left:58.33333%}.au-grid .col-xs-push-8{left:66.66667%}.au-grid .col-xs-push-9{left:75%}.au-grid .col-xs-push-10{left:83.33333%}.au-grid .col-xs-push-11{left:91.66667%}.au-grid .col-xs-push-12{left:100%}.au-grid .col-xs-offset-0{margin-left:0%}.au-grid .col-xs-offset-1{margin-left:8.33333%}.au-grid .col-xs-offset-2{margin-left:16.66667%}.au-grid .col-xs-offset-3{margin-left:25%}.au-grid .col-xs-offset-4{margin-left:33.33333%}.au-grid .col-xs-offset-5{margin-left:41.66667%}.au-grid .col-xs-offset-6{margin-left:50%}.au-grid .col-xs-offset-7{margin-left:58.33333%}.au-grid .col-xs-offset-8{margin-left:66.66667%}.au-grid .col-xs-offset-9{margin-left:75%}.au-grid .col-xs-offset-10{margin-left:83.33333%}.au-grid .col-xs-offset-11{margin-left:91.66667%}.au-grid .col-xs-offset-12{margin-left:100%}@media (min-width: 768px){.au-grid .col-sm-1,.au-grid .col-sm-2,.au-grid .col-sm-3,.au-grid .col-sm-4,.au-grid .col-sm-5,.au-grid .col-sm-6,.au-grid .col-sm-7,.au-grid .col-sm-8,.au-grid .col-sm-9,.au-grid .col-sm-10,.au-grid .col-sm-11,.au-grid .col-sm-12{float:left}.au-grid .col-sm-1{width:8.33333%}.au-grid .col-sm-2{width:16.66667%}.au-grid .col-sm-3{width:25%}.au-grid .col-sm-4{width:33.33333%}.au-grid .col-sm-5{width:41.66667%}.au-grid .col-sm-6{width:50%}.au-grid .col-sm-7{width:58.33333%}.au-grid .col-sm-8{width:66.66667%}.au-grid .col-sm-9{width:75%}.au-grid .col-sm-10{width:83.33333%}.au-grid .col-sm-11{width:91.66667%}.au-grid .col-sm-12{width:100%}.au-grid .col-sm-pull-0{right:auto}.au-grid .col-sm-pull-1{right:8.33333%}.au-grid .col-sm-pull-2{right:16.66667%}.au-grid .col-sm-pull-3{right:25%}.au-grid .col-sm-pull-4{right:33.33333%}.au-grid .col-sm-pull-5{right:41.66667%}.au-grid .col-sm-pull-6{right:50%}.au-grid .col-sm-pull-7{right:58.33333%}.au-grid .col-sm-pull-8{right:66.66667%}.au-grid .col-sm-pull-9{right:75%}.au-grid .col-sm-pull-10{right:83.33333%}.au-grid .col-sm-pull-11{right:91.66667%}.au-grid .col-sm-pull-12{right:100%}.au-grid .col-sm-push-0{left:auto}.au-grid .col-sm-push-1{left:8.33333%}.au-grid .col-sm-push-2{left:16.66667%}.au-grid .col-sm-push-3{left:25%}.au-grid .col-sm-push-4{left:33.33333%}.au-grid .col-sm-push-5{left:41.66667%}.au-grid .col-sm-push-6{left:50%}.au-grid .col-sm-push-7{left:58.33333%}.au-grid .col-sm-push-8{left:66.66667%}.au-grid .col-sm-push-9{left:75%}.au-grid .col-sm-push-10{left:83.33333%}.au-grid .col-sm-push-11{left:91.66667%}.au-grid .col-sm-push-12{left:100%}.au-grid .col-sm-offset-0{margin-left:0%}.au-grid .col-sm-offset-1{margin-left:8.33333%}.au-grid .col-sm-offset-2{margin-left:16.66667%}.au-grid .col-sm-offset-3{margin-left:25%}.au-grid .col-sm-offset-4{margin-left:33.33333%}.au-grid .col-sm-offset-5{margin-left:41.66667%}.au-grid .col-sm-offset-6{margin-left:50%}.au-grid .col-sm-offset-7{margin-left:58.33333%}.au-grid .col-sm-offset-8{margin-left:66.66667%}.au-grid .col-sm-offset-9{margin-left:75%}.au-grid .col-sm-offset-10{margin-left:83.33333%}.au-grid .col-sm-offset-11{margin-left:91.66667%}.au-grid .col-sm-offset-12{margin-left:100%}}@media (min-width: 992px){.au-grid .col-md-1,.au-grid .col-md-2,.au-grid .col-md-3,.au-grid .col-md-4,.au-grid .col-md-5,.au-grid .col-md-6,.au-grid .col-md-7,.au-grid .col-md-8,.au-grid .col-md-9,.au-grid .col-md-10,.au-grid .col-md-11,.au-grid .col-md-12{float:left}.au-grid .col-md-1{width:8.33333%}.au-grid .col-md-2{width:16.66667%}.au-grid .col-md-3{width:25%}.au-grid .col-md-4{width:33.33333%}.au-grid .col-md-5{width:41.66667%}.au-grid .col-md-6{width:50%}.au-grid .col-md-7{width:58.33333%}.au-grid .col-md-8{width:66.66667%}.au-grid .col-md-9{width:75%}.au-grid .col-md-10{width:83.33333%}.au-grid .col-md-11{width:91.66667%}.au-grid .col-md-12{width:100%}.au-grid .col-md-pull-0{right:auto}.au-grid .col-md-pull-1{right:8.33333%}.au-grid .col-md-pull-2{right:16.66667%}.au-grid .col-md-pull-3{right:25%}.au-grid .col-md-pull-4{right:33.33333%}.au-grid .col-md-pull-5{right:41.66667%}.au-grid .col-md-pull-6{right:50%}.au-grid .col-md-pull-7{right:58.33333%}.au-grid .col-md-pull-8{right:66.66667%}.au-grid .col-md-pull-9{right:75%}.au-grid .col-md-pull-10{right:83.33333%}.au-grid .col-md-pull-11{right:91.66667%}.au-grid .col-md-pull-12{right:100%}.au-grid .col-md-push-0{left:auto}.au-grid .col-md-push-1{left:8.33333%}.au-grid .col-md-push-2{left:16.66667%}.au-grid .col-md-push-3{left:25%}.au-grid .col-md-push-4{left:33.33333%}.au-grid .col-md-push-5{left:41.66667%}.au-grid .col-md-push-6{left:50%}.au-grid .col-md-push-7{left:58.33333%}.au-grid .col-md-push-8{left:66.66667%}.au-grid .col-md-push-9{left:75%}.au-grid .col-md-push-10{left:83.33333%}.au-grid .col-md-push-11{left:91.66667%}.au-grid .col-md-push-12{left:100%}.au-grid .col-md-offset-0{margin-left:0%}.au-grid .col-md-offset-1{margin-left:8.33333%}.au-grid .col-md-offset-2{margin-left:16.66667%}.au-grid .col-md-offset-3{margin-left:25%}.au-grid .col-md-offset-4{margin-left:33.33333%}.au-grid .col-md-offset-5{margin-left:41.66667%}.au-grid .col-md-offset-6{margin-left:50%}.au-grid .col-md-offset-7{margin-left:58.33333%}.au-grid .col-md-offset-8{margin-left:66.66667%}.au-grid .col-md-offset-9{margin-left:75%}.au-grid .col-md-offset-10{margin-left:83.33333%}.au-grid .col-md-offset-11{margin-left:91.66667%}.au-grid .col-md-offset-12{margin-left:100%}}@media (min-width: 1200px){.au-grid .col-lg-1,.au-grid .col-lg-2,.au-grid .col-lg-3,.au-grid .col-lg-4,.au-grid .col-lg-5,.au-grid .col-lg-6,.au-grid .col-lg-7,.au-grid .col-lg-8,.au-grid .col-lg-9,.au-grid .col-lg-10,.au-grid .col-lg-11,.au-grid .col-lg-12{float:left}.au-grid .col-lg-1{width:8.33333%}.au-grid .col-lg-2{width:16.66667%}.au-grid .col-lg-3{width:25%}.au-grid .col-lg-4{width:33.33333%}.au-grid .col-lg-5{width:41.66667%}.au-grid .col-lg-6{width:50%}.au-grid .col-lg-7{width:58.33333%}.au-grid .col-lg-8{width:66.66667%}.au-grid .col-lg-9{width:75%}.au-grid .col-lg-10{width:83.33333%}.au-grid .col-lg-11{width:91.66667%}.au-grid .col-lg-12{width:100%}.au-grid .col-lg-pull-0{right:auto}.au-grid .col-lg-pull-1{right:8.33333%}.au-grid .col-lg-pull-2{right:16.66667%}.au-grid .col-lg-pull-3{right:25%}.au-grid .col-lg-pull-4{right:33.33333%}.au-grid .col-lg-pull-5{right:41.66667%}.au-grid .col-lg-pull-6{right:50%}.au-grid .col-lg-pull-7{right:58.33333%}.au-grid .col-lg-pull-8{right:66.66667%}.au-grid .col-lg-pull-9{right:75%}.au-grid .col-lg-pull-10{right:83.33333%}.au-grid .col-lg-pull-11{right:91.66667%}.au-grid .col-lg-pull-12{right:100%}.au-grid .col-lg-push-0{left:auto}.au-grid .col-lg-push-1{left:8.33333%}.au-grid .col-lg-push-2{left:16.66667%}.au-grid .col-lg-push-3{left:25%}.au-grid .col-lg-push-4{left:33.33333%}.au-grid .col-lg-push-5{left:41.66667%}.au-grid .col-lg-push-6{left:50%}.au-grid .col-lg-push-7{left:58.33333%}.au-grid .col-lg-push-8{left:66.66667%}.au-grid .col-lg-push-9{left:75%}.au-grid .col-lg-push-10{left:83.33333%}.au-grid .col-lg-push-11{left:91.66667%}.au-grid .col-lg-push-12{left:100%}.au-grid .col-lg-offset-0{margin-left:0%}.au-grid .col-lg-offset-1{margin-left:8.33333%}.au-grid .col-lg-offset-2{margin-left:16.66667%}.au-grid .col-lg-offset-3{margin-left:25%}.au-grid .col-lg-offset-4{margin-left:33.33333%}.au-grid .col-lg-offset-5{margin-left:41.66667%}.au-grid .col-lg-offset-6{margin-left:50%}.au-grid .col-lg-offset-7{margin-left:58.33333%}.au-grid .col-lg-offset-8{margin-left:66.66667%}.au-grid .col-lg-offset-9{margin-left:75%}.au-grid .col-lg-offset-10{margin-left:83.33333%}.au-grid .col-lg-offset-11{margin-left:91.66667%}.au-grid .col-lg-offset-12{margin-left:100%}}
//Javascript code for blocks
;(function(window, document) {
/*jshint evil:true */
/** version */
var version = '3.7.3';
/** Preset options */
var options = window.html5 || {};
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE **/
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;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Name of the expando, to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv';
/** The id for the the documents expando */
var expanID = 0;
/** Cached data for each document */
var expandoData = {};
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function() {
try {
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
supportsHtml5Styles = ('hidden' in a);
supportsUnknownElements = a.childNodes.length == 1 || (function() {
// assign a false positive if unable to shiv
(document.createElement)('a');
var frag = document.createDocumentFragment();
return (
typeof frag.cloneNode == 'undefined' ||
typeof frag.createDocumentFragment == 'undefined' ||
typeof frag.createElement == 'undefined'
);
}());
} catch(e) {
// assign a false positive if detection fails => unable to shiv
supportsHtml5Styles = true;
supportsUnknownElements = true;
}
}());
/*--------------------------------------------------------------------------*/
/**
* Creates a style sheet with the given CSS text and adds it to the document.
* @private
* @param {Document} ownerDocument The document.
* @param {String} cssText The CSS text.
* @returns {StyleSheet} The style element.
*/
function addStyleSheet(ownerDocument, cssText) {
var p = ownerDocument.createElement('p'),
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
p.innerHTML = 'x<style>' + cssText + '</style>';
return parent.insertBefore(p.lastChild, parent.firstChild);
}
/**
* Returns the value of `html5.elements` as an array.
* @private
* @returns {Array} An array of shived element node names.
*/
function getElements() {
var elements = html5.elements;
return typeof elements == 'string' ? elements.split(' ') : elements;
}
/**
* Extends the built-in list of html5 elements
* @memberOf html5
* @param {String|Array} newElements whitespace separated list or array of new element names to shiv
* @param {Document} ownerDocument The context document.
*/
function addElements(newElements, ownerDocument) {
var elements = html5.elements;
if(typeof elements != 'string'){
elements = elements.join(' ');
}
if(typeof newElements != 'string'){
newElements = newElements.join(' ');
}
html5.elements = elements +' '+ newElements;
shivDocument(ownerDocument);
}
/**
* Returns the data associated to the given document
* @private
* @param {Document} ownerDocument The document.
* @returns {Object} An object of data.
*/
function getExpandoData(ownerDocument) {
var data = expandoData[ownerDocument[expando]];
if (!data) {
data = {};
expanID++;
ownerDocument[expando] = expanID;
expandoData[expanID] = data;
}
return data;
}
/**
* returns a shived element for the given nodeName and document
* @memberOf html5
* @param {String} nodeName name of the element
* @param {Document|DocumentFragment} ownerDocument The context document.
* @returns {Object} The shived element.
*/
function createElement(nodeName, ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
if (!data) {
data = getExpandoData(ownerDocument);
}
var node;
if (data.cache[nodeName]) {
node = data.cache[nodeName].cloneNode();
} else if (saveClones.test(nodeName)) {
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
} else {
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because
// * Attributes like `name` or `type` cannot be set/changed once an element
// is inserted into a document/fragment
// * Link elements with `src` attributes that are inaccessible, as with
// a 403 response, will cause the tab/window to crash
// * Script elements appended to fragments will execute when their `src`
// or `text` property is set
return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
}
/**
* returns a shived DocumentFragment for the given document
* @memberOf html5
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived DocumentFragment.
*/
function createDocumentFragment(ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createDocumentFragment();
}
data = data || getExpandoData(ownerDocument);
var clone = data.frag.cloneNode(),
i = 0,
elems = getElements(),
l = elems.length;
for(;i<l;i++){
clone.createElement(elems[i]);
}
return clone;
}
/**
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
* @private
* @param {Document|DocumentFragment} ownerDocument The document.
* @param {Object} data of the document.
*/
function shivMethods(ownerDocument, data) {
if (!data.cache) {
data.cache = {};
data.createElem = ownerDocument.createElement;
data.createFrag = ownerDocument.createDocumentFragment;
data.frag = data.createFrag();
}
ownerDocument.createElement = function(nodeName) {
//abort shiv
if (!html5.shivMethods) {
return data.createElem(nodeName);
}
return createElement(nodeName, ownerDocument, data);
};
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
'var n=f.cloneNode(),c=n.createElement;' +
'h.shivMethods&&(' +
// unroll the `createElement` calls
getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
data.createElem(nodeName);
data.frag.createElement(nodeName);
return 'c("' + nodeName + '")';
}) +
');return n}'
)(html5, data.frag);
}
/*--------------------------------------------------------------------------*/
/**
* Shivs the given document.
* @memberOf html5
* @param {Document} ownerDocument The document to shiv.
* @returns {Document} The shived document.
*/
function shivDocument(ownerDocument) {
if (!ownerDocument) {
ownerDocument = document;
}
var data = getExpandoData(ownerDocument);
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
data.hasCSS = !!addStyleSheet(ownerDocument,
// corrects block display not defined in IE6/7/8/9
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
// adds styling not present in IE6/7/8/9
'mark{background:#FF0;color:#000}' +
// hides non-rendered elements
'template{display:none}'
);
}
if (!supportsUnknownElements) {
shivMethods(ownerDocument, data);
}
return ownerDocument;
}
/*--------------------------------------------------------------------------*/
/**
* The `html5` object is exposed so that more elements can be shived and
* existing shiving can be detected on iframes.
* @type Object
* @example
*
* // options can be changed before the script is included
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
*/
var html5 = {
/**
* An array or space separated string of node names of the elements to shiv.
* @memberOf html5
* @type Array|String
*/
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
/**
* current version of html5shiv
*/
'version': version,
/**
* A flag to indicate that the HTML5 style sheet should be inserted.
* @memberOf html5
* @type Boolean
*/
'shivCSS': (options.shivCSS !== false),
/**
* Is equal to true if a browser supports creating unknown/HTML5 elements
* @memberOf html5
* @type boolean
*/
'supportsUnknownElements': supportsUnknownElements,
/**
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
* methods should be overwritten.
* @memberOf html5
* @type Boolean
*/
'shivMethods': (options.shivMethods !== false),
/**
* A string to describe the type of `html5` object ("default" or "default print").
* @memberOf html5
* @type String
*/
'type': 'default',
// shivs the document according to the specified `html5` object options
'shivDocument': shivDocument,
//creates a shived element
createElement: createElement,
//creates a shived documentFragment
createDocumentFragment: createDocumentFragment,
//extends list of elements
addElements: addElements
};
/*--------------------------------------------------------------------------*/
// expose html5
window.html5 = html5;
// shiv the document
shivDocument(document);
if(typeof module == 'object' && module.exports){
module.exports = html5;
}
}(typeof window !== "undefined" ? window : this, document));
/* Respond.js: min/max-width media query polyfill. (c) Scott Jehl. MIT Lic. j.mp/respondjs */
(function( w ){
"use strict";
//exposed namespace
var respond = {};
w.respond = respond;
//define update even in native-mq-supporting browsers, to avoid errors
respond.update = function(){};
//define ajax obj
var requestQueue = [],
xmlHttp = (function() {
var xmlhttpmethod = false;
try {
xmlhttpmethod = new w.XMLHttpRequest();
}
catch( e ){
xmlhttpmethod = new w.ActiveXObject( "Microsoft.XMLHTTP" );
}
return function(){
return xmlhttpmethod;
};
})(),
//tweaked Ajax functions from Quirksmode
ajax = function( url, callback ) {
var req = xmlHttp();
if (!req){
return;
}
req.open( "GET", url, true );
req.onreadystatechange = function () {
if ( req.readyState !== 4 || req.status !== 200 && req.status !== 304 ){
return;
}
callback( req.responseText );
};
if ( req.readyState === 4 ){
return;
}
req.send( null );
},
isUnsupportedMediaQuery = function( query ) {
return query.replace( respond.regex.minmaxwh, '' ).match( respond.regex.other );
};
//expose for testing
respond.ajax = ajax;
respond.queue = requestQueue;
respond.unsupportedmq = isUnsupportedMediaQuery;
respond.regex = {
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,
comments: /\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
only: /(only\s+)?([a-zA-Z]+)\s?/,
minw: /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
maxw: /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
minmaxwh: /\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,
other: /\([^\)]*\)/g
};
//expose media query support flag for external use
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia( "only all" ) !== null && w.matchMedia( "only all" ).matches;
//if media queries are supported, exit here
if( respond.mediaQueriesSupported ){
return;
}
//define vars
var doc = w.document,
docElem = doc.documentElement,
mediastyles = [],
rules = [],
appendedEls = [],
parsedSheets = {},
resizeThrottle = 30,
head = doc.getElementsByTagName( "head" )[0] || docElem,
base = doc.getElementsByTagName( "base" )[0],
links = head.getElementsByTagName( "link" ),
lastCall,
resizeDefer,
//cached container for 1em value, populated the first time it's needed
eminpx,
// returns the value of 1em in pixels
getEmValue = function() {
var ret,
div = doc.createElement('div'),
body = doc.body,
originalHTMLFontSize = docElem.style.fontSize,
originalBodyFontSize = body && body.style.fontSize,
fakeUsed = false;
div.style.cssText = "position:absolute;font-size:1em;width:1em";
if( !body ){
body = fakeUsed = doc.createElement( "body" );
body.style.background = "none";
}
// 1em in a media query is the value of the default font size of the browser
// reset docElem and body to ensure the correct value is returned
docElem.style.fontSize = "100%";
body.style.fontSize = "100%";
body.appendChild( div );
if( fakeUsed ){
docElem.insertBefore( body, docElem.firstChild );
}
ret = div.offsetWidth;
if( fakeUsed ){
docElem.removeChild( body );
}
else {
body.removeChild( div );
}
// restore the original values
docElem.style.fontSize = originalHTMLFontSize;
if( originalBodyFontSize ) {
body.style.fontSize = originalBodyFontSize;
}
//also update eminpx before returning
ret = eminpx = parseFloat(ret);
return ret;
},
//enable/disable styles
applyMedia = function( fromResize ){
var name = "clientWidth",
docElemProp = docElem[ name ],
currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
styleBlocks = {},
lastLink = links[ links.length-1 ],
now = (new Date()).getTime();
//throttle resize calls
if( fromResize && lastCall && now - lastCall < resizeThrottle ){
w.clearTimeout( resizeDefer );
resizeDefer = w.setTimeout( applyMedia, resizeThrottle );
return;
}
else {
lastCall = now;
}
for( var i in mediastyles ){
if( mediastyles.hasOwnProperty( i ) ){
var thisstyle = mediastyles[ i ],
min = thisstyle.minw,
max = thisstyle.maxw,
minnull = min === null,
maxnull = max === null,
em = "em";
if( !!min ){
min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
}
if( !!max ){
max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
}
// if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
if( !styleBlocks[ thisstyle.media ] ){
styleBlocks[ thisstyle.media ] = [];
}
styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );
}
}
}
//remove any existing respond style element(s)
for( var j in appendedEls ){
if( appendedEls.hasOwnProperty( j ) ){
if( appendedEls[ j ] && appendedEls[ j ].parentNode === head ){
head.removeChild( appendedEls[ j ] );
}
}
}
appendedEls.length = 0;
//inject active styles, grouped by media type
for( var k in styleBlocks ){
if( styleBlocks.hasOwnProperty( k ) ){
var ss = doc.createElement( "style" ),
css = styleBlocks[ k ].join( "\n" );
ss.type = "text/css";
ss.media = k;
//originally, ss was appended to a documentFragment and sheets were appended in bulk.
//this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set, so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!
head.insertBefore( ss, lastLink.nextSibling );
if ( ss.styleSheet ){
ss.styleSheet.cssText = css;
}
else {
ss.appendChild( doc.createTextNode( css ) );
}
//push to appendedEls to track for later removal
appendedEls.push( ss );
}
}
},
//find media blocks in css text, convert to style blocks
translate = function( styles, href, media ){
var qs = styles.replace( respond.regex.comments, '' )
.replace( respond.regex.keyframes, '' )
.match( respond.regex.media ),
ql = qs && qs.length || 0;
//try to get CSS path
href = href.substring( 0, href.lastIndexOf( "/" ) );
var repUrls = function( css ){
return css.replace( respond.regex.urls, "$1" + href + "$2$3" );
},
useMedia = !ql && media;
//if path exists, tack on trailing slash
if( href.length ){ href += "/"; }
//if no internal queries exist, but media attr does, use that
//note: this currently lacks support for situations where a media attr is specified on a link AND
//its associated stylesheet has internal CSS media queries.
//In those cases, the media attribute will currently be ignored.
if( useMedia ){
ql = 1;
}
for( var i = 0; i < ql; i++ ){
var fullq, thisq, eachq, eql;
//media attr
if( useMedia ){
fullq = media;
rules.push( repUrls( styles ) );
}
//parse for styles
else{
fullq = qs[ i ].match( respond.regex.findStyles ) && RegExp.$1;
rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
}
eachq = fullq.split( "," );
eql = eachq.length;
for( var j = 0; j < eql; j++ ){
thisq = eachq[ j ];
if( isUnsupportedMediaQuery( thisq ) ) {
continue;
}
mediastyles.push( {
media : thisq.split( "(" )[ 0 ].match( respond.regex.only ) && RegExp.$2 || "all",
rules : rules.length - 1,
hasquery : thisq.indexOf("(") > -1,
minw : thisq.match( respond.regex.minw ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
maxw : thisq.match( respond.regex.maxw ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
} );
}
}
applyMedia();
},
//recurse through request queue, get css text
makeRequests = function(){
if( requestQueue.length ){
var thisRequest = requestQueue.shift();
ajax( thisRequest.href, function( styles ){
translate( styles, thisRequest.href, thisRequest.media );
parsedSheets[ thisRequest.href ] = true;
// by wrapping recursive function call in setTimeout
// we prevent "Stack overflow" error in IE7
w.setTimeout(function(){ makeRequests(); },0);
} );
}
},
//loop stylesheets, send text content to translate
ripCSS = function(){
for( var i = 0; i < links.length; i++ ){
var sheet = links[ i ],
href = sheet.href,
media = sheet.media,
isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
//only links plz and prevent re-parsing
if( !!href && isCSS && !parsedSheets[ href ] ){
// selectivizr exposes css through the rawCssText expando
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
translate( sheet.styleSheet.rawCssText, href, media );
parsedSheets[ href ] = true;
} else {
if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base) ||
href.replace( RegExp.$1, "" ).split( "/" )[0] === w.location.host ){
// IE7 doesn't handle urls that start with '//' for ajax request
// manually add in the protocol
if ( href.substring(0,2) === "//" ) { href = w.location.protocol + href; }
requestQueue.push( {
href: href,
media: media
} );
}
}
}
}
makeRequests();
};
//translate CSS
ripCSS();
//expose update for re-running respond later on
respond.update = ripCSS;
//expose getEmValue
respond.getEmValue = getEmValue;
//adjust on resize
function callMedia(){
applyMedia( true );
}
if( w.addEventListener ){
w.addEventListener( "resize", callMedia, false );
}
else if( w.attachEvent ){
w.attachEvent( "onresize", callMedia );
}
})(this);
Comments
Post a Comment