var sheet = YAHOO.util.StyleSheet(..);var sheet = new YAHOO.util.StyleSheet(..);<link> or <style> node<link> or <style> nodeIf a string is passed, StyleSheet will first look in its static name - * registry for an existing sheet, then in the DOM for an element with that id. - * If neither are found and the string contains the { character, it will be - * used as a the initial cssText for a new StyleSheet. Otherwise, a new empty - * StyleSheet is created, assigned the string value as a name, and registered - * statically by that name.
- * - *The optional second parameter is a string name to register the sheet as. - * This param is largely useful when providing a node id/ref or chunk of css - * text to create a populated instance.
- * - * @class StyleSheet - * @constructor - * @param seed {String|HTMLElement} a style or link node, its id, or a name or - * yuiSSID of a StyleSheet, or a string of css text (see above) - * @param name {String} OPTIONAL name to register instance for future static - * access - */ -function StyleSheet(seed, name) { - var head, - node, - sheet, - cssRules = {}, - _rules, - _insertRule, - _deleteRule, - i,r,sel; - - // Factory or constructor - if (!(this instanceof arguments.callee)) { - return new arguments.callee(seed,name); - } - - head = d.getElementsByTagName('head')[0]; - if (!head) { - // TODO: do something. Preferably something smart - throw new Error('HEAD element not found to append STYLE node'); - } - - // capture the DOM node if the string is an id - node = seed && (seed.nodeName ? seed : d.getElementById(seed)); - - // Check for the StyleSheet in the static registry - if (seed && sheets[seed]) { - return sheets[seed]; - } else if (node && node.yuiSSID && sheets[node.yuiSSID]) { - return sheets[node.yuiSSID]; - } - - // Create a style node if necessary - if (!node || !/^(?:style|link)$/i.test(node.nodeName)) { - node = d.createElement('style'); - node.type = 'text/css'; - } - - if (lang.isString(seed)) { - // Create entire sheet from seed cssText - if (seed.indexOf('{') != -1) { - // Not a load-time fork because low run-time impact and IE fails - // test for s.styleSheet at page load time (oddly) - if (node.styleSheet) { - node.styleSheet.cssText = seed; - } else { - node.appendChild(d.createTextNode(seed)); - } - } else if (!name) { - name = seed; - } - } - - if (node.parentNode !== head) { - // styleSheet isn't available on the style node in FF2 until appended - // to the head element. style nodes appended to body do not affect - // change in Safari. - head.appendChild(node); - } - - // Begin setting up private aliases to the important moving parts - // 1. The stylesheet object - // IE stores StyleSheet under the "styleSheet" property - // Safari doesn't populate sheet for xdomain link elements - sheet = node.sheet || node.styleSheet; - - // 2. The style rules collection - // IE stores the rules collection under the "rules" property - _rules = sheet && ('cssRules' in sheet) ? 'cssRules' : 'rules'; - - // 3. Initialize the cssRules map from the node - // xdomain link nodes forbid access to the cssRules collection, so this - // will throw an error. - // TODO: research alternate stylesheet, @media - for (i = sheet[_rules].length - 1; i >= 0; --i) { - r = sheet[_rules][i]; - sel = r.selectorText; - - if (cssRules[sel]) { - cssRules[sel].style.cssText += ';' + r.style.cssText; - _deleteRule(i); - } else { - cssRules[sel] = r; - } - } - - // 4. The method to remove a rule from the stylesheet - // IE supports removeRule - _deleteRule = ('deleteRule' in sheet) ? - function (i) { sheet.deleteRule(i); } : - function (i) { sheet.removeRule(i); }; - - // 5. The method to add a new rule to the stylesheet - // IE supports addRule with different signature - _insertRule = ('insertRule' in sheet) ? - function (sel,css,i) { sheet.insertRule(sel+' {'+css+'}',i); } : - function (sel,css,i) { sheet.addRule(sel,css,i); }; - - // Cache the instance by the generated Id - node.yuiSSID = 'yui-stylesheet-' + (ssId++); - StyleSheet.register(node.yuiSSID,this); - - // Register the instance by name if provided or defaulted from seed - if (name) { - StyleSheet.register(name,this); - } - - // Public API - lang.augmentObject(this,{ - /** - * Get the unique yuiSSID for this StyleSheet instance - * - * @method getId - * @return {Number} the static id - */ - getId : function () { return node.yuiSSID; }, - - /** - * The HTMLElement that this instance encapsulates - * - * @property node - * @type HTMLElement - */ - node : node, - - /** - * Enable all the rules in the sheet - * - * @method enable - * @return {StyleSheet} the instance - * @chainable - */ - // Enabling/disabling the stylesheet. Changes may be made to rules - // while disabled. - enable : function () { sheet.disabled = false; return this; }, - - /** - * Disable all the rules in the sheet. Rules may be changed while the - * StyleSheet is disabled. - * - * @method disable - * @return {StyleSheet} the instance - * @chainable - */ - disable : function () { sheet.disabled = true; return this; }, - - /** - * Returns boolean indicating whether the StyleSheet is enabled - * - * @method isEnabled - * @return {Boolean} is it enabled? - */ - isEnabled : function () { return !sheet.disabled; }, - - /** - *Set style properties for a provided selector string. - * If the selector includes commas, it will be split into individual - * selectors and applied accordingly. If the selector string does not - * have a corresponding rule in the sheet, it will be added.
- * - *The object properties in the second parameter must be the JavaScript - * names of style properties. E.g. fontSize rather than font-size.
- * - *The float style property will be set by any of "float", - * "styleFloat", or "cssFloat".
- * - * @method set - * @param sel {String} the selector string to apply the changes to - * @param css {Object} Object literal of style properties and new values - * @return {StyleSheet} the StyleSheet instance - * @chainable - */ - set : function (sel,css) { - var rule = cssRules[sel], - multi = sel.split(/\s*,\s*/),i, - idx; - - // IE's addRule doesn't support multiple comma delimited selectors - if (multi.length > 1) { - for (i = multi.length - 1; i >= 0; --i) { - this.set(multi[i], css); - } - return this; - } - - // Some selector values can cause IE to hang - if (!StyleSheet.isValidSelector(sel)) { - return this; - } - - // Opera throws an error if there's a syntax error in assigned - // cssText. Avoid this using a worker style collection, then - // assigning the resulting cssText. - if (rule) { - rule.style.cssText = StyleSheet.toCssText(css,rule.style.cssText); - } else { - idx = sheet[_rules].length; - css = StyleSheet.toCssText(css); - - // IE throws an error when attempting to addRule(sel,'',n) - // which would crop up if no, or only invalid values are used - if (css) { - _insertRule(sel, css, idx); - - // Safari replaces the rules collection, but maintains the - // rule instances in the new collection when rules are - // added/removed - cssRules[sel] = sheet[_rules][idx]; - } - } - return this; - }, - - /** - *Unset style properties for a provided selector string, removing - * their effect from the style cascade.
- * - *If the selector includes commas, it will be split into individual - * selectors and applied accordingly. If there are no properties - * remaining in the rule after unsetting, the rule is removed.
- * - *The style property or properties in the second parameter must be the - *
JavaScript style property names. E.g. fontSize rather than font-size.
- * - *The float style property will be unset by any of "float", - * "styleFloat", or "cssFloat".
- * - * @method unset - * @param sel {String} the selector string to apply the changes to - * @param css {String|Array} style property name or Array of names - * @return {StyleSheet} the StyleSheet instance - * @chainable - */ - unset : function (sel,css) { - var rule = cssRules[sel], - multi = sel.split(/\s*,\s*/), - remove = !css, - rules, i; - - // IE's addRule doesn't support multiple comma delimited selectors - // so rules are mapped internally by atomic selectors - if (multi.length > 1) { - for (i = multi.length - 1; i >= 0; --i) { - this.unset(multi[i], css); - } - return this; - } - - if (rule) { - if (!remove) { - if (!lang.isArray(css)) { - css = [css]; - } - - workerStyle.cssText = rule.style.cssText; - for (i = css.length - 1; i >= 0; --i) { - _unsetProperty(workerStyle,css[i]); - } - - if (workerStyle.cssText) { - rule.style.cssText = workerStyle.cssText; - } else { - remove = true; - } - } - - if (remove) { // remove the rule altogether - rules = sheet[_rules]; - for (i = rules.length - 1; i >= 0; --i) { - if (rules[i] === rule) { - delete cssRules[sel]; - _deleteRule(i); - break; - } - } - } - } - return this; - }, - - /** - * Get the current cssText for a rule or the entire sheet. If the - * selector param is supplied, only the cssText for that rule will be - * returned, if found. If the selector string targets multiple - * selectors separated by commas, the cssText of the first rule only - * will be returned. If no selector string, the stylesheet's full - * cssText will be returned. - * - * @method getCssText - * @param sel {String} Selector string - * @return {String} - */ - getCssText : function (sel) { - var rule,css; - - if (lang.isString(sel)) { - // IE's addRule doesn't support multiple comma delimited - // selectors so rules are mapped internally by atomic selectors - rule = cssRules[sel.split(/\s*,\s*/)[0]]; - - return rule ? rule.style.cssText : null; - } else { - css = []; - for (sel in cssRules) { - if (cssRules.hasOwnProperty(sel)) { - rule = cssRules[sel]; - css.push(rule.selectorText+" {"+rule.style.cssText+"}"); - } - } - return css.join("\n"); - } - } - },true); - -} - -_toCssText = function (css,base) { - var f = css.styleFloat || css.cssFloat || css['float'], - prop; - - workerStyle.cssText = base || ''; - - if (f && !css[floatAttr]) { - css = lang.merge(css); - delete css.styleFloat; delete css.cssFloat; delete css['float']; - css[floatAttr] = f; - } - - for (prop in css) { - if (css.hasOwnProperty(prop)) { - try { - // IE throws Invalid Value errors and doesn't like whitespace - // in values ala ' red' or 'red ' - workerStyle[prop] = lang.trim(css[prop]); - } - catch (e) { - } - } - } - return workerStyle.cssText; -}; - -lang.augmentObject(StyleSheet, { - /** - *Converts an object literal of style properties and values into a string - * of css text. This can then be assigned to el.style.cssText.
- * - *The optional second parameter is a cssText string representing the - * starting state of the style prior to alterations. This is most often - * extracted from the eventual target's current el.style.cssText.
- * - * @method StyleSheet.toCssText - * @param css {Object} object literal of style properties and values - * @param cssText {String} OPTIONAL starting cssText value - * @return {String} the resulting cssText string - * @static - */ - toCssText : (('opacity' in workerStyle) ? _toCssText : - // Wrap IE's toCssText to catch opacity. The copy/merge is to preserve - // the input object's integrity, but if float and opacity are set, the - // input will be copied twice in IE. Is there a way to avoid this - // without increasing the byte count? - function (css, cssText) { - if ('opacity' in css) { - css = lang.merge(css,{ - filter: 'alpha(opacity='+(css.opacity*100)+')' - }); - delete css.opacity; - } - return _toCssText(css,cssText); - }), - - /** - * Registers a StyleSheet instance in the static registry by the given name - * - * @method StyleSheet.register - * @param name {String} the name to assign the StyleSheet in the registry - * @param sheet {StyleSheet} The StyleSheet instance - * @return {Boolean} false if no name or sheet is not a StyleSheet - * instance. true otherwise. - * @static - */ - register : function (name,sheet) { - return !!(name && sheet instanceof StyleSheet && - !sheets[name] && (sheets[name] = sheet)); - }, - - /** - *Determines if a selector string is safe to use. Used internally - * in set to prevent IE from locking up when attempting to add a rule for a - * "bad selector".
- * - *Bad selectors are considered to be any string containing unescaped - * `~!@$%^&()+=|{}[];'"?< or space. Also forbidden are . or # followed by - * anything other than an alphanumeric. Additionally -abc or .-abc or - * #_abc or '# ' all fail. There are likely more failure cases, so - * please file a bug if you encounter one.
- * - * @method StyleSheet.isValidSelector - * @param sel {String} the selector string - * @return {Boolean} - * @static - */ - isValidSelector : function (sel) { - var valid = false; - - if (sel && lang.isString(sel)) { - - if (!selectors.hasOwnProperty(sel)) { - // TEST: there should be nothing but white-space left after - // these destructive regexs - selectors[sel] = !/\S/.test( - // combinators - sel.replace(/\s+|\s*[+~>]\s*/g,' '). - // attribute selectors (contents not validated) - replace(/([^ ])\[.*?\]/g,'$1'). - // pseudo-class|element selectors (contents of parens - // such as :nth-of-type(2) or :not(...) not validated) - replace(/([^ ])::?[a-z][a-z\-]+[a-z](?:\(.*?\))?/ig,'$1'). - // element tags - replace(/(?:^| )[a-z0-6]+/ig,' '). - // escaped characters - replace(/\\./g,''). - // class and id identifiers - replace(/[.#]\w[\w\-]*/g,'')); - } - - valid = selectors[sel]; - } - - return valid; - } -},true); - -YAHOO.util.StyleSheet = StyleSheet; - -})(); - -/* - -NOTES - * Style node must be added to the head element. Safari does not honor styles - applied to StyleSheet objects on style nodes in the body. - * StyleSheet object is created on the style node when the style node is added - to the head element in Firefox 2 (and maybe 3?) - * The cssRules collection is replaced after insertRule/deleteRule calls in - Safari 3.1. Existing Rules are used in the new collection, so the collection - cannot be cached, but the rules can be. - * Opera requires that the index be passed with insertRule. - * Same-domain restrictions prevent modifying StyleSheet objects attached to - link elements with remote href (or "about:blank" or "javascript:false") - * Same-domain restrictions prevent reading StyleSheet cssRules/rules - collection of link elements with remote href (or "about:blank" or - "javascript:false") - * Same-domain restrictions result in Safari not populating node.sheet property - for link elements with remote href (et.al) - * IE names StyleSheet related properties and methods differently (see code) - * IE converts tag names to upper case in the Rule's selectorText - * IE converts empty string assignment to complex properties to value settings - for all child properties. E.g. style.background = '' sets non-'' values on - style.backgroundPosition, style.backgroundColor, etc. All else clear - style.background and all child properties. - * IE assignment style.filter = '' will result in style.cssText == 'FILTER:' - * All browsers support Rule.style.cssText as a read/write property, leaving - only opacity needing to be accounted for. - * Benchmarks of style.property = value vs style.cssText += 'property: value' - indicate cssText is slightly slower for single property assignment. For - multiple property assignment, cssText speed stays relatively the same where - style.property speed decreases linearly by the number of properties set. - Exception being Opera 9.27, where style.property is always faster than - style.cssText. - * Opera 9.5b throws a syntax error when assigning cssText with a syntax error. - * Opera 9.5 doesn't honor rule.style.cssText = ''. Previous style persists. - You have to remove the rule altogether. - * Stylesheet properties set with !important will trump inline style set on an - element or in el.style.property. - * Creating a worker style collection like document.createElement('p').style; - will fail after a time in FF (~5secs of inactivity). Property assignments - will not alter the property or cssText. It may be the generated node is - garbage collected and the style collection becomes inert (speculation). - * IE locks up when attempting to add a rule with a selector including at least - characters {[]}~`!@%^&*()+=|? (unescaped) and leading _ or - - such as addRule('-foo','{ color: red }') or addRule('._abc','{...}') - * IE's addRule doesn't support comma separated selectors such as - addRule('.foo, .bar','{..}') - * IE throws an error on valid values with leading/trailing white space. - * When creating an entire sheet at once, only FF2/3 & Opera allow creating a - style node, setting its innerHTML and appending to head. - * When creating an entire sheet at once, Safari requires the style node to be - created with content in innerHTML of another element. - * When creating an entire sheet at once, IE requires the style node content to - be set via node.styleSheet.cssText - * When creating an entire sheet at once in IE, styleSheet.cssText can't be - written until node.type = 'text/css'; is performed. - * When creating an entire sheet at once in IE, load-time fork on - var styleNode = d.createElement('style'); _method = styleNode.styleSheet ?.. - fails (falsey). During run-time, the test for .styleSheet works fine - * Setting complex properties in cssText will SOMETIMES allow child properties - to be unset - set unset FF2 FF3 S3.1 IE6 IE7 Op9.27 Op9.5 - ---------- ----------------- --- --- ---- --- --- ------ ----- - border -top NO NO YES YES YES YES YES - -top-color NO NO YES YES YES - -color NO NO NO NO NO - background -color NO NO YES YES YES - -position NO NO YES YES YES - -position-x NO NO NO NO NO - font line-height YES YES NO NO NO NO YES - -style YES YES NO YES YES - -size YES YES NO YES YES - -size-adjust ??? ??? n/a n/a n/a ??? ??? - padding -top NO NO YES YES YES - margin -top NO NO YES YES YES - list-style -type YES YES YES YES YES - -position YES YES YES YES YES - overflow -x NO NO YES n/a YES - - ??? - unsetting font-size-adjust has the same effect as unsetting font-size - * FireFox and WebKit populate rule.cssText as "SELECTOR { CSSTEXT }", but - Opera and IE do not. - * IE6 and IE7 silently ignore the { and } if passed into addRule('.foo','{ - color:#000}',0). IE8 does not and creates an empty rule. - * IE6-8 addRule('.foo','',n) throws an error. Must supply *some* cssText -*/ - -YAHOO.register("stylesheet", YAHOO.util.StyleSheet, {version: "2.7.0", build: "1799"});