Skip to content

Instantly share code, notes, and snippets.

@devote

devote/css.js

Created June 7, 2012 03:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devote/2886470 to your computer and use it in GitHub Desktop.
Save devote/2886470 to your computer and use it in GitHub Desktop.
Download ZIP
CSS box-shadow test
Raw
css.js
/*
* CSS API for Internet Explorer v0.0.1
*
* Copyright 2012, Dmitriy Pakhtinov ( spb.piksel@gmail.com )
*
* http://spb-piksel.ru/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Update: 07-06-2012
*/
(function( window, undefined ) {
"use strict"
var
document = window.document,
ready = false,
msie = eval( "/*@cc_on (@_jscript_version+'').replace(/\\d\\./, '');@*/"),
nativeAppendChild, nativeInsertBefore,
nativeCreateElement = document.createElement;
function groupColors( token ) {
var colors = [];
return {
colors: colors,
token: token.replace( /rgba?\(([^\)]+)\)|#([a-f0-9]{6}|[a-f0-9]{3})/ig, function( m, rgb, hex ) {
if ( rgb && ( m = /([0-9\.]+\%?)\s*,\s*([0-9\.]+\%?)\s*,\s*([0-9\.]+\%?)\s*(?:,\s*([0-9\.]+))?/g.exec( rgb ) ) ) {
hex = [
parseInt( m[ 1 ].indexOf( "%" ) > 0 ? parseFloat( m[ 1 ] ) * 2.55 : m[ 1 ] ).toString( 16 ),
parseInt( m[ 2 ].indexOf( "%" ) > 0 ? parseFloat( m[ 2 ] ) * 2.55 : m[ 2 ] ).toString( 16 ),
parseInt( m[ 3 ].indexOf( "%" ) > 0 ? parseFloat( m[ 3 ] ) * 2.55 : m[ 3 ] ).toString( 16 ),
m[ 4 ] == "" || m[ 4 ] === undefined ? 1 : parseFloat( m[ 4 ] )
];
colors[ colors.length ] = {
color: "#" + ( hex[ 0 ].length == 1 ? "0" + hex[ 0 ] : hex[ 0 ] ) +
( hex[ 1 ].length == 1 ? "0" + hex[ 1 ] : hex[ 1 ] ) +
( hex[ 2 ].length == 1 ? "0" + hex[ 2 ] : hex[ 2 ] ),
alpha: hex[ 3 ]
}
} else {
if ( hex.length === 3 ) {
hex = hex.split( "" );
colors[ colors.length ] = {
color: "#" + hex[ 0 ] + hex[ 0 ] + hex[ 1 ] + hex[ 1 ] + hex[ 2 ] + hex[ 2 ],
aplha: 1
}
} else {
colors[ colors.length ] = {
color: "#" + hex,
alpha: 1
}
}
}
return "";
})
};
}
function dropShadow( elem, shadow ) {
shadow = shadow || ( elem.currentStyle ? elem.currentStyle["IeBoxShadow"] : elem.style["IeBoxShadow"] );
if ( !shadow || shadow == "none" ) {
if ( elem["_spikeCSS"] && elem["_spikeCSS"]["sBS"] ) {
var node;
while( node = elem["_spikeCSS"]["sBS"].pop() ) {
elem.removeChild( node );
}
if ( elem["_spikeCSS"]["sBSie7"] ) {
elem.removeChild( elem["_spikeCSS"]["sBSie7"] );
delete elem["_spikeCSS"]["sBSie7"];
}
delete elem["_spikeCSS"]["sBS"];
}
return;
}
var
group = groupColors( shadow ),
tokens = group.token.split( "," ),
length = tokens.length,
currentColor = groupColors( elem.currentStyle ? elem.currentStyle.color : elem.style.color ),
token, i = 0, inc = 0, sBS, sBSie7;
elem["_spikeCSS"] = elem["_spikeCSS"] || {};
sBS = elem["_spikeCSS"]["sBS"] = elem["_spikeCSS"]["sBS"] || [];
for( i = 0; i < length; i++ ) {
if ( ( token = tokens[ i ].replace( /^[\s]+|[\s](?=\s)|[\s]+$/g, '' ).split( " " ) ) && token[ 0 ] != "" ) {
if ( token[ 0 ] == "inset" ) {
token[ token.length - 1 ] = token.shift();
}
var
x = parseInt( token.shift() ) || 0,
y = parseInt( token.shift() ) || 0,
radius = parseInt( token.shift() ) || 0,
distance = parseInt( token.shift() ) || 0,
inset = token.shift() === "inset" ? true : false,
color = group.colors[ i ] ? group.colors[ i ].color :
currentColor.colors[ 0 ] ? currentColor.colors[ 0 ].color : currentColor.token,
alpha = group.colors[ i ] ? group.colors[ i ].alpha :
currentColor.colors[ 0 ] ? currentColor.colors[ 0 ].alpha : 1;
if ( !sBS[ inc ] ) {
sBS[ inc ] = nativeCreateElement( "boxshadow" );
if ( inc > 0 ) {
if ( nativeInsertBefore ) {
nativeInsertBefore.call( elem, sBS[ inc ], sBS[ inc - 1 ] );
} else {
elem.insertBefore( sBS[ inc ], sBS[ inc - 1 ] );
}
} else {
if ( nativeAppendChild ) {
nativeAppendChild.call( elem, sBS[ inc ] );
} else {
elem.appendChild( sBS[ inc ] );
}
}
sBS[ inc ].style.position = 'absolute';
sBS[ inc ].style.zIndex = -2;
sBS[ inc ].style.width = "100%";
sBS[ inc ].style.height = "100%";
}
sBS[ inc ].style.border = distance + "px solid " + color;
sBS[ inc ].style.margin = "-1px 0 0 -1px";
sBS[ inc ].style.left = ( -( ( radius / 2 ) + distance ) + x ) + "px";
sBS[ inc ].style.top = ( -( ( radius / 2 ) + distance ) + y ) + "px";
sBS[ inc ].style.backgroundColor = color;
sBS[ inc ].style.filter = "Alpha(opacity=" + alpha * 100 + ") " +
"progid:DXImageTransform.Microsoft.Blur(pixelRadius=" + radius / 2 + ");";
inc++;
}
}
for( i = inc; token = sBS[ inc++ ]; ) {
elem.removeChild( token );
}
sBS.length = i;
if ( elem.currentStyle.position == "static" ) {
elem.style.position = "relative";
}
if ( msie < 8 && !elem["_spikeCSS"]["sBSie7"] ) {
sBSie7 = elem["_spikeCSS"]["sBSie7"] = document.createElement( elem.nodeName );
elem.appendChild( sBSie7 );
sBSie7.style.backgroundColor = elem.currentStyle.backgroundColor;
sBSie7.style.backgroundImage = elem.currentStyle.backgroundImage;
sBSie7.style.position = "absolute";
sBSie7.style.top = "0";
sBSie7.style.left = "0";
sBSie7.style.width = "100%";
sBSie7.style.height = "100%";
sBSie7.style.zIndex = "-1";
for( var node, i = 0; node = elem.children[ i++ ]; ) {
if ( node.currentStyle && node.currentStyle.position == "static" ) {
node.style.position = "relative";
}
}
}
}
function attachCSS( elem ) {
var elems = ( elem && elem.nodeType && elem || document ).getElementsByTagName( "*" );
for( var i = 0; elem = elems[ i++ ]; ) {
if ( elem.currentStyle["-ie-box-shadow"] ) {
try {
elem.runtimeStyle['spikeElement'] = elem.style['spikeElement'] = elem;
dropShadow( elem, elem.currentStyle["-ie-box-shadow"] );
} catch( _e_ ) {}
}
}
}
if ( msie == 8 ) {
var nativeInnerHTML = Object.getOwnPropertyDescriptor( Element.prototype, "innerHTML" ).set;
nativeAppendChild = Element.prototype.appendChild;
nativeInsertBefore = Element.prototype.insertBefore;
document.createElement = function() {
var elem = nativeCreateElement.apply( document, arguments );
elem.style["spikeElement"] = elem;
return elem;
}
Element.prototype.appendChild = function() {
nativeAppendChild.apply( this, arguments );
attachCSS( this );
}
Element.prototype.insertBefore = function() {
nativeInsertBefore.apply( this, arguments );
attachCSS( this );
}
Object.defineProperty( Element.prototype, "innerHTML", {
set: function() {
nativeInnerHTML.apply( this, arguments );
attachCSS( this );
}
});
Object.defineProperty( CSSStyleDeclaration.prototype, "IeBoxShadow", {
set: function( value ) {
this["-ie-box-shadow"] = value;
if ( this["spikeElement"] ) {
dropShadow( this["spikeElement"], value );
} else {
attachCSS();
}
},
get: function() {
return this["-ie-box-shadow"];
}
});
if ( document.readyState === "complete" ) {
attachCSS();
} else {
document.attachEvent( "onreadystatechange", attachCSS );
window.attachEvent( "onload", attachCSS );
}
} else if ( msie < 8 ) {
var ss = document.createStyleSheet();
ss.cssText = "*{-spike-redraw:expression(spikeIE7redraw(this));}";
window["spikeIE7redraw"] = function( self ) {
if ( self.currentStyle['-ie-box-shadow'] || self.style["IeBoxShadow"] ) {
if ( self.currentStyle["IeBoxShadow"] === undefined ) {
self.runtimeStyle["IeBoxShadow"] = self.currentStyle['-ie-box-shadow'];
} else if ( self.style["IeBoxShadow"] !== undefined ) {
self.runtimeStyle["IeBoxShadow"] = self.style["IeBoxShadow"];
}
dropShadow( self );
}
}
}
})( window );
Raw
css.min.js
/*
* CSS API for Internet Explorer v0.0.1
*
* Copyright 2012, Dmitriy Pakhtinov ( spb.piksel@gmail.com )
*
* http://spb-piksel.ru/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Update: 07-06-2012
*/
(function(l,m){function t(a){var f=[];return{a:f,b:a.replace(/rgba?\(([^\)]+)\)|#([a-f0-9]{6}|[a-f0-9]{3})/ig,function(a,i,b){i&&(a=/([0-9\.]+\%?)\s*,\s*([0-9\.]+\%?)\s*,\s*([0-9\.]+\%?)\s*(?:,\s*([0-9\.]+))?/g.exec(i))?(b=[parseInt(0<a[1].indexOf("%")?2.55*parseFloat(a[1]):a[1]).toString(16),parseInt(0<a[2].indexOf("%")?2.55*parseFloat(a[2]):a[2]).toString(16),parseInt(0<a[3].indexOf("%")?2.55*parseFloat(a[3]):a[3]).toString(16),""==a[4]||a[4]===m?1:parseFloat(a[4])],f[f.length]={color:"#"+(1==b[0].length?
"0"+b[0]:b[0])+(1==b[1].length?"0"+b[1]:b[1])+(1==b[2].length?"0"+b[2]:b[2]),alpha:b[3]}):3===b.length?(b=b.split(""),f[f.length]={color:"#"+b[0]+b[0]+b[1]+b[1]+b[2]+b[2],c:1}):f[f.length]={color:"#"+b,alpha:1};return""})}}function k(a,f){f=f||(a.currentStyle?a.currentStyle.IeBoxShadow:a.style.IeBoxShadow);if(!f||"none"==f){if(a._spikeCSS&&a._spikeCSS.sBS){for(var g;g=a._spikeCSS.sBS.pop();)a.removeChild(g);a._spikeCSS.sBSie7&&(a.removeChild(a._spikeCSS.sBSie7),delete a._spikeCSS.sBSie7);delete a._spikeCSS.sBS}}else{g=
t(f);var j=g.b.split(","),b=j.length,n=t(a.currentStyle?a.currentStyle.color:a.style.color),h,c=0,d=0,e;a._spikeCSS=a._spikeCSS||{};e=a._spikeCSS.sBS=a._spikeCSS.sBS||[];for(c=0;c<b;c++)if((h=j[c].replace(/^[\s]+|[\s](?=\s)|[\s]+$/g,"").split(" "))&&""!=h[0]){"inset"==h[0]&&(h[h.length-1]=h.shift());var l=parseInt(h.shift())||0,m=parseInt(h.shift())||0,k=parseInt(h.shift())||0,q=parseInt(h.shift())||0;h.shift();var u=g.a[c]?g.a[c].color:n.a[0]?n.a[0].color:n.b,s=g.a[c]?g.a[c].alpha:n.a[0]?n.a[0].alpha:
1;e[d]||(e[d]=v("boxshadow"),0<d?o?o.call(a,e[d],e[d-1]):a.insertBefore(e[d],e[d-1]):p?p.call(a,e[d]):a.appendChild(e[d]),e[d].style.position="absolute",e[d].style.zIndex=-2,e[d].style.width="100%",e[d].style.height="100%");e[d].style.border=q+"px solid "+u;e[d].style.margin="-1px 0 0 -1px";e[d].style.left=-(k/2+q)+l+"px";e[d].style.top=-(k/2+q)+m+"px";e[d].style.backgroundColor=u;e[d].style.filter="Alpha(opacity="+100*s+") progid:DXImageTransform.Microsoft.Blur(pixelRadius="+k/2+");";d++}for(c=d;h=
e[d++];)a.removeChild(h);e.length=c;"static"==a.currentStyle.position&&(a.style.position="relative");if(8>r&&!a._spikeCSS.sBSie7){c=a._spikeCSS.sBSie7=i.createElement(a.nodeName);a.appendChild(c);c.style.backgroundColor=a.currentStyle.backgroundColor;c.style.backgroundImage=a.currentStyle.backgroundImage;c.style.position="absolute";c.style.top="0";c.style.left="0";c.style.width="100%";c.style.height="100%";c.style.zIndex="-1";for(c=0;g=a.children[c++];)g.currentStyle&&"static"==g.currentStyle.position&&
(g.style.position="relative")}}}function j(a){for(var f=(a&&a.nodeType&&a||i).getElementsByTagName("*"),g=0;a=f[g++];)if(a.currentStyle["-ie-box-shadow"])try{a.runtimeStyle.spikeElement=a.style.spikeElement=a,k(a,a.currentStyle["-ie-box-shadow"])}catch(j){}}var i=l.document,r=eval("/*@cc_on (@_jscript_version+'').replace(/\\d\\./, '');@*/"),p,o,v=i.createElement;if(8==r){var s=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML").set;p=Element.prototype.appendChild;o=Element.prototype.insertBefore;
i.createElement=function(){var a=v.apply(i,arguments);return a.style.spikeElement=a};Element.prototype.appendChild=function(){p.apply(this,arguments);j(this)};Element.prototype.insertBefore=function(){o.apply(this,arguments);j(this)};Object.defineProperty(Element.prototype,"innerHTML",{set:function(){s.apply(this,arguments);j(this)}});Object.defineProperty(CSSStyleDeclaration.prototype,"IeBoxShadow",{set:function(a){this["-ie-box-shadow"]=a;this.spikeElement?k(this.spikeElement,a):j()},get:function(){return this["-ie-box-shadow"]}});
"complete"===i.readyState?j():(i.attachEvent("onreadystatechange",j),l.attachEvent("onload",j))}else 8>r&&(i.createStyleSheet().cssText="*{-spike-redraw:expression(spikeIE7redraw(this));}",l.spikeIE7redraw=function(a){if(a.currentStyle["-ie-box-shadow"]||a.style.IeBoxShadow)a.currentStyle.IeBoxShadow===m?a.runtimeStyle.IeBoxShadow=a.currentStyle["-ie-box-shadow"]:a.style.IeBoxShadow!==m&&(a.runtimeStyle.IeBoxShadow=a.style.IeBoxShadow),k(a)})})(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment