| <!-- Tested Browser [Minimum Version]: Test status | Support status | |
| Chrome/Webkit [?] - yes | yes | |
| Firefox [?] - yes | yes | |
| Safari [?] - yes | yes | |
| Internet Explorer [11] - yes | no | |
| Opera [?] - yes | yes | |
| --> | |
| <body onload="JOOS(); loaded()"> | |
| <div id=ie-poem> | |
| <h2>Sorry [object Window] is blocked <a target="_blank" href="https://codepen.io/Ephellon/debug/yNgKwp">try again here</a>; or you're using Internet Explorer</h2> | |
| <!--[if IE gte 6]> | |
| <style>/* | |
| Here's a poem for IE users | |
| I hate your sorry excuse of software, | |
| It's like a horse with extra tiny legs, | |
| I think it's a mesh of nose hairs, | |
| That found a way to load JPEGs. | |
| How dare it be called a browser, | |
| It takes forever to find itself, | |
| It's slower than Dora the Explorer, | |
| Trying to find the only bookshelf. | |
| If I had a nickle... | |
| Sorry, the page is still loading, | |
| I think it saved a pickle, | |
| Instead of the cookie it was holding. | |
| You probably can't even see this, | |
| Because your console skipped to an "error," | |
| So I'll write it in your <body>, | |
| So you can see it forever. | |
| // Bottom-line: upgrade/switch your browser | |
| // Ephellon Dantzler 2016 | |
| */</style> | |
| <![endif]--> | |
| </div> | |
| <div style="display: none" id="content"> | |
| <h2> JOOS - Just Object Oriented Styling </h2> | |
| <ol> | |
| <li>(JOOS) | |
| <div>Just Object Oriented Styling</div> | |
| <span id=p-juice>Juice<sup>tm</sup></span> | |
| <code>type <sub>P</sub></code> | |
| </li> | |
| <li>[JOOS] | |
| <div>Just Object Oriented Styling</div> | |
| <span id=b-juice>Juice<sup>tm</sup></span> | |
| <code>type <sub>B</sub></code> | |
| </li> | |
| <li>{JOOS} | |
| <div>Just Object Oriented Styling</div> | |
| <span id=c-juice>Juice<sup>tm</sup></span> | |
| <code>type <sub>C</sub></code> | |
| <!-- #c-juice < code sub --> | |
| <!-- returns "html > body > ol > li > code sub" --> | |
| </li> | |
| </ol> | |
| <h3>How To</h3> | |
| <div id='sue'> | |
| $( DOM Object || DOM NodeList ) <br/> | |
| .css(property, "value") <br/> | |
| .and(another-property, "another-value") <br/> | |
| .and("another-property", "another-value") <br/> | |
| .and(/(another|any-other)-property/, "another-value") <br/> | |
| .and([ <br/> | |
| "another-property", <br/> | |
| 'another-er-property' <br/> | |
| another-er-er-property <br/> | |
| ],[ <br/> | |
| "one", <br/> | |
| "-or-more-values" <br/> | |
| ]) <br/> | |
| .and({ <br/> | |
| point_to: property, <br/> | |
| "prop-erty": "value", <br/> | |
| properties: [property-one, property-two, property-three, ...] <br/> | |
| },{ <br/> | |
| point_to: "value", <br/> | |
| properties: "value" <br/> | |
| }); <br/> | |
| </div><br/> | |
| <h3> Pretty Code for above (no, there aren't any typos [editable]) </h3> | |
| <textarea id='loo' cols=128 rows=8 autocomplete=false oninput="eval(this.value)"> | |
| $("#sue") | |
| // or JOOS("#sue") | |
| .css(border, "solid black 5px") | |
| // only if jQuery isn't available, else use "and" or "joos" | |
| // plain text is accepted (except: top_, break_, in_, function_) | |
| .and(/z-?index/g, 15) | |
| // even RegExps are accepted | |
| // /(?:)/g - match dash-case and camelCase | |
| // /(?:)/m - match camelCase only | |
| // /(?:)/ - match dash-case only | |
| .joos([ | |
| // css = and = joos | |
| // indexed arrays are accepted | |
| padding, | |
| margin, | |
| font-size | |
| ],[ | |
| "10px" | |
| ]) | |
| .and({ | |
| // object arrays | |
| background: "#000", | |
| color: "#00aced", | |
| "border-color": "#ff5312", | |
| "font-family": "product sans, arial, sans-serif, monospace" | |
| }) | |
| .and({ | |
| // even multiple object arrays are accepted | |
| bor: border-radius, | |
| // bor now points to the "borderRadius" property | |
| margins: [margin-top, margin-left, margin-bottom, margin-right], | |
| // properties can even be grouped | |
| opacity: 0.8 | |
| // properties can still be changed here | |
| },{ | |
| bor: "15px", | |
| // borderRadius is now 15px | |
| margins: "12px" | |
| // all margins are now 12px | |
| });</textarea> | |
| </div> | |
| <script> | |
| function loaded() { | |
| $("#ie-poem") | |
| .css(display, "none"); | |
| $("#content") | |
| .css(display, "inherit"); | |
| $("body & *") | |
| .joos(font-family, "product-sans, arial, sans, sans-serif") | |
| .css(background-color, '#f00'); | |
| eval(document.querySelector('textarea').value); | |
| $("li@1") | |
| .joos(color, "#000"); | |
| $("li@2") | |
| .joos(color, "#888"); | |
| $("li@3") | |
| .joos(color, "#fff"); | |
| $("sub < ?") | |
| .joos(color, "#08f") | |
| .and({ | |
| border: "solid 1px black", | |
| "border-radius": "15px" | |
| },{}); | |
| $('#loo') | |
| .css(color, '#bc3') | |
| .and(background-color, '#232')/* DO NOT REMOVE */; | |
| } | |
| </script> | |
| </body> |
Have you ever wanted to:
use CSS like properties as JS accessible variables, like "background-color" instead of "backgroundColor"
allow multiple ways of accessing CSS properties, and extend jQuery as a plugin
use a ":parent" selector
Then JOOS (Juice) is for you!
A Pen by Mink CBOS - Ephellon Dantzler on CodePen.
| /* Just Object Oriented Styling | |
| JOOS - Ephellon Dantzler, Sat May 30, 2015 19:30 CDT | |
| - A poem for Internet Explorer users: | |
| I hate your sorry excuse of software, | |
| It's like a horse with extra tiny legs, | |
| I think it's a mesh of nose hairs, | |
| That found a way to load JPEGs. | |
| How dare it be called a browser, | |
| It takes forever to find itself, | |
| It's slower than Dora the Explorer, | |
| Trying to find the only bookshelf. | |
| If I had a nickle... | |
| Sorry, the page is still loading, | |
| I think it saved a pickle, | |
| Instead of the cookie it was holding. | |
| You probably can't even see this, | |
| Because your console skipped to an "error," | |
| So I'll write it in your <body>, | |
| So you can see it forever. | |
| Prefix Free* | |
| ::psuedo-functions not available (::after, ::before); some properties not available | |
| see below for variables | |
| ---- | |
| how I got the values for each variable, 2^n, so that there are no repeats | |
| after about 20min, I remembered there are some reserved names; so pascal case it is | |
| 1 2 4 8 16 32 64 128 256 512 1024 2048 4096 8192 16384 32768 65535 131072 262144 524288 ... | |
| to skip, do: ctrl + f -> type: jump_to_bottom ; (but _ as spaces) | |
| */ | |
| /* JUMP TO TOP - this is where I started, and typed my way down */ | |
| /* How To | |
| // WARNING: Grouped prefixes are not stable, and may cause an infinite loop | |
| // currentlty searching for solutions, but until then, avoid if possible | |
| // Grouped Prefixes | |
| $("#id") | |
| .joos({ | |
| prop: [-webkit-property, -moz-property, -ms-property, -o-property, property], | |
| // grouped prefixes (use "property" instead, prefix free) | |
| // use instead: | |
| prop: property, | |
| // or | |
| property: value | |
| },{ | |
| prop: value | |
| }) | |
| // Global variables/functions | |
| - webkit, moz, ms, o | |
| // whichever isn't undefined is the CSS prefix being used | |
| - Chrome Browser: webkit = 0 ; moz = undefined, ms, o | |
| - Safari Browser: webkit = 0 ; moz = undefined, ms, o | |
| - Firefox Browser: moz = 0 ; webkit = undefined, ms, o | |
| - Internet Explorer: ms = 0 ; webkit = undefined, moz, o | |
| - Opera Browser: o = 0, webkit; moz = undefined, ms | |
| - rgb, rgba, hsl, hsla | |
| // used for colors (simply adds the function name to the arguments) | |
| - rgb(0,0,0) returns "rgb(0,0,0)" | |
| - browser, prefix | |
| // browser returns the browser's name, i.e. "Firefox" | |
| // prefix returns the styling prefix, i.e. "-moz-" | |
| // if jQuery is disabled and $ is free: | |
| $(DOM Object | DOM String) | |
| .css(property, value) | |
| .and(prop-erty, value) | |
| .and("property", value) | |
| .and(/(prefix|prefix-)-?suffix/gm, value) | |
| .and([ | |
| property-one, | |
| property-two, | |
| ... | |
| ],[ | |
| value-one|default-value, | |
| value-two, | |
| ... | |
| ]) | |
| .and({ | |
| p: property, | |
| "prop-erty": value, | |
| props: [property-one, property-two, ...] | |
| },{ | |
| p: value, | |
| props: value | |
| }); | |
| // if jQuery is enabled: | |
| $(DOM Object | DOM String) | |
| .joos(property, value) | |
| ... | |
| */ | |
| // children, pascal case recommended | |
| ["origin", "style", "top"] // [break, etc.] are reserved, so changed to "break_", etc. | |
| .every(function(e){ | |
| return delete e || eval(e + " = undefined"), true | |
| }) | |
| var hsl, hsla, rgb, rgba, moz, ms, o, webkit, prefix, browser; | |
| (function() { // rgb -> "rgb" | |
| function fn(name) { | |
| return function() { | |
| for(var a = 0, args = []; a < arguments.length; a++) | |
| args.push(arguments[a].toString()); | |
| args = (args.length === 1 && args[0][0] === "#")? | |
| args[0].replace(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/, "0x$1,0x$2,0x$3").replace(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/, "0x$1$1,0x$2$2,0x$3$3"): args.join(",").replace(/,(.*?)%/g, ",($1)+'%'"); | |
| return name + '(' + eval("[" + args + "]") + ')' | |
| } | |
| } | |
| hsl = fn("hsl"); | |
| rgb = fn("rgb"); | |
| hsla = fn("hsla"); | |
| rgba = fn("rgba"); | |
| })(); | |
| function JOOS(identifier) { | |
| if(arguments.length > 1) { | |
| for(var x = 0, i = []; x < arguments.length; x++) | |
| i.push(arguments[x]); | |
| identifier = i | |
| } | |
| var __, t, u, EVAL, LIST, unique, handle, _ = identifier; | |
| String.prototype.toCamelCase = function() { // prop-erty -> propErty | |
| var r = this, k; | |
| for(;(k = /\-([a-z])/i).test(r);) | |
| r = r.replace(k, RegExp.$1.toUpperCase()); | |
| return r | |
| }; | |
| String.prototype.toDashCase = function() { // propErty -> prop-erty | |
| return this.replace(/([A-Z])/g, "-$1").toLowerCase() | |
| }; | |
| String.prototype.toRegExp = function() { // to a RegExp | |
| return RegExp(this || "(?:" + this + ")") | |
| }; | |
| Array.prototype.joos = function() { | |
| var j = []; | |
| for(var x = 0; x < this.length; x++) | |
| if(this[x].constructor === NodeList || this[x].constructor === Array) | |
| for(var y = 0; y < this[x].length; y++) | |
| j.push(JOOS(this[x][y]).joos.apply(null, arguments)); | |
| else | |
| j.push(JOOS(this[x]).joos.apply(null, arguments)); | |
| return j | |
| }; | |
| unique = function(id) { | |
| var i = (id.parentElement)? | |
| id.parentElement.querySelectorAll(id.tagName).length > 1 && id.id === ""? | |
| id.parentElement.children: | |
| [id.localName]: | |
| [id.localName]; | |
| if(i.length > 1) | |
| for(var x = 0; x < i.length; x++) | |
| if(i.item(x) === id) | |
| i = x + 1; | |
| for(var x = 0, c = [], d = id; d !== null; x++, d = d.parentElement) { | |
| c.push(d.localName + | |
| (d.src? "[src=\"" + encodeURI(d.src).replace(/"/g, "%35") + "\"]": "") + | |
| (d.href? "[href=\"" + encodeURI(d.href).replace(/"/g, "%35") + "\"]": "") + | |
| (d.id? "#" + d.id: "") + | |
| (d.className? "." + d.className.replace(/\s/g, "."): "")) | |
| } | |
| c[0] = c[0] + (i > -1? ":nth-child(" + i + ")": ""); | |
| return c.reverse().join(" > "); | |
| }; | |
| handle = function(id) { | |
| if(id === undefined) | |
| return ""; | |
| id = id.split(","); | |
| if(id.length > 1) { | |
| for(var x = 0, y = []; x < id.length; x++) | |
| y.push(handle(id[x])); | |
| return y | |
| } else { | |
| id += "" | |
| } | |
| var a, b, c, d, e = [], f = [], g = []; | |
| id = id.replace(/@(\d+)/g, ":nth-child($1)").replace(/\:siblings/g, "<> *").replace(/(^|,)(.+?)&([^,]+?)/g, "$1$2, $2 $3").replace(/>([^,>]*?)</g, ""); | |
| for(var j = /\[(.*?)\]/; j.test(id);) | |
| e.push((id = id.replace(j, "\$\$" + e.length), RegExp.$1)); | |
| for(var j = /\{([^,\{]*?)\}/; j.test(id);) | |
| f.push((id = id.replace(j, "\$" + (f.length + 1)), RegExp.$1)); | |
| for(var j = /\:not\(([^,]*?)\)/; j.test(id);) | |
| g.push((id = id.replace(j, "\\" + g.length), RegExp.$1)); | |
| for(var x = /\$(\d)/; x.test(id);) | |
| id = id.replace(x, f[+RegExp.$1]); | |
| for(var x = /\\(\d+)/, y = /\$(\d)/; x.test(id);) | |
| id = id.replace(x, ":not(" + handle(g[+RegExp.$1].replace(y, f[+RegExp.$1])).replace(/^.*([\:#\.].+?)$/, "$1") + ")"); | |
| for(var x = /\$\$(\d+)/; x.test(id);) | |
| id = id.replace(x, e[+RegExp.$1]); | |
| for(var k = /(^|,)(.+?)(\:parent|\:\?|\s*\<\s*\??)(.*)(,|$)/; k.test(id);) { | |
| a = RegExp.$1, b = RegExp.$2, c = RegExp.$3, d = RegExp.$4 + RegExp.$5; | |
| id = id.replace(k, a + JOOS(document.querySelector(b).parentElement).JOOS_ID) | |
| } | |
| id = id.replace(/\:(not|nth-child)\(\)/g, ""); | |
| id = /\:parent|\:\?|\s*\<\s*\??/.test(d)? handle(id + " " + d): id + (d !== undefined? " " + d: ""); | |
| return id.replace(/\s+$/, "") | |
| }; | |
| LIST = function() { | |
| var n = document.body.style, d = [], e = [0]; | |
| if(browser !== "Safari") { | |
| for(var p in n) | |
| for(var i = 0, f; i < (f = p.toDashCase().split("-")).length; i++) | |
| if(d.indexOf(f[i]) === -1) | |
| if(Boolean(+f[i] + 1) === false) | |
| e.push((d.push(f[i]) - 1) / 2048); | |
| } else {// Webkit [for Safari] | |
| d = "action,adjust,after,align,alignment,all,anchor,animation,app,appearance,attachment,backface,background,baseline,basis,before,bidi,blend,border,bottom,box,break,buffered,caption,cells,change,character,clamp,clear,clip,collapse,color,column,columns,combine,composite,content,count,counter,css,cursor,cx,cy,dasharray,dashoffset,decoration,decorations,delay,delta,direction,display,dominant,drag,duration,effect,emphasis,empty,end,events,family,feature,fill,filter,filters,fit,flex,float,flood,flow,font,function,gap,get,group,grow,height,highlight,horizontal,hyphenate,image,in,increment,indent,index,inside,interpolation,isolation,item,items,iteration,justify,kerning,last,layout,left,length,letter,ligatures,lighting,line,linecap,linejoin,lines,list,locale,logical,margin,marker,mask,max,mid,min,miterlimit,mix,mode,modify,motion,name,object,offset,opacity,order,ordering,ordinal,orient,orientation,origin,orphans,outline,outset,outside,overflow,pack,padding,page,paint,parent,path,perspective,play,pointer,position,print,priority,property,quotes,r,radius,range,reflect,region,remove,rendering,repeat,reset,resize,right,rotation,rtl,ruby,rule,rx,ry,security,select,self,set,settings,shadow,shape,shift,shrink,side,size,sizing,slice,smoothing,source,space,spacing,span,speak,src,start,state,stop,stretch,stroke,style,tab,table,tap,text,threshold,timing,top,touch,transform,transition,type,unicode,upright,user,value,variant,vector,vertical,visibility,webkit,weight,white,widows,width,will,word,wrap,writing,x,y,z,zoom".split(","); | |
| for(var x = 0; x < d.length; x++) | |
| e.push(Math.pow(2, x)); | |
| } | |
| d = d.toString() | |
| .replace(/(^|,)(webkit|moz|ms|o)(,|$)/, "$1-$2-$3") | |
| // break in origin style top function | |
| .replace(JOOS.underline? /,([a-z]),/g: /,(break|in|top|function),/g, ",$1_,") | |
| .split(",") | |
| .sort() | |
| d[0] = d[0].replace(/-/g, "") | |
| d.push(e) | |
| return d | |
| }; | |
| EVAL = function() { | |
| /* | |
| make sure the variable in use was modified by JOOS | |
| */ | |
| function ismod(m) { | |
| return (m !== undefined && m !== null && typeof m === "number" && m % 2 === 0) | |
| } | |
| function br() { | |
| // return the browser's name | |
| var v = navigator.vendor; | |
| if(/Google/.test(v)) | |
| return (navigator.wowMetrics !== undefined)? | |
| "UC Browser": | |
| (typeof opr === "object" && opr !== null && opr !== undefined)? | |
| "Opera": | |
| "Chrome"; | |
| else if(/Mozilla/.test(v)) | |
| return "Firefox"; | |
| else if(/Apple/.test(v)) | |
| return "Safari"; | |
| else if(/Microsoft|Windows/.test(v)) | |
| return "Internet Explorer"; | |
| else if(/Opera/.test(v)) | |
| return "Opera"; | |
| } | |
| if(ismod(webkit)) | |
| webkit = 0, prefix = "-webkit-"; | |
| else if(ismod(moz)) | |
| moz = 0, prefix = "-moz-"; | |
| else if(ismod(ms)) | |
| ms = 0, prefix = "-ms-"; | |
| else if(ismod(o)) | |
| o = 0, prefix = "-o-"; | |
| browser = br(); | |
| var l = LIST(), k = l.pop(), f, g; | |
| var window = (window === undefined)? top || frames: window; // Firefox fix | |
| for(var i = 0; i < l.length; i++) | |
| eval("var " + l[i] + " = window['" + l[i] + "'] = " + k[i]); | |
| JOOS.ran = true; | |
| return l | |
| }; | |
| if(browser === "Safari") | |
| JOOS.EVAL = EVAL; | |
| if(JOOS.ran === undefined) | |
| EVAL(); | |
| if(_ === undefined || _ === null) | |
| return; | |
| if(typeof _ === typeof -1) | |
| return JOOS(document.querySelectorAll("*")[_]); | |
| if(typeof _ === typeof "") | |
| return JOOS(document.querySelectorAll(handle(_))); | |
| if((_.constructor === Array || _.constructor === NodeList) && _.length > 1) { | |
| for(var x = 0, s = []; x < _.length; x++) | |
| s.push((_[x] = JOOS(_[x])).JOOS_ID); | |
| return NodeList.prototype.and = Array.prototype.and = NodeList.prototype.css = Array.prototype.css = NodeList.prototype.joos = Array.prototype.joos, _.JOOS_ID = s.join(", "), _ | |
| } | |
| __ = _.length === 1? _[0]: _; | |
| t = __.style || __.getAttribute('style'); | |
| __.joos = | |
| function(e, k) { | |
| if((e + '') === "NaN") | |
| return _; | |
| if(typeof e === typeof -1 || typeof e === '') { | |
| e = ('' + e).toLowerCase(); | |
| var n = t; | |
| var l = (typeof k !== "undefined" && k !== null? k: n); | |
| // undefined globals | |
| var hyphens, snap, coordinate, destination, points; // Chrome | |
| var alignment, x, y, shift, buffered, cx, cy, wrap, zoom, motion, rotation; // Firefox | |
| switch (+e || eval(e.toDashCase())) { | |
| case align-content: | |
| n.alignContent = l | |
| break; | |
| case align-items: | |
| n.alignItems = l | |
| break; | |
| case align-self: | |
| n.alignSelf = l | |
| break; | |
| case alignment-baseline: | |
| n.alignmentBaseline = l | |
| break; | |
| case all: | |
| n.all = l | |
| break; | |
| case animation: | |
| n.webkitAnimation = | |
| n.animation = l | |
| break; | |
| case animation-delay: | |
| n.webkitAnimationDelay = | |
| n.animationDelay = l | |
| break; | |
| case animation-direction: | |
| n.webkitAnimationDirection = | |
| n.animationDirection = l | |
| break; | |
| case animation-duration: | |
| n.webkitAnimationDuration = | |
| n.animationDuration = l | |
| break; | |
| case animation-fill-mode: | |
| n.webkitAnimationFillMode = | |
| n.animationFillMode = l | |
| break; | |
| case animation-iteration-count: | |
| n.webkitAnimationIterationCount = | |
| n.animationIterationCount = l | |
| break; | |
| case animation-name: | |
| n.webkitAnimationName = | |
| n.animationName = l | |
| break; | |
| case animation-play-state: | |
| n.webkitAnimationPlayState = | |
| n.animationPlayState = l | |
| break; | |
| case animation-timing-function_: | |
| n.webkitAnimationTimingFunction = | |
| n.animationTimingFunction = l | |
| break; | |
| case backface-visibility: | |
| n.webkitBackfaceVisibility = | |
| n.backfaceVisibility = l | |
| break; | |
| case background: | |
| n.background = l | |
| break; | |
| case background-attachment: | |
| n.backgroundAttachment = l | |
| break; | |
| case background-blend-mode: | |
| n.backgroundBlendMode = l | |
| break; | |
| case background-clip: | |
| n.backgroundClip = l | |
| break; | |
| case background-color: | |
| n.backgroundColor = l | |
| break; | |
| case background-image: | |
| n.backgroundImage = l | |
| break; | |
| case background-origin: | |
| n.backgroundOrigin = l | |
| break; | |
| case background-position: | |
| n.backgroundPosition = l | |
| break; | |
| case background-position-x: | |
| n.backgroundPositionX = l | |
| break; | |
| case background-position-y: | |
| n.backgroundPositionY = l | |
| break; | |
| case background-repeat: | |
| n.backgroundRepeat = l | |
| break; | |
| case background-repeat-x: | |
| n.backgroundRepeatX = l | |
| break; | |
| case background-repeat-y: | |
| n.backgroundRepeatY = l | |
| break; | |
| case background-size: | |
| n.backgroundSize = l | |
| break; | |
| case baseline-shift: | |
| n.baselineShift = l | |
| break; | |
| case border: | |
| n.border = l | |
| break; | |
| case border-bottom: | |
| n.borderBottom = l | |
| break; | |
| case border-bottom-color: | |
| n.borderBottomColor = l | |
| break; | |
| case border-bottom-left-radius: | |
| n.borderBottomLeftRadius = l | |
| break; | |
| case border-bottom-right-radius: | |
| n.borderBottomRightRadius = l | |
| break; | |
| case border-bottom-style: | |
| n.borderBottomStyle = l | |
| break; | |
| case border-bottom-width: | |
| n.borderBottomWidth = l | |
| break; | |
| case border-collapse: | |
| n.borderCollapse = l | |
| break; | |
| case border-color: | |
| n.borderColor = l | |
| break; | |
| case border-image: | |
| n.webkitImage = | |
| n.oBorderImage = | |
| n.borderImage = l | |
| break; | |
| case border-image-outset: | |
| n.webkitImageOutset = | |
| n.oBorderImageOutset = | |
| n.borderImageOutset = l | |
| break; | |
| case border-image-repeat: | |
| n.webkitImageRepeat = | |
| n.oBorderImageRepeat = | |
| n.borderImageRepeat = l | |
| break; | |
| case border-image-slice: | |
| n.webkitImageSlice = | |
| n.oBorderImageSlice = | |
| n.borderImageSlice = l | |
| break; | |
| case border-image-source: | |
| n.webkitImageSource = | |
| n.oBorderImageSource = | |
| n.borderImageSource = l | |
| break; | |
| case border-image-width: | |
| n.webkitImageWidth = | |
| n.oBorderImageWidth = | |
| n.borderImageWidth = l | |
| break; | |
| case border-left: | |
| n.borderLeft = l | |
| break; | |
| case border-left-color: | |
| n.borderLeftColor = l | |
| break; | |
| case border-left-style: | |
| n.borderLeftStyle = l | |
| break; | |
| case border-left-width: | |
| n.borderLeftWidth = l | |
| break; | |
| case border-radius: | |
| n.borderRadius = l | |
| break; | |
| case border-right: | |
| n.borderRight = l | |
| break; | |
| case border-right-color: | |
| n.borderRightColor = l | |
| break; | |
| case border-right-style: | |
| n.borderRightStyle = l | |
| break; | |
| case border-right-width: | |
| n.borderRightWidth = l | |
| break; | |
| case border-spacing: | |
| n.borderSpacing = l | |
| break; | |
| case border-style: | |
| n.borderStyle = l | |
| break; | |
| case border-top_: | |
| n.borderTop = l | |
| break; | |
| case border-top_-color: | |
| n.borderTopColor = l | |
| break; | |
| case border-top_-left-radius: | |
| n.borderTopLeftRadius = l | |
| break; | |
| case border-top_-right-radius: | |
| n.borderTopRightRadius = l | |
| break; | |
| case border-top_-style: | |
| n.borderTopStyle = l | |
| break; | |
| case border-top_-width: | |
| n.borderTopWidth = l | |
| break; | |
| case border-width: | |
| n.borderWidth = l | |
| break; | |
| case bottom: | |
| n.bottom = l | |
| break; | |
| case box-shadow: | |
| n.boxShadow = l | |
| break; | |
| case box-sizing: | |
| n.boxSizing = l | |
| break; | |
| case buffered-rendering: | |
| n.bufferedRendering = l | |
| break; | |
| case caption-side: | |
| n.captionSide = l | |
| break; | |
| case clear: | |
| n.clear = l | |
| break; | |
| case clip: | |
| n.clip = l | |
| break; | |
| case clip-path: | |
| n.clipPath = l | |
| break; | |
| case clip-rule: | |
| n.clipRule = l | |
| break; | |
| case color: | |
| n.color = l | |
| break; | |
| case color-interpolation: | |
| n.colorInterpolation = l | |
| break; | |
| case color-interpolation-filters: | |
| n.colorInterpolationFilters = l | |
| break; | |
| case color-rendering: | |
| n.colorRendering = l | |
| break; | |
| case content: | |
| n.content = l | |
| break; | |
| case counter-increment: | |
| n.counterIncrement = l | |
| break; | |
| case counter-reset: | |
| n.counterReset = l | |
| break; | |
| case cursor: | |
| n.webkitCursor = | |
| n.cursor = l | |
| break; | |
| case cx: | |
| n.cx = l | |
| break; | |
| case cy: | |
| n.cy = l | |
| break; | |
| case direction: | |
| n.direction = l | |
| break; | |
| case display: | |
| n.display = l | |
| break; | |
| case dominant-baseline: | |
| n.dominantBaseline = l | |
| break; | |
| case empty-cells: | |
| n.emptyCells = l | |
| break; | |
| case fill: | |
| n.fill = l | |
| break; | |
| case fill-opacity: | |
| n.fillOpacity = l | |
| break; | |
| case fill-rule: | |
| n.fillRule = l | |
| break; | |
| case filter: | |
| n.filter = l | |
| break; | |
| case flex: | |
| n.flex = l | |
| break; | |
| case flex-basis: | |
| n.flexBasis = l | |
| break; | |
| case flex-direction: | |
| n.flexDirection = l | |
| break; | |
| case flex-flow: | |
| n.flexFlow = l | |
| break; | |
| case flex-grow: | |
| n.flexGrow = l | |
| break; | |
| case flex-shrink: | |
| n.flexShrink = l | |
| break; | |
| case flex-wrap: | |
| n.flexWrap = l | |
| break; | |
| case float: | |
| n.float = l | |
| break; | |
| case flood-color: | |
| n.floodColor = l | |
| break; | |
| case flood-opacity: | |
| n.floodOpacity = l | |
| break; | |
| case font: | |
| n.font = l | |
| break; | |
| case font-family: | |
| n.fontFamily = l | |
| break; | |
| case font-feature-settings: | |
| n.fontFeatureSettings = l | |
| break; | |
| case font-kerning: | |
| n.webkitFontKerning = | |
| n.fontKerning = l | |
| break; | |
| case font-size: | |
| n.fontSize = l | |
| break; | |
| case font-stretch: | |
| n.fontStretch = l | |
| break; | |
| case font-style: | |
| n.fontStyle = l | |
| break; | |
| case font-variant: | |
| n.fontVariant = l | |
| break; | |
| case font-variant-ligatures: | |
| n.fontVariantLigatures = l | |
| break; | |
| case font-weight: | |
| n.fontWeight = l | |
| break; | |
| case height: | |
| n.height = l | |
| break; | |
| case image-rendering: | |
| n.imageRendering = l | |
| break; | |
| case isolation: | |
| n.isolation = l | |
| break; | |
| case justify-content: | |
| n.justifyContent = l | |
| break; | |
| case left: | |
| n.left = l | |
| break; | |
| case letter-spacing: | |
| n.letterSpacing = l | |
| break; | |
| case lighting-color: | |
| n.lightingColor = l | |
| break; | |
| case line-height: | |
| n.lineHeight = l | |
| break; | |
| case list-style: | |
| n.listStyle = l | |
| break; | |
| case list-style-image: | |
| n.listStyleImage = l | |
| break; | |
| case list-style-position: | |
| n.listStylePosition = l | |
| break; | |
| case list-style-type: | |
| n.listStyleType = l | |
| break; | |
| case margin: | |
| n.margin = l | |
| break; | |
| case margin-bottom: | |
| n.marginBottom = l | |
| break; | |
| case margin-left: | |
| n.marginLeft = l | |
| break; | |
| case margin-right: | |
| n.marginRight = l | |
| break; | |
| case margin-top_: | |
| n.marginTop = l | |
| break; | |
| case marker: | |
| n.marker = l | |
| break; | |
| case marker-end: | |
| n.markerEnd = l | |
| break; | |
| case marker-mid: | |
| n.markerMid = l | |
| break; | |
| case marker-start: | |
| n.markerStart = l | |
| break; | |
| case mask: | |
| n.webkitMask = | |
| n.mask = l | |
| break; | |
| case mask-type: | |
| n.webkitMaskType = | |
| n.maskType = l | |
| break; | |
| case max-height: | |
| n.maxHeight = l | |
| break; | |
| case max-width: | |
| n.maxWidth = l | |
| break; | |
| case max-zoom: | |
| n.maxZoom = l | |
| break; | |
| case min-height: | |
| n.minHeight = l | |
| break; | |
| case min-width: | |
| n.minWidth = l | |
| break; | |
| case min-zoom: | |
| n.minZoom = l | |
| break; | |
| case mix-blend-mode: | |
| n.mixBlendMode = l | |
| break; | |
| case motion: | |
| n.motion = l | |
| break; | |
| case motion-offset: | |
| n.motionOffset = l | |
| break; | |
| case motion-path: | |
| n.motionPath = l | |
| break; | |
| case motion-rotation: | |
| n.motionRotation = l | |
| break; | |
| case object-fit: | |
| n.oObjectFit = | |
| n.objectFit = l | |
| break; | |
| case object-position: | |
| n.oObjectPosition = | |
| n.objectPosition = l | |
| break; | |
| case opacity: | |
| n.opacity = l | |
| break; | |
| case order: | |
| n.order = l | |
| break; | |
| case orientation: | |
| n.orientation = l | |
| break; | |
| case orphans: | |
| n.orphans = l | |
| break; | |
| case outline: | |
| n.outline = l | |
| break; | |
| case outline-color: | |
| n.outlineColor = l | |
| break; | |
| case outline-offset: | |
| n.outlineOffset = l | |
| break; | |
| case outline-style: | |
| n.outlineStyle = l | |
| break; | |
| case outline-width: | |
| n.outlineWidth = l | |
| break; | |
| case overflow: | |
| n.overflow = l | |
| break; | |
| case overflow-wrap: | |
| n.overflowWrap = l | |
| break; | |
| case overflow-x: | |
| n.overflowX = l | |
| break; | |
| case overflow-y: | |
| n.overflowY = l | |
| break; | |
| case padding: | |
| n.padding = l | |
| break; | |
| case padding-bottom: | |
| n.paddingBottom = l | |
| break; | |
| case padding-left: | |
| n.paddingLeft = l | |
| break; | |
| case padding-right: | |
| n.paddingRight = l | |
| break; | |
| case padding-top_: | |
| n.paddingTop = l | |
| break; | |
| case page: | |
| n.page = l | |
| break; | |
| case page-break_-after: | |
| n.pageBreakAfter = l | |
| break; | |
| case page-break_-before: | |
| n.pageBreakBefore = l | |
| break; | |
| case page-break_-inside: | |
| n.pageBreakInside = l | |
| break; | |
| case paint-order: | |
| n.paintOrder = l | |
| break; | |
| case perspective: | |
| n.webkitPerspective = | |
| n.perspective = l | |
| break; | |
| case perspective-origin: | |
| n.perspectiveOrigin = l | |
| break; | |
| case pointer-events: | |
| n.pointerEvents = l | |
| break; | |
| case position: | |
| n.position = l | |
| break; | |
| case quotes: | |
| n.quotes = l | |
| break; | |
| case r: | |
| n.r = l | |
| break; | |
| case resize: | |
| n.resize = l | |
| break; | |
| case right: | |
| n.right = l | |
| break; | |
| case rx: | |
| n.rx = l | |
| break; | |
| case ry: | |
| n.ry = l | |
| break; | |
| case shape-image-threshold: | |
| n.webkitShapeImageThreshold = | |
| n.shapeImageThreshold = l | |
| break; | |
| case shape-margin: | |
| n.webkitShapeMargin = | |
| n.shapeMargin = l | |
| break; | |
| case shape-outside: | |
| n.webkitShapeOutside = | |
| n.shapeOutside = l | |
| break; | |
| case shape-rendering: | |
| n.webkitShapeRendering = | |
| n.shapeRendering = l | |
| break; | |
| case size: | |
| n.size = l | |
| break; | |
| case speak: | |
| n.speak = l | |
| break; | |
| case src: | |
| n.src = l | |
| break; | |
| case stop-color: | |
| n.stopColor = l | |
| break; | |
| case stop-opacity: | |
| n.stopOpacity = l | |
| break; | |
| case stroke: | |
| n.stroke = l | |
| break; | |
| case stroke-dasharray: | |
| n.strokeDasharray = l | |
| break; | |
| case stroke-dashoffset: | |
| n.strokeDashoffset = l | |
| break; | |
| case stroke-linecap: | |
| n.strokeLinecap = l | |
| break; | |
| case stroke-linejoin: | |
| n.strokeLinejoin = l | |
| break; | |
| case stroke-miterlimit: | |
| n.strokeMiterlimit = l | |
| break; | |
| case stroke-opacity: | |
| n.strokeOpacity = l | |
| break; | |
| case stroke-width: | |
| n.strokeWidth = l | |
| break; | |
| case tab-size: | |
| n.mozTabSize = | |
| n.tabSize = l | |
| break; | |
| case table-layout: | |
| n.tableLayout = l | |
| break; | |
| case text-align: | |
| n.textAlign = l | |
| break; | |
| case text-align-last: | |
| n.mozTextAlignLast = | |
| n.textAlignLast = l | |
| break; | |
| case text-anchor: | |
| n.textAnchor = l | |
| break; | |
| case text-combine-upright: | |
| n.textCombineUpright = l | |
| break; | |
| case text-decoration: | |
| n.webkitTextDecoaration = | |
| n.textDecoration = l | |
| break; | |
| case text-indent: | |
| n.textIndent = l | |
| break; | |
| case text-orientation: | |
| n.textOrientation = l | |
| break; | |
| case text-overflow: | |
| n.textOverflow = l | |
| break; | |
| case text-rendering: | |
| n.textRendering = l | |
| break; | |
| case text-shadow: | |
| n.textShadow = l | |
| break; | |
| case text-transform: | |
| n.textTransform = l | |
| break; | |
| case top: | |
| n.top = l | |
| break; | |
| case touch-action: | |
| n.touchAction = l | |
| break; | |
| case transform: | |
| n.transform = l | |
| break; | |
| case transform-origin: | |
| n.webkitTransformOrigin = | |
| n.transformOrigin = l | |
| break; | |
| case transform-style: | |
| n.transformStyle = l | |
| break; | |
| case transition: | |
| n.transition = l | |
| break; | |
| case transition-delay: | |
| n.transitionDelay = l | |
| break; | |
| case transition-duration: | |
| n.transitionDuration = l | |
| break; | |
| case transition-property: | |
| n.transitionProperty = l | |
| break; | |
| case transition-timing-function_: | |
| n.transitionTimingFunction = l | |
| break; | |
| case unicode-bidi: | |
| n.unicodeBidi = l | |
| break; | |
| case unicode-range: | |
| n.unicodeRange = l | |
| break; | |
| case user-zoom: | |
| n.userZoom = l | |
| break; | |
| case vector-effect: | |
| n.vectorEffect = l | |
| break; | |
| case vertical-align: | |
| n.verticalAlign = l | |
| break; | |
| case visibility: | |
| n.visibility = l | |
| break; | |
| case app-region: | |
| n.webkitAppRegion = | |
| n.msAppRegion = | |
| n.appRegion = l | |
| break; | |
| case appearance: | |
| n.webkitAppearance = | |
| n.mozAppearance = | |
| n.appearance = l | |
| break; | |
| case background-clip: | |
| n.webkitBackgroundClip = | |
| n.mozBackgroundClip = | |
| n.msBackgroundClip = | |
| n.backgroundClip = l | |
| break; | |
| case background-composite: | |
| n.webkitBackgroundComposite = | |
| n.mozBackgroundComposite = | |
| n.msBackgroundComposite = | |
| n.backgroundComposite = l | |
| break; | |
| case background-origin: | |
| n.webkitBackgroundOrigin = | |
| n.mozBackgroundOrigin = | |
| n.msBackgroundOrigin = | |
| n.backgroundOrigin = l | |
| break; | |
| case border-after: | |
| n.webkitBorderAfter = | |
| n.mozBorderAfter = | |
| n.msBorderAfter = | |
| n.borderAfter = l | |
| break; | |
| case border-after-color: | |
| n.webkitBorderAfterColor = | |
| n.mozBorderAfterColor = | |
| n.msBorderAfterColor = | |
| n.borderAfterColor = l | |
| break; | |
| case border-after-style: | |
| n.webkitBorderAfterStyle = | |
| n.mozBorderAfterStyle = | |
| n.msBorderAfterStyle = | |
| n.borderAfterStyle = l | |
| break; | |
| case border-after-width: | |
| n.webkitBorderAfterWidth = | |
| n.mozBorderAfterWidth = | |
| n.msBorderAfterWidth = | |
| n.borderAfterWidth = l | |
| break; | |
| case border-before: | |
| n.webkitBorderBefore = | |
| n.mozBorderBefore = | |
| n.msBorderBefore = | |
| n.borderBefore = l | |
| break; | |
| case border-before-color: | |
| n.webkitBorderBeforeColor = | |
| n.mozBorderBeforeColor = | |
| n.msBorderBeforeColor = | |
| n.borderBeforeColor = l | |
| break; | |
| case border-before-style: | |
| n.webkitBorderBeforeStyle = | |
| n.mozBorderBeforeStyle = | |
| n.msBorderBeforeStyle = | |
| n.borderBeforeStyle = l | |
| break; | |
| case border-before-width: | |
| n.webkitBorderBeforeWidth = | |
| n.mozBorderBeforeWidth = | |
| n.msBorderBeforeWidth = | |
| n.borderBeforeWidth = l | |
| break; | |
| case border-end: | |
| n.webkitBorderEnd = | |
| n.mozBorderEnd = | |
| n.msBorderEnd = | |
| n.borderEnd = l | |
| break; | |
| case border-end-color: | |
| n.webkitBorderEndColor = | |
| n.mozBorderEndColor = | |
| n.msBorderEndColor = | |
| n.borderEndColor = l | |
| break; | |
| case border-end-style: | |
| n.webkitBorderEndStyle = | |
| n.mozBorderEndStyle = | |
| n.msBorderEndStyle = | |
| n.borderEndStyle = l | |
| break; | |
| case border-end-width: | |
| n.webkitBorderEndWidth = | |
| n.mozBorderEndWidth = | |
| n.msBorderEndWidth = | |
| n.borderEndWidth = l | |
| break; | |
| case border-horizontal-spacing: | |
| n.webkitBorderHorizontalSpacing = | |
| n.mozBorderHorizontalSpacing = | |
| n.msBorderHorizontalSpacing = | |
| n.borderHorizontalSpacing = l | |
| break; | |
| case border-image: | |
| n.webkitBorderImage = | |
| n.mozBorderImage = | |
| n.msBorderImage = | |
| n.borderImage = l | |
| break; | |
| case border-start: | |
| n.webkitBorderStart = | |
| n.mozBorderStart = | |
| n.msBorderStart = | |
| n.borderStart = l | |
| break; | |
| case border-start-color: | |
| n.webkitBorderStartColor = | |
| n.mozBorderStartColor = | |
| n.msBorderStartColor = | |
| n.borderStartColor = l | |
| break; | |
| case border-start-style: | |
| n.webkitBorderStartStyle = | |
| n.mozBorderStartStyle = | |
| n.msBorderStartStyle = | |
| n.borderStartStyle = l | |
| break; | |
| case border-start-width: | |
| n.webkitBorderStartWidth = | |
| n.mozBorderStartWidth = | |
| n.msBorderStartWidth = | |
| n.borderStartWidth = l | |
| break; | |
| case border-vertical-spacing: | |
| n.webkitBorderVerticalSpacing = | |
| n.mozBorderVerticalSpacing = | |
| n.msBorderVerticalSpacing = | |
| n.borderVerticalSpacing = l | |
| break; | |
| case box-align: | |
| n.webkitBoxAlign = | |
| n.mozBoxAlign = | |
| n.msBoxAlign = | |
| n.boxAlign = l | |
| break; | |
| case box-decoration-break_: | |
| n.webkitBoxDecorationBreak = | |
| n.boxDecorationBreak = l | |
| break; | |
| case box-direction: | |
| n.webkitBoxDirection = | |
| n.mozBoxDirection = | |
| n.msBoxDirection = | |
| n.boxDirection = l | |
| break; | |
| case box-flex: | |
| n.webkitBoxFlex = | |
| n.mozBoxFlex = | |
| n.msBoxFlex = | |
| n.boxFlex = l | |
| break; | |
| case box-flex-group: | |
| n.webkitBoxFlexGroup = | |
| n.mozBoxFlexGroup = | |
| n.msBoxFlexGroup = | |
| n.boxFlexGroup = l | |
| break; | |
| case box-lines: | |
| n.webkitBoxLines = | |
| n.mozBoxLines = | |
| n.msBoxLines = | |
| n.boxLines = l | |
| break; | |
| case box-ordinal-group: | |
| n.webkitBoxOrdinalGroup = | |
| n.mozBoxOrdinalGroup = | |
| n.msBoxOrdinalGroup = | |
| n.boxOrdinalGroup = l | |
| break; | |
| case box-orient: | |
| n.webkitBoxOrient = | |
| n.mozBoxOrient = | |
| n.msBoxOrient = | |
| n.boxOrient = l | |
| break; | |
| case box-pack: | |
| n.webkitBoxPack = | |
| n.mozBoxPack = | |
| n.msBoxPack = | |
| n.boxPack = l | |
| break; | |
| case box-reflect: | |
| n.webkitBoxReflect = | |
| n.mozBoxReflect = | |
| n.msBoxReflect = | |
| n.boxReflect = l | |
| break; | |
| case clip-path: | |
| n.webkitClipPath = | |
| n.clipPath = l | |
| break; | |
| case column-break_-after: | |
| n.webkitColumnBreakAfter = | |
| n.mozColumnBreakAfter = | |
| n.columnBreakAfter = l | |
| break; | |
| case column-break_-before: | |
| n.webkitColumnBreakBefore = | |
| n.mozColumnBreakBefore = | |
| n.columnBreakBefore = l | |
| break; | |
| case column-break_-inside: | |
| n.webkitColumnBreakInside = | |
| n.mozColumnBreakInside = | |
| n.columnBreakInside = l | |
| break; | |
| case column-count: | |
| n.webkitColumnCount = | |
| n.mozColumnCount = | |
| n.msColumnCount = | |
| n.columnCount = l | |
| break; | |
| case column-gap: | |
| n.webkitColumnGap = | |
| n.mozColumnGap = | |
| n.msColumnGap = | |
| n.columnGap = l | |
| break; | |
| case column-rule: | |
| n.webkitColumnRule = | |
| n.mozColumnRule = | |
| n.msColumnRule = | |
| n.columnRule = l | |
| break; | |
| case column-rule-color: | |
| n.webkitColumnRuleColor = | |
| n.mozColumnRuleColor = | |
| n.msColumnRuleColor = | |
| n.columnRuleColor = l | |
| break; | |
| case column-rule-style: | |
| n.webkitColumnRuleStyle = | |
| n.mozColumnRuleStyle = | |
| n.msColumnRuleStyle = | |
| n.columnRuleStyle = l | |
| break; | |
| case column-rule-width: | |
| n.webkitColumnRuleWidth = | |
| n.mozColumnRuleWidth = | |
| n.msColumnRuleWidth = | |
| n.columnRuleWidth = l | |
| break; | |
| case column-span: | |
| n.webkitColumnSpan = | |
| n.mozColumnSpan = | |
| n.msColumnSpan = | |
| n.columnSpan = l | |
| break; | |
| case column-width: | |
| n.webkitColumnWidth = | |
| n.mozColumnWidth = | |
| n.msColumnWidth = | |
| n.columnWidth = l | |
| break; | |
| case columns: | |
| n.webkitColumns = | |
| n.mozColumns = | |
| n.msColumns = | |
| n.columns = l | |
| break; | |
| case filter: | |
| n.webkitFilter = | |
| n.filter = l | |
| break; | |
| case font-size-delta: | |
| n.webkitFontSizeDelta = | |
| n.mozFontSizeDelta = | |
| n.msFontSizeDelta = | |
| n.fontSizeDelta = l | |
| break; | |
| case font-smoothing: | |
| n.webkitFontSmoothing = | |
| n.mozFontSmoothing = | |
| n.msFontSmoothing = | |
| n.fontSmoothing = l | |
| break; | |
| case highlight: | |
| n.webkitHighlight = | |
| n.mozHighlight = | |
| n.msHighlight = | |
| n.highlight = l | |
| break; | |
| case hyphenate-character: | |
| n.webkitHyphenateCharacter = | |
| n.mozHyphenateCharacter = | |
| n.msHyphenateCharacter = | |
| n.hyphenateCharacter = l | |
| break; | |
| case hyphens: | |
| n.webkitHyphens = | |
| n.msHyphens = | |
| n.hyphens = l | |
| break; | |
| case line-break_: | |
| n.webkitLineBreak = | |
| n.mozLineBreak = | |
| n.msLineBreak = | |
| n.lineBreak = l | |
| break; | |
| case line-clamp: | |
| n.webkitLineClamp = | |
| n.mozLineClamp = | |
| n.msLineClamp = | |
| n.lineClamp = l | |
| break; | |
| case locale: | |
| n.webkitLocale = | |
| n.mozLocale = | |
| n.msLocale = | |
| n.locale = l | |
| break; | |
| case logical-height: | |
| n.webkitLogicalHeight = | |
| n.mozLogicalHeight = | |
| n.msLogicalHeight = | |
| n.logicalHeight = l | |
| break; | |
| case logical-width: | |
| n.webkitLogicalWidth = | |
| n.mozLogicalWidth = | |
| n.msLogicalWidth = | |
| n.logicalWidth = l | |
| break; | |
| case margin-after: | |
| n.webkitMarginAfter = | |
| n.mozMarginAfter = | |
| n.msMarginAfter = | |
| n.marginAfter = l | |
| break; | |
| case margin-after-collapse: | |
| n.webkitMarginAfterCollapse = | |
| n.mozMarginAfterCollapse = | |
| n.msMarginAfterCollapse = | |
| n.marginAfterCollapse = l | |
| break; | |
| case margin-before: | |
| n.webkitMarginBefore = | |
| n.mozMarginBefore = | |
| n.msMarginBefore = | |
| n.marginBefore = l | |
| break; | |
| case margin-before-collapse: | |
| n.webkitMarginBeforeCollapse = | |
| n.mozMarginBeforeCollapse = | |
| n.msMarginBeforeCollapse = | |
| n.marginBeforeCollapse = l | |
| break; | |
| case margin-bottom-collapse: | |
| n.webkitMarginBottomCollapse = | |
| n.mozMarginBottomCollapse = | |
| n.msMarginBottomCollapse = | |
| n.marginBottomCollapse = l | |
| break; | |
| case margin-collapse: | |
| n.webkitMarginCollapse = | |
| n.mozMarginCollapse = | |
| n.msMarginCollapse = | |
| n.marginCollapse = l | |
| break; | |
| case margin-end: | |
| n.webkitMarginEnd = | |
| n.mozMarginEnd = | |
| n.msMarginEnd = | |
| n.marginEnd = l | |
| break; | |
| case margin-start: | |
| n.webkitMarginStart = | |
| n.mozMarginStart = | |
| n.msMarginStart = | |
| n.marginStart = l | |
| break; | |
| case margin-top_-collapse: | |
| n.webkitMarginTopCollapse = | |
| n.mozMarginTopCollapse = | |
| n.msMarginTopCollapse = | |
| n.marginTopCollapse = l | |
| break; | |
| case mask: | |
| n.webkitMask = | |
| n.mozMask = | |
| n.msMask = | |
| n.mask = l | |
| break; | |
| case mask-box-image: | |
| n.webkitMaskBoxImage = | |
| n.mozMaskBoxImage = | |
| n.msMaskBoxImage = | |
| n.maskBoxImage = l | |
| break; | |
| case mask-box-image-outset: | |
| n.webkitMaskBoxImageOutset = | |
| n.mozMaskBoxImageOutset = | |
| n.msMaskBoxImageOutset = | |
| n.maskBoxImageOutset = l | |
| break; | |
| case mask-box-image-repeat: | |
| n.webkitMaskBoxImageRepeat = | |
| n.mozMaskBoxImageRepeat = | |
| n.msMaskBoxImageRepeat = | |
| n.maskBoxImageRepeat = l | |
| break; | |
| case mask-box-image-slice: | |
| n.webkitMaskBoxImageSlice = | |
| n.mozMaskBoxImageSlice = | |
| n.msMaskBoxImageSlice = | |
| n.maskBoxImageSlice = l | |
| break; | |
| case mask-box-image-source: | |
| n.webkitMaskBoxImageSource = | |
| n.mozMaskBoxImageSource = | |
| n.msMaskBoxImageSource = | |
| n.maskBoxImageSource = l | |
| break; | |
| case mask-box-image-width: | |
| n.webkitMaskBoxImageWidth = | |
| n.mozMaskBoxImageWidth = | |
| n.msMaskBoxImageWidth = | |
| n.maskBoxImageWidth = l | |
| break; | |
| case mask-clip: | |
| n.webkitMaskClip = | |
| n.mozMaskClip = | |
| n.msMaskClip = | |
| n.maskClip = l | |
| break; | |
| case mask-composite: | |
| n.webkitMaskComposite = | |
| n.mozMaskComposite = | |
| n.msMaskComposite = | |
| n.maskComposite = l | |
| break; | |
| case mask-image: | |
| n.webkitMaskImage = | |
| n.mozMaskImage = | |
| n.msMaskImage = | |
| n.maskImage = l | |
| break; | |
| case mask-origin: | |
| n.webkitMaskOrigin = | |
| n.mozMaskOrigin = | |
| n.msMaskOrigin = | |
| n.maskOrigin = l | |
| break; | |
| case mask-position: | |
| n.webkitMaskPosition = | |
| n.mozMaskPosition = | |
| n.msMaskPosition = | |
| n.maskPosition = l | |
| break; | |
| case mask-position-x: | |
| n.webkitMaskPositionX = | |
| n.mozMaskPositionX = | |
| n.msMaskPositionX = | |
| n.maskPositionX = l | |
| break; | |
| case mask-position-y: | |
| n.webkitMaskPositionY = | |
| n.mozMaskPositionY = | |
| n.msMaskPositionY = | |
| n.maskPositionY = l | |
| break; | |
| case mask-repeat: | |
| n.webkitMaskRepeat = | |
| n.mozMaskRepeat = | |
| n.msMaskRepeat = | |
| n.maskRepeat = l | |
| break; | |
| case mask-repeat-x: | |
| n.webkitMaskRepeatX = | |
| n.mozMaskRepeatX = | |
| n.msMaskRepeatX = | |
| n.maskRepeatX = l | |
| break; | |
| case mask-repeat-y: | |
| n.webkitMaskRepeatY = | |
| n.mozMaskRepeatY = | |
| n.msMaskRepeatY = | |
| n.maskRepeatY = l | |
| break; | |
| case mask-size: | |
| n.webkitMaskSize = | |
| n.mozMaskSize = | |
| n.msMaskSize = | |
| n.maskSize = l | |
| break; | |
| case max-logical-height: | |
| n.webkitMaxLogicalHeight = | |
| n.mozMaxLogicalHeight = | |
| n.msMaxLogicalHeight = | |
| n.maxLogicalHeight = l | |
| break; | |
| case max-logical-width: | |
| n.webkitMaxLogicalWidth = | |
| n.mozMaxLogicalWidth = | |
| n.msMaxLogicalWidth = | |
| n.maxLogicalWidth = l | |
| break; | |
| case min-logical-height: | |
| n.webkitMinLogicalHeight = | |
| n.mozMinLogicalHeight = | |
| n.msMinLogicalHeight = | |
| n.minLogicalHeight = l | |
| break; | |
| case min-logical-width: | |
| n.webkitMinLogicalWidth = | |
| n.mozMinLogicalWidth = | |
| n.msMinLogicalWidth = | |
| n.minLogicalWidth = l | |
| break; | |
| case padding-after: | |
| n.webkitPaddingAfter = | |
| n.mozPaddingAfter = | |
| n.msPaddingAfter = | |
| n.paddingAfter = l | |
| break; | |
| case padding-before: | |
| n.webkitPaddingBefore = | |
| n.mozPaddingBefore = | |
| n.msPaddingBefore = | |
| n.paddingBefore = l | |
| break; | |
| case padding-end: | |
| n.webkitPaddingEnd = | |
| n.mozPaddingEnd = | |
| n.msPaddingEnd = | |
| n.paddingEnd = l | |
| break; | |
| case padding-start: | |
| n.webkitPaddingStart = | |
| n.mozPaddingStart = | |
| n.msPaddingStart = | |
| n.paddingStart = l | |
| break; | |
| case perspective-origin-x: | |
| n.webkitPerspectiveOriginX = | |
| n.mozPerspectiveOriginX = | |
| n.msPerspectiveOriginX = | |
| n.perspectiveOriginX = l | |
| break; | |
| case perspective-origin-y: | |
| n.webkitPerspectiveOriginY = | |
| n.mozPerspectiveOriginY = | |
| n.msPerspectiveOriginY = | |
| n.perspectiveOriginY = l | |
| break; | |
| case print-color-adjust: | |
| n.webkitPrintColorAdjust = | |
| n.mozPrintColorAdjust = | |
| n.msPrintColorAdjust = | |
| n.printColorAdjust = l | |
| break; | |
| case rtl-ordering: | |
| n.webkitRtlOrdering = | |
| n.mozRtlOrdering = | |
| n.msRtlOrdering = | |
| n.rtlOrdering = l | |
| break; | |
| case ruby-position: | |
| n.webkitRubyPosition = | |
| n.mozRubyPosition = | |
| n.msRubyPosition = | |
| n.rubyPosition = l | |
| break; | |
| case tap-highlight-color: | |
| n.webkitTapHighlightColor = | |
| n.mozTapHighlightColor = | |
| n.msTapHighlightColor = | |
| n.tapHighlightColor = l | |
| break; | |
| case text-combine: | |
| n.webkitTextCombine = | |
| n.mozTextCombine = | |
| n.msTextCombine = | |
| n.textCombine = l | |
| break; | |
| case text-decorations-in_-effect: | |
| n.webkitTextDecorationsInEffect = | |
| n.mozTextDecorationsInEffect = | |
| n.msTextDecorationsInEffect = | |
| n.textDecorationsInEffect = l | |
| break; | |
| case text-emphasis: | |
| n.webkitTextEmphasis = | |
| n.textEmphasis = l | |
| break; | |
| case text-emphasis-color: | |
| n.webkitTextEmphasisColor = | |
| n.textEmphasisColor = l | |
| break; | |
| case text-emphasis-position: | |
| n.webkitTextEmphasisPosition = | |
| n.textEmphasisPosition = l | |
| break; | |
| case text-emphasis-style: | |
| n.webkitTextEmphasisStyle = | |
| n.textEmphasisStyle = l | |
| break; | |
| case text-fill-color: | |
| n.webkitTextFillColor = | |
| n.mozTextFillColor = | |
| n.msTextFillColor = | |
| n.textFillColor = l | |
| break; | |
| case text-orientation: | |
| n.webkitTextOrientation = | |
| n.mozTextOrientation = | |
| n.msTextOrientation = | |
| n.textOrientation = l | |
| break; | |
| case text-security: | |
| n.webkitTextSecurity = | |
| n.mozTextSecurity = | |
| n.msTextSecurity = | |
| n.textSecurity = l | |
| break; | |
| case text-stroke: | |
| n.webkitTextStroke = | |
| n.mozTextStroke = | |
| n.msTextStroke = | |
| n.textStroke = l | |
| break; | |
| case text-stroke-color: | |
| n.webkitTextStrokeColor = | |
| n.mozTextStrokeColor = | |
| n.msTextStrokeColor = | |
| n.textStrokeColor = l | |
| break; | |
| case text-stroke-width: | |
| n.webkitTextStrokeWidth = | |
| n.mozTextStrokeWidth = | |
| n.msTextStrokeWidth = | |
| n.textStrokeWidth = l | |
| break; | |
| case transform-origin-x: | |
| n.webkitTransformOriginX = | |
| n.transformOriginX = l | |
| break; | |
| case transform-origin-y: | |
| n.webkitTransformOriginY = | |
| n.transformOriginY = l | |
| break; | |
| case transform-origin-z: | |
| n.webkitTransformOriginZ = | |
| n.transformOriginZ = l | |
| break; | |
| case user-drag: | |
| n.webkitUserDrag = | |
| n.mozUserDrag = | |
| n.msUserDrag = | |
| n.userDrag = l | |
| break; | |
| case user-modify: | |
| n.webkitUserModify = | |
| n.mozUserModify = | |
| n.msUserModify = | |
| n.userModify = l | |
| break; | |
| case user-select: | |
| n.webkitUserSelect = | |
| n.mozUserSelect = | |
| n.msUserSelect = | |
| n.userSelect = l | |
| break; | |
| case writing-mode: | |
| n.webkitWritingMode = | |
| n.writingMode = l | |
| break; | |
| case scroll-snap-coordinate: | |
| n.webkitScrollSnapCoordinate = | |
| n.msScrollSnapCoordinate = | |
| n.scrollSnapCoordinate = l | |
| break; | |
| case scroll-snap-destination: | |
| n.webkitScrollSnapDestination = | |
| n.msScrollSnapDestination = | |
| n.scrollSnapDestination = l | |
| break; | |
| case scroll-snap-points-x: | |
| n.webkitScrollSnapPointsX = | |
| n.msScrollSnapPointsX = | |
| n.scrollSnapPointsX = l | |
| break; | |
| case scroll-snap-points-y: | |
| n.webkitScrollSnapPointsY = | |
| n.msScrollSnapPointsY = | |
| n.scrollSnapPointsY = l | |
| break; | |
| case scroll-snap-type: | |
| n.webkitScrollSnapType = | |
| n.msScrollSnapType = | |
| n.scrollSnapType = l | |
| break; | |
| case font-size-adjust: | |
| n.fontSizeAdjust = l | |
| break; | |
| case white-space: | |
| n.whiteSpace = l | |
| break; | |
| case widows: | |
| n.widows = l | |
| break; | |
| case width: | |
| n.width = l | |
| break; | |
| case will-change: | |
| n.willChange = l | |
| break; | |
| case word-break_: | |
| n.wordBreak = l | |
| break; | |
| case word-spacing: | |
| n.wordSpacing = l | |
| break; | |
| case word-wrap: | |
| n.wordWrap = l | |
| break; | |
| case writing-mode: | |
| n.writingMode = l | |
| break; | |
| case x: | |
| n.x = l | |
| break; | |
| case y: | |
| n.y = l | |
| break; | |
| case z-index: | |
| n.zIndex = l | |
| break; | |
| case zoom: | |
| n.zoom = l | |
| break; | |
| case css-text: | |
| n.cssText = l | |
| break; | |
| case length: | |
| n.length = l | |
| break; | |
| case parent-rule: | |
| n.parentRule = l | |
| break; | |
| case css-float: | |
| n.cssFloat = l | |
| break; | |
| case item: | |
| n.item = l | |
| break; | |
| case get-property-value: | |
| return ((__.currentStyle)? __.currentStyle[l]: getComputedStyle(__, null)[l]) || "initial" | |
| break; | |
| case get-property-priority: | |
| return n.getPropertyPriority.apply(l) | |
| break; | |
| case set-property: | |
| return n.setProperty.apply(l) | |
| break; | |
| case remove-property: | |
| return n.removeProperty.apply(l) | |
| break; | |
| default: // 'prop-erty' | |
| if(typeof e === "string" && /^[a-z][a-z\-]*$/i.test(e)) // prop-erty | |
| n[e.toCamelCase()] = l | |
| else // -prop-erty | |
| JOOS(__).joos(-e, l); | |
| break; | |
| } | |
| } else { | |
| n = _.reverse === [].reverse? __.style: _.style; | |
| switch(typeof e) { | |
| case typeof -1: // -prop-erty | |
| JOOS(__).joos(-e, k); | |
| break; | |
| case typeof "": | |
| if(/^[a-z][a-z\-]*$/i.test(e)) // prop-erty | |
| n[e.toCamelCase()] = k; | |
| break; | |
| case typeof {}: // {} and [] | |
| if(e.reverse === [].reverse) // [] | |
| for(var j = 0; j < e.length; j++) | |
| switch(typeof k) { | |
| case typeof "": | |
| case typeof -1: | |
| JOOS(__).joos(e[j], k) | |
| break; | |
| case typeof {}: | |
| if(k.reverse === [].reverse) | |
| JOOS(__).joos(e[j], k[j] || k[0]); | |
| else | |
| for(var p in k) | |
| JOOS(__).joos(e[j++], k[p]); | |
| } | |
| else // {} | |
| for(var p in e) | |
| if(typeof window[p] === typeof -1) // padding-bottom | |
| JOOS(__).joos(window[p], e[p]); | |
| else if(typeof e[p] === typeof []) // [padding-bottom, margin-bottom] | |
| for(var j = 0; j < e[p].length; j++) | |
| JOOS(__).joos(e[p][j] || e[p][0], (typeof k === typeof "" || typeof k === typeof -1)? k: k[p][j] || k[p][0]); | |
| // debug bookmark [prefix grouping] | |
| else // 'padding-bottom' | |
| for(var j in e) | |
| JOOS(__).joos(j, e[j]); | |
| break; | |
| case typeof /(?:)/: | |
| /* | |
| Flags - Meaning | |
| g - match both dash-case and camelCase | |
| m - match camelCase if on, else match dash-case | |
| */ | |
| for(var p in n) | |
| if(e.global === true && (e.test(p.toDashCase()) || e.test(p.toCamelCase()))) // /(background|border)-color/g | |
| n[p] = k; | |
| else if(e.multiline === true && e.test(p.toCamelCase())) // /(background|border)-color/m | |
| n[p] = k; | |
| else if(e.multiline === false && e.test(p.toDashCase())) // /(background|border)-color/ | |
| n[p] = k; | |
| break; | |
| default: | |
| if(browser === "Safari") | |
| throw TypeError("[" + unique(identifier[0] || identifier) + '].style.' + (e) + ' is undefined'); | |
| throw TypeError("[" + unique(identifier[0] || identifier) + '].style.' + (e.name? e.name: e).toString().toCamelCase() + ' is undefined') | |
| break; | |
| } | |
| } | |
| return JOOS(__); | |
| } // end css | |
| __.css = (u = jQuery !== undefined && jQuery !== null)? | |
| jQuery.css: __.joos; | |
| __.and = (u && jQuery.and !== undefined)? | |
| jQuery.and: __.joos; | |
| __.JOOS_ID = unique(identifier[0] || identifier); | |
| return __ | |
| } // end of $ | |
| var $, jQuery; | |
| $ = ($ !== undefined && $ !== null)? $: JOOS; | |
| if(jQuery !== undefined && jQuery !== null) | |
| jQuery.fn.joos = function(e, k) { | |
| return JOOS(this).joos(e, k) | |
| }; | |
| /* JUMP TO BOTTOM - welcome to the bottom, Drake started here */ |
| /* JOOS Help | |
| Selectors | |
| CSS Styled | |
| element@nth - element:nth-child(nth) | |
| element:parent - parent of element | |
| element:? - same as above | |
| element < - same as above | |
| element < ? - same as above | |
| element:siblings - siblings of element (all) | |
| selector1 & selector2 - selector1, selector1 selector2 | |
| {selector} $1 - selector selector (like RegExps) | |
| examples | |
| // Get an element's parent | |
| #child:parent | |
| // Get an element and it's siblings | |
| #child:siblings | |
| // Get only any element's siblings | |
| {#child}:siblings:not($1) | |
| // Get an element's parents and siblings (aunts, uncles) | |
| #child:parent:siblings | |
| // Get an element's parent's siblings only (aunts, uncles) | |
| {#child:parent}:siblings:not($1) | |
| // Get an element's cousins | |
| #child:parent:siblings > * | |
| Properties | |
| JOOS_ID - the current element(s)' ID(s) as a CSS selector string | |
| Methods | |
| .joos(get-property-value, "property") - returns the value of the property | |
| */ |