JSS

To start using JSS now, see:

• the Quick Reference,
• the Event Property Reference,
• the Command Reference.

JSS (JavaScript Stylesheets) is a JavaScript implementation of CSS. JSS allows you to define your stylesheets in JavaScript using a CSS-like syntax. JSS also offers non-programmers a simplified way to access many of the features of jQuery.

Unlike the CSS implementations found in most browsers, JSS is CSS3 compliant. This is achieved by using jQuery's CSS3-compliant selector engine to apply styles. This means the JSS can use selectors that your browser's CSS implementation cannot. Furthermore, JSS also gives you access to jQuery's custom properties like "opacity", allowing a developer to easily adjust the transparency of elements regardless of the browser.

Although it is possible to do so, JSS does not need to replace your CSS stylesheets completely. JSS can be used alongside CSS to to implement, for example, themes. JSS can also be used to add code to your stylesheet. Instead of having your background colour set to something static like "white", you could make its value dependent on the time of day or uptime of your server.

To understand how to use JSS, consider the following CSS file:

.title
{
  background: white;
  color: black;
  font-size: 20px;
}

div.options
{
  background: black;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

In JSS, this would be defined as:

$.jss.declare({

  ".title":
  {
    background: "white",
    color: "black",
    font_size: "20px"
  },

  "div.options":
  {
    background: "black",
    color: "white",
    font_family: 'Georgia, "Times New Roman", serif'
  }

});

JSS also exposes jQuery events via a CSS-like syntax. For example, imagine you wanted to collapse or uncollapse a div (with id "target") when you click on an button with the id "collapser". In JSS, this would be as easy as:

$.jss.declare({

  "#collapser": {
    click: "toggle (#target)"
  }

});

It's that simple. No JavaScript knowledge is required beyond copying the JSS boilerplate. Let's try something a bit more more complicated. Let's make it so the collapse/uncollapse is actually animated. And it's make it so any button will collapse/uncollapse the "target" div. Finally, let's make the browser alert us when it's done.

$.jss.declare({

  "input[type=button]": [
    { click: "toggle (#target) slow" },
    { click: "alert Collapsed/uncollapsed!" }
  ]

});

You might have noticed the way we declare these got a little bit more complicated. This is the alternate "array form" of JSS. The reason for its existence is so that we can ensure that the rules will run in order. If we use the { } method of declaring JSS declaration blocks, then there's no guarantee the JSS declarations will run in the order they appear. However, if we use the [ ] form, then the declarations will be guaranteed to run in order.