css-controls

Cross-browser stylesheet creation and css rule creation/deletion (includes IE6 support).

This was created to be a well-tested cross-browser library for basic CSS stylesheet and rule creaton/deletion.

Getting Started

css-controls is available via the following:

• npm, npm install css-controls
• bower, bower install css-controls
• component, component install css-controls
• Download via HTTP

For npm and component, you can load it in as follows:

var cssControls = require('css-controls');

For bower and http, you can use vanilla JS

<script src="components/css-controls.js"></script>
window.cssControls; // `css-controls` is defined on `window` in camelCase

or you can use AMD

require(['css-controls'], funtion (cssControls) { /* code */ });

or CommonJS syntax (see npm/component section).

Once you have the module loaded, you can create new style sheets and add/remove CSS rules.

// Create a stylesheet (auto-appended to DOM)
var sheet = cssControls.createStyleSheet();
 
// Color all `p` tags red (ruleIndex = index rule was created at)
var ruleIndex = cssControls.addRule(sheet, 'p', 'color: red');
 
// Color the `body` green
cssControls.addRule(sheet, 'body', 'background: #BADA55');
 
// Remove the first rule
cssControls.removeRule(ruleIndex); // Equivalent to cssControls.removeRule(sheet, 0);

Documentation

css-controls returns 3 cross-browser functions.

cssControls.createStyleSheet();
/**
 * Create and append stylesheet to DOM
 * @returns {CSSStyleElement} Created stylesheet
 */

cssControls.addRule(styleSheet, selector, property);
/**
 * Add a CSS rule to a stylesheet
 * @param {CSSStyleElement} styleSheet Stylesheet to add rule to
 * @param {String} selector CSS selector (e.g. `.nav > .nav-bar`)
 * @param {String} property CSS property to apply to `selector` (e.g. `background: blue`)
 * @returns {Number} Index the rule was inserted at
 */

cssControls.removeRule(styleSheet, index);
/**
 * Remove a CSS rule from a stylesheet
 * @param {CSSStyleElement} styleSheet Stylesheet to remove rule from
 * @param {Numer} index Index of the rule to remove
 */

A large amount of the background knowledge came from quirksmode.

Examples

css-controls can be used with document.styleSheets as these are CSSStyleElements

// Color the `body` via the first stylesheet
var sheet = document.styleSheets[0];
cssControls.addRule(sheet, 'body', 'background: papayawhip');

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via grunt and test via npm test.

License

Copyright (c) 2013 Todd Wolfson

Licensed under the MIT license.