sheetUp - document.styleSheets Helper Library

What?

Simplify the tedious task of manipulating stylesheet objects contained in document.styleSheets.

Features

View and edit CSS rules and their properties
Add and remove stylesheets
Easily iterate through sheets, rules and properties
@import rule support
Tested with IE 5.5+, Firefox 3, Opera 9.6, Safari 2.1, Chrome

What's next?

Thinking about fixing the variation in browsers with a middle layer that simulates the stylesheets as text. The problem at the moment is that the browser reformats the rule cssText. For instance, "h1, h2 {}" can become two rules in some browsers and "green" may become "#008000". It will come with a performance penalty but it will make output consistent, it should be able to be turned off too. Apart from that, I've got a few bugs to fix but will concentrate on making some other javascript apps, which will probably use sheetUp.

New site with a new test suite and a proper tutorial and examples.

Download

What's on this site

So much needs doing, like a redesign, but here's the main stuff for now:

Tutorial
Have a quick spin with the library.: Test Cases
Run some basic test cases.: Benchmark
See how it performs at the moment.: Examples
Check out basic usage of the library.

Bookmarklet

Use in combination with Firebug, right-click the link below and Bookmark

sheetUp Bookmarklet

Let's try it out – click the code

Let's add two styles for .button

ss(".button{color:yellow;background:black;padding:0 5px;font-weight:bold} .button:hover{color:black;background:yellow}");

.button

We can also chain the sheetUp object

ss('code')
    .remove()
    .add('code{}')
        .property({padding:   '10px',
                   display:   'block',
                   color:     '#ccc',
                   background:'#000'})				
        .add('code:hover{color:#fff;}');

This code selects the buttons style rule and removes it. It then adds a rule and sets its properties.

sheetUp is a javascript stylesheet library to simplyify the manipulation of DOM style sheet objects.

News

BookyWooky - A bookmarklet/favelet manager

BookyWooky. <- Try clicking it now. Works best with Firefox if dragged onto the Bookmarks Toolbar.

Karl Swedberg's jQueryify gave me an idea. I wanted to extend it to allow a user to easily load up any library or tools they wanted. For now it's limited to Firebug Lite, jQuery, Prototype, MooTools and sheetUp. I've quickly tested it on IE6/7, Opera 10, Firefox 3. If you double-click the bookmarklet it will only load the default options without showing the dialog. And, the dialog generates a custom bookmark. The question marks link to the respective documentation.

Customise BookyWooky

tEd - template Editor

With sheetUp to help I've been making an in-browser CSS/HTML editor. Try it out right now by clicking this bookmarklet . It is kinda buggy at the mo and only really works in Firefox 3 and 3.1.

YouTube Video here

tEd or templateEd is designed for editing basic web pages, in-browser. It features basic code highlighting, css formatting and you can even save to disk.

sheetUp – document.styleSheets Helper Library