daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<div class="intro component">

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith The StyleSheet module normalizes the dynamic creation and modification

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith of CSS stylesheets on a page. This makes it easy to manage the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith development, storage, and reapplication of personalized user

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith stylesheets. Because it targets styles at the CSS level, it also

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith allows you to modify styles applied to a CSS pseudo-element such as

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>p::first-letter</code>, or pseudo-class such as

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>a:hover</code>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith StyleSheet is capable of creating new stylesheets from scratch or

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith modifying existing stylesheets held as properties of

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> elements. It

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith should be noted that not all browsers support reading or modifying

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith external stylesheets from other domains.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</div>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith{{>getting-started}}

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h2 id="using">Using the StyleSheet Utility</h2>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="instantiating">Instantiating a <code>Y.StyleSheet</code></h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith The <code>Y.StyleSheet</code> constructor is written to support both

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith function syntax and normal constructor syntax making the <code>new</code>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith prefix unnecessary (but harmless).

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith The constructor has no required parameters. Passing no arguments will

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith create a new, empty StyleSheet instance.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// These are equivalent; both create new empty StyleSheets

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar myStyleSheet = new Y.StyleSheet();

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar myOtherStyleSheet = Y.StyleSheet();

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith To seed a new StyleSheet with a number of CSS rules, you can pass the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith constructor any of the following:

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<ol>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith a <code>&lt;style&gt;</code> or <code>&lt;link&gt;</code> node

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith reference,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith the id of a <code>&lt;style&gt;</code> or <code>&lt;link&gt;</code>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith node, or

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>a string of CSS</li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</ol>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<link id="local" type="text/css" rel="stylesheet" href="local_file.css">

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<style id="styleblock" type="text/css">

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith .some select.or {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith margin-right: 2em;

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith }

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</style>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithYUI().use('node','stylesheet', function (Y) {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith // Node or HTMLElement reference for a style or locally sourced link element

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith var sheet = Y.StyleSheet(Y.one("#styleblock"));

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith sheet = Y.StyleSheet(Y.DOM.byId('local'));

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith // OR the id of a style element or locally sourced link element

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith sheet = Y.StyleSheet('#local');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith // OR string of css text

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " +

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith ".moduleX .warn { background: #eec; } " +

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith ".hide_messages .moduleX .alert, " +

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith ".hide_messages .moduleX .warn { display: none; }";

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith sheet = new Y.StyleSheet(css);

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith //...

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith});

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Be aware that the <a

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith href="http://en.wikipedia.org/wiki/Same_origin_policy">Same Origin

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith policy</a> prevents access in some browsers to the style data of

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>&lt;link&gt;</code> elements with <code>href</code>s pointing to

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith other domains. Attempts to seed a <code>Y.StyleSheet</code> instance with

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith a cross-domain <code>&lt;link&gt;</code> may result in a security

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith error.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<link id="remote" type="text/css" rel="stylesheet" href="http://other.domain.com/remote_file.css">

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// ERROR - Same Origin Policy prevents access to remote stylesheets

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar styleSheet = Y.StyleSheet('remote');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="registry">Getting a StyleSheet by registered name</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>Y.StyleSheet</code> supports registering instances by name allowing

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith them to be recalled by that same name elsewhere in your code. Internally,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>Y.StyleSheet</code> maintains a registry of all created StyleSheet

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith instances, using a unique generated id that the host node is tagged with.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith This allows future attempts to create a StyleSheet instance from the same

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith node to return the previously created instance associated with that id.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Register a StyleSheet instance manually using the static

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>register</code> method or pass the desired name as a second parameter

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith to the constructor.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar sheetA = Y.StyleSheet('my_stylesheet');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Create a registry alias to sheetA. We'll call it bob.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet.register(sheetA, 'bob');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Create another StyleSheet passing the name as the second parameter

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar css = ".some .css { white-space: pre-wrap; color: pink; }";

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar sheetB = Y.StyleSheet(css, 'my sheet');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Meanwhile, elsewhere in your code

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// sheetA is the same instance as sheet1 and sheet2

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar sheet1 = Y.StyleSheet(Y.one('#my_stylesheet')),

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith sheet2 = Y.StyleSheet('bob');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// sheetB is the same instance as sheet3

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar sheet3 = Y.StyleSheet('my sheet');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith If an unregistered name is passed as the <em>first</em> argument to the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith constructor, a new empty StyleSheet will be created and registered with

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith that name. This allows you to use the following code pattern:

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Whichever of these executes first, an empty StyleSheet will be created

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// and registered as 'MyApp'.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// In one area of your app

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').set('.module .messages', { display: 'none' });

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith//...

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// In another area of your app

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').unset('.module .messages','display');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="first_param">Summary of how the constructor handles the first argument</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith When nothing is passed as the first argument, a new StyleSheet instance is

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith created.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith When a <code>&lt;style&gt;</code> or <code>&lt;link&gt;</code> element is

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith passed as the first argument, it is inspected for the id stamp that

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith StyleSheet tags known host nodes with. If it finds one, it will return the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith associated StyleSheet from the registry. If not, it will stamp the node

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith and seed the instance from the node's CSS content.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith When a string is passed as the first argument, StyleSheet does the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith following things in order:

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<ol>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Check the registry for an instance associated to that name. If found,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith return the instance.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Check the DOM for a <code>&lt;style&gt;</code> or

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>&lt;link&gt;</code> node with that id. If found, check the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith registry for an instance associated to its tagged id if present. If

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith found, return that instance. If not, use that node to seed a new

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith StyleSheet instance.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Check the string for a curly brace { character. If found, create a new

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith instance seeded with the string as initial <code>cssText</code>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Create a new empty StyleSheet and register the instance by the provided

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith string.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</ol>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="set">Creating and modifying CSS style rules</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith The core method of StyleSheet instances is <code>set(selector,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith style_properties)</code>. It will create or alter a CSS rule using the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property:value pairs in <code>style_properties</code> targeting the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith provided <code>selector</code>. In essence, it looks very much like

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith natural CSS syntax, <em>except style properties must be in JavaScript's

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith camelCase</em>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').set(

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith "q.uoted select.or[str=ing]", {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith fontSize : "150%", // note the camel casing

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith background : "#030 url(/images/bg_image.png) scroll repeat-y top left",

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith cssFloat : "left",

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith opacity : 0.5

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith });

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Rather than continually add new rules that will override one another,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith StyleSheet manages one rule per selector and modifies them in place. This

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith may be relevant if you have two or more rules with selectors of the same

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith specificity.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith As with regular CSS syntax, comma-separated selectors are supported, but

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith internally StyleSheet splits them up into individual rules because browser

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith support for multiple selectors is not consistent. This means calling

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>set(..)</code> with such a selector string <em>will incur multiple

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith repaints or reflows</em>, but limited to the number of atomic

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith selectors.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// This is valid, but will trigger 3 reflows

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').set(

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith '.foo, .bar, .baz', {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith borderRight: "1em solid #f00"

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith });

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="normalized_properties">Some style properties are normalized</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Two style properties have differing implementation between browsers, namely

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>float</code> and <code>opacity</code>. StyleSheet instances will

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith normalize these properties for you.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Because &quot;float&quot; is a reserved word in JavaScript, it is supported

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith by the name <code>cssFloat</code> in W3C compliant browsers and

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>styleFloat</code> in IE. StyleSheet will accept any of these to set

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith the <code>float</code> property.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Any of these will work

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').set('.foo', {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith "float" : "left", // "float" must be quoted

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith cssFloat : "right",

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith styleFloat : "none"

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith});

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith IE does not support the <code>opacity</code> style property, but has

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith equivalent functionality offered by its proprietary <code>filter</code>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property, though using a different value syntax. StyleSheet will translate

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>opacity</code> to <code>filter</code> for IE, but it <em>will

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith not</em> translate <code>filter</code> to <code>opacity</code> for

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith W3C-compliant browsers.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="unset">Removing and resetting CSS style rules</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith When you want to remove a particular rule or style property from affecting

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith the cascade, use <code>unset(selector,propert[y|ies])</code>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>unset(..)</code> can be called in any of the following ways, with the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith noted result:

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<ul>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>unset('.foo')</code> &mdash; removes the rule associated to the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith selector entirely.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>unset('.foo','font')</code> &mdash; unsets the <code>font</code>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property and any child properties (e.g.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith 'font-weight','font-variant','font-size','line-height', and

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith 'font-family'). If there are no set properties left, the rule is

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith removed.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>unset('.foo',['font','border',...])</code> &mdash; same as above,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith but the rule is modified only once with the final applicable

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>cssText</code>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </li>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</ul>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith It is important to note that there is a difference between setting a style

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property to its default value and unsetting it. The former can be achieved

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith by calling <code>set(selector, { property: &quot;auto&quot; })</code> (or

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith the respective default value for that property).

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith However, as the CSS is reapplied to the page, the &quot;auto&quot; value

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith will override any value for that property that may have cascaded in from

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith another rule. This is different than removing the property assignment

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith entirely, as this allows cascading values through.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').set('.foo', { background: 'auto' });

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// is NOT the same as

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').unset('.foo','background');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="not_selector">A note on selector strings</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Though the StyleSheet Utility takes selector strings as input to its API,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith it <em>does not</em> leverage the YUI selector engine. YUI's selector

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith functionality supplements native CSS support for DOM access, but

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith accomplishes this through efficient DOM traversal. Since the StyleSheet

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Utility uses the browser's built-in stylesheet and rule objects, it can not

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith handle selectors that are not supported by the browser's native CSS

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith parser.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// This will not cause a style change in IE 6, for example

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithY.StyleSheet('MyApp').set('input[type=checkbox]:checked', {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith verticalAlign : 'super'

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith});

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="disable">Disabling and enabling a StyleSheet</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Disabling a StyleSheet effectively turns it off; no CSS from that

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith stylesheet is applied to the page. Disabling a StyleSheet does not remove

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith the host node from the page, and style can be reapplied by enabling the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith StyleSheet again.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith When StyleSheets are disabled, it is still possible to change their style

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith rules via <code>set</code> and <code>unset</code>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar sheet = Y.StyleSheet(styleNode);

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithsheet.disable();

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithsheet.set('.foo', { backgroundColor: '#900', color: '#fff' });

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithsheet.set('.bar', { borderBottomColor: '#369' });

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithsheet.unset('.baz');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithsheet.enable();

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="static">Static methods</h3>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>Y.StyleSheet</code> exposes a few static methods.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<div class="apisummary">

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<table>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<thead>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <tr>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <th>Method</th>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <th>Use for</th>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </tr>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</thead>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<tbody>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <tr>

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith <td>

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith```

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke SmithY.StyleSheet.register(instance, name)

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith```

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith </td>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>Use to assign a named registry entry for a StyleSheet instance.</td>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </tr>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <tr>

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith <td>

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith```

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke SmithY.StyleSheet.toCssText(property_obj, starting_cssText)

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith```

14ea8dcb06b6d844dd99b7e18cca99172bea0cfdLuke Smith </td>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>Use to translate an object of style property:value pairs to a single <code>cssText</code> string. The optional second argument is a <code>cssText</code> string of a style's &quot;before&quot; state.</td>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith </tr>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</tbody>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</table>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</div>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>Y.StyleSheet.toCssText</code> is used internally to assemble the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>cssText</code> strings for updating the stylesheet rules. However,

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith it may also be helpful for avoiding reflow overhead when substantially

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith modifying a single element's style.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar el = Y.one('some_element'),

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith changes = { color : '#684', fontWeight: 'bold', padding: '2em' },

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith currentStyle = el.getStyle('cssText');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithel.setStyle('cssText',

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Y.StyleSheet.toCssText(changes, currentStyle));

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h2 id="mechanism">How <code>Y.StyleSheet</code> works</h2>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Browsers grant access via the DOM API to stylesheets included in markup as

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> elements. Despite

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith differing implementations across the browser spectrum, they all support

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith adding, removing, and modifying CSS rules.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith CSS rules are comprised of a selector and collection of style

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property:value pairs enclosed in curly braces.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith/* | This is a CSS rule |

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith | selectorText | style properties | */

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith div.this-is a .rule { font-color: #f00; }

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith In JavaScript, each rule object has a <code>selectorText</code> property

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith and a <code>style</code> property that operates in the same way as the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>style</code> property on regular DOM elements, such as

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>&lt;p&gt;</code> or <code>&lt;strong&gt;</code> elements.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Arguably the most valuable property of the style collection is

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>cssText</code> which corresponds to the serialized summary of

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property:value pairs applied by this collection (e.g. "font-size: 100%;

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith color: #FF0000;"). The reason this property is important is that

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith modifications to the string value will cause changes to repopulate the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith individual style properties <em>while only triggering a single repaint or

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith reflow</em> by the browser.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar el = document.getElementById('some_element');

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithel.style.borderBottom = '3px solid #eee'; // reflow

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithel.style.borderTop = '3px solid #ccc'; // another reflow

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithel.style.fontWeight = 'bold'; // another reflow

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Vs. three changes in one reflow

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithel.style.cssText += '; border-bottom: 3px solid #eee; border-top: 3px solid #ccc; font-weight: bold';

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>Y.StyleSheet</code> leverages this mechanism in addition to applying

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith modifications at the CSS rule level rather than modifying each targeted DOM

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith node directly. This means changing multiple style properties on multiple

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith elements (that can be identified by a single selector) will only ever incur

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith one repaint or reflow.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith It must be noted that all reflows are not the same. The scope of a reflow

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith is greatly affected by what element triggered it. For example, changing a

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith style of an absolutely positioned element will trigger a very limited

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith reflow because the browser understands that not much <em>could</em> change

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith as a result. Stylesheet modifications on the other hand are not tied to an

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith element, but the page as a whole. The CSS cascade must be recalculated and

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith applied, resulting in a full page reflow. This means it may be more

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith efficient to individually update many elements than to change the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith stylesheet.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h2 id="knownissues">Known Issues</h2>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <strong>Unable to set style values with

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>!important</code></strong>.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith CSS syntax for declaring that a style value has <code>important</code>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith priority is to include the <code>!important</code> flag after the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith value.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith.some-class {

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith color: #000 !important;

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith However, the DOM API for modifying stylesheets does not parse out the

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>!important</code> flag from the assigned value string, and thus

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith considers the entire string to be an invalid value.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithel.style.color = "#000 !important"; // Error

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith StyleSheet will support <code>!important</code> in the value string in a

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith future release, but for now the only way to assign an

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>!important</code> style is by creating a new StyleSheet, passing a

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith CSS text string to the constructor.

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith</p>

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar sheet = new Y.StyleSheet();

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithsheet.set(".foo", { color: "#000 !important" }); // FAIL

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithnew Y.StyleSheet(".foo { color: #000 !important; }"); // WORKS

daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith```