2
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
8
* The StyleSheet component is a utility for managing css rules at the
12
* @namespace YAHOO.util
19
p = d.createElement('p'), // Have to hold the node (see notes)
20
workerStyle = p.style, // worker style collection
25
floatAttr = ('cssFloat' in workerStyle) ? 'cssFloat' : 'styleFloat',
31
* Normalizes the removal of an assigned style for opacity. IE uses the filter property.
33
_unsetOpacity = ('opacity' in workerStyle) ?
34
function (style) { style.opacity = ''; } :
35
function (style) { style.filter = ''; };
38
* Normalizes the removal of an assigned style for a given property. Expands
39
* shortcut properties if necessary and handles the various names for the float property.
41
workerStyle.border = "1px solid red";
42
workerStyle.border = ''; // IE doesn't unset child properties
43
_unsetProperty = workerStyle.borderLeft ?
44
function (style,prop) {
46
if (prop !== floatAttr && prop.toLowerCase().indexOf('float') != -1) {
49
if (typeof style[prop] === 'string') {
52
case 'filter' : _unsetOpacity(style); break;
54
style.font = style.fontStyle = style.fontVariant =
55
style.fontWeight = style.fontSize = style.lineHeight =
56
style.fontFamily = '';
60
if (p.indexOf(prop) === 0) {
67
function (style,prop) {
68
if (prop !== floatAttr && prop.toLowerCase().indexOf('float') != -1) {
71
if (lang.isString(style[prop])) {
72
if (prop === 'opacity') {
81
* Create an instance of YAHOO.util.StyleSheet to encapsulate a css stylesheet.
82
* The constructor can be called using function or constructor syntax.
83
* <pre><code>var sheet = YAHOO.util.StyleSheet(..);</pre></code>
85
* <pre><code>var sheet = new YAHOO.util.StyleSheet(..);</pre></code>
87
* The first parameter passed can be any of the following things:
89
* <li>The desired string name to register a new empty sheet</li>
90
* <li>The string name of an existing YAHOO.util.StyleSheet instance</li>
91
* <li>The unique yuiSSID generated for an existing YAHOO.util.StyleSheet instance</li>
92
* <li>The id of an existing <code><link></code> or <code><style></code> node</li>
93
* <li>The node reference for an existing <code><link></code> or <code><style></code> node</li>
94
* <li>A chunk of css text to create a new stylesheet from</li>
97
* <p>If a string is passed, StyleSheet will first look in its static name
98
* registry for an existing sheet, then in the DOM for an element with that id.
99
* If neither are found and the string contains the { character, it will be
100
* used as a the initial cssText for a new StyleSheet. Otherwise, a new empty
101
* StyleSheet is created, assigned the string value as a name, and registered
102
* statically by that name.</p>
104
* <p>The optional second parameter is a string name to register the sheet as.
105
* This param is largely useful when providing a node id/ref or chunk of css
106
* text to create a populated instance.</p>
110
* @param seed {String|HTMLElement} a style or link node, its id, or a name or
111
* yuiSSID of a StyleSheet, or a string of css text (see above)
112
* @param name {String} OPTIONAL name to register instance for future static
115
function StyleSheet(seed, name) {
125
// Factory or constructor
126
if (!(this instanceof arguments.callee)) {
127
return new arguments.callee(seed,name);
130
head = d.getElementsByTagName('head')[0];
132
// TODO: do something. Preferably something smart
133
YAHOO.log('HEAD element not found to append STYLE node','error','StyleSheet');
134
throw new Error('HEAD element not found to append STYLE node');
137
// capture the DOM node if the string is an id
138
node = seed && (seed.nodeName ? seed : d.getElementById(seed));
140
// Check for the StyleSheet in the static registry
141
if (seed && sheets[seed]) {
143
} else if (node && node.yuiSSID && sheets[node.yuiSSID]) {
144
return sheets[node.yuiSSID];
147
// Create a style node if necessary
148
if (!node || !/^(?:style|link)$/i.test(node.nodeName)) {
149
node = d.createElement('style');
150
node.type = 'text/css';
153
if (lang.isString(seed)) {
154
// Create entire sheet from seed cssText
155
if (seed.indexOf('{') != -1) {
156
// Not a load-time fork because low run-time impact and IE fails
157
// test for s.styleSheet at page load time (oddly)
158
if (node.styleSheet) {
159
node.styleSheet.cssText = seed;
161
node.appendChild(d.createTextNode(seed));
168
if (node.parentNode !== head) {
169
// styleSheet isn't available on the style node in FF2 until appended
170
// to the head element. style nodes appended to body do not affect
172
head.appendChild(node);
175
// Begin setting up private aliases to the important moving parts
176
// 1. The stylesheet object
177
// IE stores StyleSheet under the "styleSheet" property
178
// Safari doesn't populate sheet for xdomain link elements
179
sheet = node.sheet || node.styleSheet;
181
// 2. The style rules collection
182
// IE stores the rules collection under the "rules" property
183
_rules = sheet && ('cssRules' in sheet) ? 'cssRules' : 'rules';
185
// 3. Initialize the cssRules map from the node
186
// xdomain link nodes forbid access to the cssRules collection, so this
187
// will throw an error.
188
// TODO: research alternate stylesheet, @media
189
for (i = sheet[_rules].length - 1; i >= 0; --i) {
190
r = sheet[_rules][i];
191
sel = r.selectorText;
194
cssRules[sel].style.cssText += ';' + r.style.cssText;
201
// 4. The method to remove a rule from the stylesheet
202
// IE supports removeRule
203
_deleteRule = ('deleteRule' in sheet) ?
204
function (i) { sheet.deleteRule(i); } :
205
function (i) { sheet.removeRule(i); };
207
// 5. The method to add a new rule to the stylesheet
208
// IE supports addRule with different signature
209
_insertRule = ('insertRule' in sheet) ?
210
function (sel,css,i) { sheet.insertRule(sel+' {'+css+'}',i); } :
211
function (sel,css,i) { sheet.addRule(sel,css,i); };
213
// Cache the instance by the generated Id
214
node.yuiSSID = 'yui-stylesheet-' + (ssId++);
215
StyleSheet.register(node.yuiSSID,this);
217
// Register the instance by name if provided or defaulted from seed
219
StyleSheet.register(name,this);
223
lang.augmentObject(this,{
225
* Get the unique yuiSSID for this StyleSheet instance
228
* @return {Number} the static id
230
getId : function () { return node.yuiSSID; },
233
* The HTMLElement that this instance encapsulates
241
* Enable all the rules in the sheet
244
* @return {StyleSheet} the instance
247
// Enabling/disabling the stylesheet. Changes may be made to rules
249
enable : function () { sheet.disabled = false; return this; },
252
* Disable all the rules in the sheet. Rules may be changed while the
253
* StyleSheet is disabled.
256
* @return {StyleSheet} the instance
259
disable : function () { sheet.disabled = true; return this; },
262
* Returns boolean indicating whether the StyleSheet is enabled
265
* @return {Boolean} is it enabled?
267
isEnabled : function () { return !sheet.disabled; },
270
* <p>Set style properties for a provided selector string.
271
* If the selector includes commas, it will be split into individual
272
* selectors and applied accordingly. If the selector string does not
273
* have a corresponding rule in the sheet, it will be added.</p>
275
* <p>The object properties in the second parameter must be the JavaScript
276
* names of style properties. E.g. fontSize rather than font-size.</p>
278
* <p>The float style property will be set by any of "float",
279
* "styleFloat", or "cssFloat".</p>
282
* @param sel {String} the selector string to apply the changes to
283
* @param css {Object} Object literal of style properties and new values
284
* @return {StyleSheet} the StyleSheet instance
287
set : function (sel,css) {
288
var rule = cssRules[sel],
289
multi = sel.split(/\s*,\s*/),i,
292
// IE's addRule doesn't support multiple comma delimited selectors
293
if (multi.length > 1) {
294
for (i = multi.length - 1; i >= 0; --i) {
295
this.set(multi[i], css);
300
// Some selector values can cause IE to hang
301
if (!StyleSheet.isValidSelector(sel)) {
302
YAHOO.log("Invalid selector '"+sel+"' passed to set (ignoring).",'warn','StyleSheet');
306
// Opera throws an error if there's a syntax error in assigned
307
// cssText. Avoid this using a worker style collection, then
308
// assigning the resulting cssText.
310
rule.style.cssText = StyleSheet.toCssText(css,rule.style.cssText);
312
idx = sheet[_rules].length;
313
css = StyleSheet.toCssText(css);
315
// IE throws an error when attempting to addRule(sel,'',n)
316
// which would crop up if no, or only invalid values are used
318
_insertRule(sel, css, idx);
320
// Safari replaces the rules collection, but maintains the
321
// rule instances in the new collection when rules are
323
cssRules[sel] = sheet[_rules][idx];
330
* <p>Unset style properties for a provided selector string, removing
331
* their effect from the style cascade.</p>
333
* <p>If the selector includes commas, it will be split into individual
334
* selectors and applied accordingly. If there are no properties
335
* remaining in the rule after unsetting, the rule is removed.</p>
337
* <p>The style property or properties in the second parameter must be the
338
* <p>JavaScript style property names. E.g. fontSize rather than font-size.</p>
340
* <p>The float style property will be unset by any of "float",
341
* "styleFloat", or "cssFloat".</p>
344
* @param sel {String} the selector string to apply the changes to
345
* @param css {String|Array} style property name or Array of names
346
* @return {StyleSheet} the StyleSheet instance
349
unset : function (sel,css) {
350
var rule = cssRules[sel],
351
multi = sel.split(/\s*,\s*/),
355
// IE's addRule doesn't support multiple comma delimited selectors
356
// so rules are mapped internally by atomic selectors
357
if (multi.length > 1) {
358
for (i = multi.length - 1; i >= 0; --i) {
359
this.unset(multi[i], css);
366
if (!lang.isArray(css)) {
370
workerStyle.cssText = rule.style.cssText;
371
for (i = css.length - 1; i >= 0; --i) {
372
_unsetProperty(workerStyle,css[i]);
375
if (workerStyle.cssText) {
376
rule.style.cssText = workerStyle.cssText;
382
if (remove) { // remove the rule altogether
383
rules = sheet[_rules];
384
for (i = rules.length - 1; i >= 0; --i) {
385
if (rules[i] === rule) {
386
delete cssRules[sel];
397
* Get the current cssText for a rule or the entire sheet. If the
398
* selector param is supplied, only the cssText for that rule will be
399
* returned, if found. If the selector string targets multiple
400
* selectors separated by commas, the cssText of the first rule only
401
* will be returned. If no selector string, the stylesheet's full
402
* cssText will be returned.
405
* @param sel {String} Selector string
408
getCssText : function (sel) {
411
if (lang.isString(sel)) {
412
// IE's addRule doesn't support multiple comma delimited
413
// selectors so rules are mapped internally by atomic selectors
414
rule = cssRules[sel.split(/\s*,\s*/)[0]];
416
return rule ? rule.style.cssText : null;
419
for (sel in cssRules) {
420
if (cssRules.hasOwnProperty(sel)) {
421
rule = cssRules[sel];
422
css.push(rule.selectorText+" {"+rule.style.cssText+"}");
425
return css.join("\n");
432
_toCssText = function (css,base) {
433
var f = css.styleFloat || css.cssFloat || css['float'],
436
workerStyle.cssText = base || '';
438
if (f && !css[floatAttr]) {
439
css = lang.merge(css);
440
delete css.styleFloat; delete css.cssFloat; delete css['float'];
445
if (css.hasOwnProperty(prop)) {
447
// IE throws Invalid Value errors and doesn't like whitespace
448
// in values ala ' red' or 'red '
449
workerStyle[prop] = lang.trim(css[prop]);
452
YAHOO.log('Error assigning property "'+prop+'" to "'+css[prop]+
453
"\" (ignored):\n"+e.message,'warn','StyleSheet');
457
return workerStyle.cssText;
460
lang.augmentObject(StyleSheet, {
462
* <p>Converts an object literal of style properties and values into a string
463
* of css text. This can then be assigned to el.style.cssText.</p>
465
* <p>The optional second parameter is a cssText string representing the
466
* starting state of the style prior to alterations. This is most often
467
* extracted from the eventual target's current el.style.cssText.</p>
469
* @method StyleSheet.toCssText
470
* @param css {Object} object literal of style properties and values
471
* @param cssText {String} OPTIONAL starting cssText value
472
* @return {String} the resulting cssText string
475
toCssText : (('opacity' in workerStyle) ? _toCssText :
476
// Wrap IE's toCssText to catch opacity. The copy/merge is to preserve
477
// the input object's integrity, but if float and opacity are set, the
478
// input will be copied twice in IE. Is there a way to avoid this
479
// without increasing the byte count?
480
function (css, cssText) {
481
if ('opacity' in css) {
482
css = lang.merge(css,{
483
filter: 'alpha(opacity='+(css.opacity*100)+')'
487
return _toCssText(css,cssText);
491
* Registers a StyleSheet instance in the static registry by the given name
493
* @method StyleSheet.register
494
* @param name {String} the name to assign the StyleSheet in the registry
495
* @param sheet {StyleSheet} The StyleSheet instance
496
* @return {Boolean} false if no name or sheet is not a StyleSheet
497
* instance. true otherwise.
500
register : function (name,sheet) {
501
return !!(name && sheet instanceof StyleSheet &&
502
!sheets[name] && (sheets[name] = sheet));
506
* <p>Determines if a selector string is safe to use. Used internally
507
* in set to prevent IE from locking up when attempting to add a rule for a
508
* "bad selector".</p>
510
* <p>Bad selectors are considered to be any string containing unescaped
511
* `~!@$%^&()+=|{}[];'"?< or space. Also forbidden are . or # followed by
512
* anything other than an alphanumeric. Additionally -abc or .-abc or
513
* #_abc or '# ' all fail. There are likely more failure cases, so
514
* please file a bug if you encounter one.</p>
516
* @method StyleSheet.isValidSelector
517
* @param sel {String} the selector string
521
isValidSelector : function (sel) {
524
if (sel && lang.isString(sel)) {
526
if (!selectors.hasOwnProperty(sel)) {
527
// TEST: there should be nothing but white-space left after
528
// these destructive regexs
529
selectors[sel] = !/\S/.test(
531
sel.replace(/\s+|\s*[+~>]\s*/g,' ').
532
// attribute selectors (contents not validated)
533
replace(/([^ ])\[.*?\]/g,'$1').
534
// pseudo-class|element selectors (contents of parens
535
// such as :nth-of-type(2) or :not(...) not validated)
536
replace(/([^ ])::?[a-z][a-z\-]+[a-z](?:\(.*?\))?/ig,'$1').
538
replace(/(?:^| )[a-z0-6]+/ig,' ').
539
// escaped characters
541
// class and id identifiers
542
replace(/[.#]\w[\w\-]*/g,''));
545
valid = selectors[sel];
552
YAHOO.util.StyleSheet = StyleSheet;
559
* Style node must be added to the head element. Safari does not honor styles
560
applied to StyleSheet objects on style nodes in the body.
561
* StyleSheet object is created on the style node when the style node is added
562
to the head element in Firefox 2 (and maybe 3?)
563
* The cssRules collection is replaced after insertRule/deleteRule calls in
564
Safari 3.1. Existing Rules are used in the new collection, so the collection
565
cannot be cached, but the rules can be.
566
* Opera requires that the index be passed with insertRule.
567
* Same-domain restrictions prevent modifying StyleSheet objects attached to
568
link elements with remote href (or "about:blank" or "javascript:false")
569
* Same-domain restrictions prevent reading StyleSheet cssRules/rules
570
collection of link elements with remote href (or "about:blank" or
572
* Same-domain restrictions result in Safari not populating node.sheet property
573
for link elements with remote href (et.al)
574
* IE names StyleSheet related properties and methods differently (see code)
575
* IE converts tag names to upper case in the Rule's selectorText
576
* IE converts empty string assignment to complex properties to value settings
577
for all child properties. E.g. style.background = '' sets non-'' values on
578
style.backgroundPosition, style.backgroundColor, etc. All else clear
579
style.background and all child properties.
580
* IE assignment style.filter = '' will result in style.cssText == 'FILTER:'
581
* All browsers support Rule.style.cssText as a read/write property, leaving
582
only opacity needing to be accounted for.
583
* Benchmarks of style.property = value vs style.cssText += 'property: value'
584
indicate cssText is slightly slower for single property assignment. For
585
multiple property assignment, cssText speed stays relatively the same where
586
style.property speed decreases linearly by the number of properties set.
587
Exception being Opera 9.27, where style.property is always faster than
589
* Opera 9.5b throws a syntax error when assigning cssText with a syntax error.
590
* Opera 9.5 doesn't honor rule.style.cssText = ''. Previous style persists.
591
You have to remove the rule altogether.
592
* Stylesheet properties set with !important will trump inline style set on an
593
element or in el.style.property.
594
* Creating a worker style collection like document.createElement('p').style;
595
will fail after a time in FF (~5secs of inactivity). Property assignments
596
will not alter the property or cssText. It may be the generated node is
597
garbage collected and the style collection becomes inert (speculation).
598
* IE locks up when attempting to add a rule with a selector including at least
599
characters {[]}~`!@%^&*()+=|? (unescaped) and leading _ or -
600
such as addRule('-foo','{ color: red }') or addRule('._abc','{...}')
601
* IE's addRule doesn't support comma separated selectors such as
602
addRule('.foo, .bar','{..}')
603
* IE throws an error on valid values with leading/trailing white space.
604
* When creating an entire sheet at once, only FF2/3 & Opera allow creating a
605
style node, setting its innerHTML and appending to head.
606
* When creating an entire sheet at once, Safari requires the style node to be
607
created with content in innerHTML of another element.
608
* When creating an entire sheet at once, IE requires the style node content to
609
be set via node.styleSheet.cssText
610
* When creating an entire sheet at once in IE, styleSheet.cssText can't be
611
written until node.type = 'text/css'; is performed.
612
* When creating an entire sheet at once in IE, load-time fork on
613
var styleNode = d.createElement('style'); _method = styleNode.styleSheet ?..
614
fails (falsey). During run-time, the test for .styleSheet works fine
615
* Setting complex properties in cssText will SOMETIMES allow child properties
617
set unset FF2 FF3 S3.1 IE6 IE7 Op9.27 Op9.5
618
---------- ----------------- --- --- ---- --- --- ------ -----
619
border -top NO NO YES YES YES YES YES
620
-top-color NO NO YES YES YES
621
-color NO NO NO NO NO
622
background -color NO NO YES YES YES
623
-position NO NO YES YES YES
624
-position-x NO NO NO NO NO
625
font line-height YES YES NO NO NO NO YES
626
-style YES YES NO YES YES
627
-size YES YES NO YES YES
628
-size-adjust ??? ??? n/a n/a n/a ??? ???
629
padding -top NO NO YES YES YES
630
margin -top NO NO YES YES YES
631
list-style -type YES YES YES YES YES
632
-position YES YES YES YES YES
633
overflow -x NO NO YES n/a YES
635
??? - unsetting font-size-adjust has the same effect as unsetting font-size
636
* FireFox and WebKit populate rule.cssText as "SELECTOR { CSSTEXT }", but
638
* IE6 and IE7 silently ignore the { and } if passed into addRule('.foo','{
639
color:#000}',0). IE8 does not and creates an empty rule.
640
* IE6-8 addRule('.foo','',n) throws an error. Must supply *some* cssText
643
YAHOO.register("stylesheet", YAHOO.util.StyleSheet, {version: "2.7.0", build: "1799"});
added
removed
var/httpd/htdocs/yui/2.7.0/build/stylesheet/stylesheet-debug.js
