stylesheet.js
645 lines
| 25.4 KiB
| application/javascript
|
JavascriptLexer
Marcin Kuzminski
|
r0 | /* | ||
| Copyright (c) 2009, Yahoo! Inc. All rights reserved. | ||||
| Code licensed under the BSD License: | ||||
| http://developer.yahoo.net/yui/license.txt | ||||
| version: 2.8.0r4 | ||||
| */ | ||||
| /** | ||||
| * The StyleSheet component is a utility for managing css rules at the | ||||
| * stylesheet level | ||||
| * | ||||
| * @module stylesheet | ||||
| * @namespace YAHOO.util | ||||
| * @requires yahoo | ||||
| * @beta | ||||
| */ | ||||
| (function () { | ||||
| var d = document, | ||||
| p = d.createElement('p'), // Have to hold the node (see notes) | ||||
| workerStyle = p.style, // worker style collection | ||||
| lang = YAHOO.lang, | ||||
| selectors = {}, | ||||
| sheets = {}, | ||||
| ssId = 0, | ||||
| floatAttr = ('cssFloat' in workerStyle) ? 'cssFloat' : 'styleFloat', | ||||
| _toCssText, | ||||
| _unsetOpacity, | ||||
| _unsetProperty; | ||||
| /* | ||||
| * Normalizes the removal of an assigned style for opacity. IE uses the filter property. | ||||
| */ | ||||
| _unsetOpacity = ('opacity' in workerStyle) ? | ||||
| function (style) { style.opacity = ''; } : | ||||
| function (style) { style.filter = ''; }; | ||||
| /* | ||||
| * Normalizes the removal of an assigned style for a given property. Expands | ||||
| * shortcut properties if necessary and handles the various names for the float property. | ||||
| */ | ||||
| workerStyle.border = "1px solid red"; | ||||
| workerStyle.border = ''; // IE doesn't unset child properties | ||||
| _unsetProperty = workerStyle.borderLeft ? | ||||
| function (style,prop) { | ||||
| var p; | ||||
| if (prop !== floatAttr && prop.toLowerCase().indexOf('float') != -1) { | ||||
| prop = floatAttr; | ||||
| } | ||||
| if (typeof style[prop] === 'string') { | ||||
| switch (prop) { | ||||
| case 'opacity': | ||||
| case 'filter' : _unsetOpacity(style); break; | ||||
| case 'font' : | ||||
| style.font = style.fontStyle = style.fontVariant = | ||||
| style.fontWeight = style.fontSize = style.lineHeight = | ||||
| style.fontFamily = ''; | ||||
| break; | ||||
| default : | ||||
| for (p in style) { | ||||
| if (p.indexOf(prop) === 0) { | ||||
| style[p] = ''; | ||||
| } | ||||
| } | ||||
| } | ||||
| } | ||||
| } : | ||||
| function (style,prop) { | ||||
| if (prop !== floatAttr && prop.toLowerCase().indexOf('float') != -1) { | ||||
| prop = floatAttr; | ||||
| } | ||||
| if (lang.isString(style[prop])) { | ||||
| if (prop === 'opacity') { | ||||
| _unsetOpacity(style); | ||||
| } else { | ||||
| style[prop] = ''; | ||||
| } | ||||
| } | ||||
| }; | ||||
| /** | ||||
| * Create an instance of YAHOO.util.StyleSheet to encapsulate a css stylesheet. | ||||
| * The constructor can be called using function or constructor syntax. | ||||
| * <pre><code>var sheet = YAHOO.util.StyleSheet(..);</pre></code> | ||||
| * or | ||||
| * <pre><code>var sheet = new YAHOO.util.StyleSheet(..);</pre></code> | ||||
| * | ||||
| * The first parameter passed can be any of the following things: | ||||
| * <ul> | ||||
| * <li>The desired string name to register a new empty sheet</li> | ||||
| * <li>The string name of an existing YAHOO.util.StyleSheet instance</li> | ||||
| * <li>The unique yuiSSID generated for an existing YAHOO.util.StyleSheet instance</li> | ||||
| * <li>The id of an existing <code><link></code> or <code><style></code> node</li> | ||||
| * <li>The node reference for an existing <code><link></code> or <code><style></code> node</li> | ||||
| * <li>A chunk of css text to create a new stylesheet from</li> | ||||
| * </ul> | ||||
| * | ||||
| * <p>If 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.</p> | ||||
| * | ||||
| * <p>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.</p> | ||||
| * | ||||
| * @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 StyleSheet)) { | ||||
| return new StyleSheet(seed,name); | ||||
| } | ||||
| // 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 || node.parentNode.nodeName.toLowerCase() !== 'head') { | ||||
| head = (node.ownerDocument || d).getElementsByTagName('head')[0]; | ||||
| // 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. 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); }; | ||||
| // 4. 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); }; | ||||
| // 5. 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; | ||||
| } | ||||
| } | ||||
| // 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; }, | ||||
| /** | ||||
| * <p>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.</p> | ||||
| * | ||||
| * <p>The second parameter can be either a string of CSS text, | ||||
| * formatted as CSS ("font-size: 10px;"), or an object collection of | ||||
| * properties and their new values. Object properties must be in | ||||
| * JavaScript format ({ fontSize: "10px" }).</p> | ||||
| * | ||||
| * <p>The float style property will be set by any of "float", | ||||
| * "styleFloat", or "cssFloat" if passed in the | ||||
| * object map. Use "float: left;" format when passing a CSS text | ||||
| * string.</p> | ||||
| * | ||||
| * @method set | ||||
| * @param sel {String} the selector string to apply the changes to | ||||
| * @param css {Object|String} Object literal of style properties and | ||||
| * new values, or a string of cssText | ||||
| * @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; | ||||
| }, | ||||
| /** | ||||
| * <p>Unset style properties for a provided selector string, removing | ||||
| * their effect from the style cascade.</p> | ||||
| * | ||||
| * <p>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.</p> | ||||
| * | ||||
| * <p>The style property or properties in the second parameter must be the | ||||
| * <p>JavaScript style property names. E.g. fontSize rather than font-size.</p> | ||||
| * | ||||
| * <p>The float style property will be unset by any of "float", | ||||
| * "styleFloat", or "cssFloat".</p> | ||||
| * | ||||
| * @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 (lang.isString(css)) { | ||||
| // There is a danger here of incremental memory consumption in Opera | ||||
| workerStyle.cssText += ';' + css; | ||||
| } else { | ||||
| 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, { | ||||
| /** | ||||
| * <p>Converts an object literal of style properties and values into a string | ||||
| * of css text. This can then be assigned to el.style.cssText.</p> | ||||
| * | ||||
| * <p>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.</p> | ||||
| * | ||||
| * @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 (lang.isObject(css) && '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)); | ||||
| }, | ||||
| /** | ||||
| * <p>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".</p> | ||||
| * | ||||
| * <p>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.</p> | ||||
| * | ||||
| * @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.8.0r4", build: "2449"}); | ||||