Thursday, November 29th, 2007

New CSS JavaScript Library

Category: CSS, JavaScript, Library, MooTools

<p>Marat Denenberg has continued the trend of CSS frameworks by taking Mootools and creating CSS.js.

The library sits on top of CSS itself and gives you:

  • Programmatic CSS
  • Browser Compatibility
  • Custom CSS Properties

With programmatic css, you can use loops to generate CSS that might have taken pages to type out. You can have CSS constants. You can do all sorts of math and calculations for a property. You can also modify the style of elements on the fly, without using javascript on each element. I’m sure there’s other cool stuff you can do that I didn’t think of.

Browser compatibility is sort of self-obvious. Before, you used to have a style sheet for each browser to allow for their quirks and weird CSS implementation. Now you can generate CSS that is browser specific using JS. The class is built to allow you to extend it for any browser and any property. You can specify a property to be limited, in which case it will only generate it for the browser you specify.

Ever wanted to invet your own CSS property? Now you can. See the examples for what I mean.

There are a lot of great examples, such as having IE grok opacity:

javascript
< view plain text >
  1. CSS.implement({
  2.     'trident_opacity': function(value, property)
  3.     {
  4.         return ['filter', 'alpha(opacity=' + (value * 100) + ')'];
  5.     }
  6. });

or allowing you to use border-radius and have it setup for the right browser:

javascript
< view plain text >
  1. CSS.implement({
  2.     local:
  3.     {
  4.         limited: ['border-radius']
  5.     },
  6.  
  7.     'gecko_border-radius': function(value, property)
  8.     {
  9.         return ['-moz-' + property, value];
  10.     },
  11.  
  12.     'webkit_border-radius': function(value, property)
  13.     {
  14.         return ['-webkit-' + property, value];
  15.     }
  16. });

Download CSS.js

Related Content:

Posted by Dion Almaer at 7:09 am
12 Comments

+++--
3.3 rating from 35 votes

12 Comments »

Comments feed TrackBack URI

Well, in fact it seems to be the same concept than a 18Month old library called Behavior … nothing more …

Comment by Jean-Philippe Encausse — November 29, 2007

Isn’t 95% of this better done server-side ?

Comment by Tobie Langel — November 29, 2007

That’s the point.
Non js in the CSS please?

Comment by Grab — November 29, 2007

I can comment on it better after trying this.

Comment by VOIPWONDERS.COM — November 29, 2007

Tobie – I’d guess 100% of it is done better serverside.

Comment by Robin — November 29, 2007

I’m in the “better done serverside” camp… at a minimum you wont loose CSS and JS both if a user has JS disabled/

Comment by Jon Hartmann — November 29, 2007

Interesting, some of the examples don’t immediately make sense to me, however the idea of changing one style rule instead of looping through the DOM is definitely interesting.

I know that jQuery UI is doing something similar with transition effects in order to improve performance. For example:
http://dev.jquery.com/view/trunk/ui/apps/gallery_advanced/

Look at line 82 of the javascript for that page to see that the image size slider is actually changing the underlying CSS rule instead of modifying elements’ style attributes:
http://dev.jquery.com/view/trunk/ui/apps/gallery_advanced/behaviour.js

Comment by K9 — November 29, 2007

Thats a nice oo interface but its not practical to mixup css with javascript.
Should consider using server side implementation instead. Having css-expression inside stylesheet is already a sin.

Comment by chaoskaizer — November 29, 2007

It’s exactly what i need, but i can not use this library because mootools is too big.

Comment by Tiago Albineli Motta — November 29, 2007

Manipulating CSS rules instead of individual styles is much faster for large collections of objects. This has been debated and proven on the jQuery mailing lists, and there is now a jQuery plugin, jQuery.Rule to animate through CSS. In that way, this is very useful. Also consider that fixing IE’s opacity and manipulating border-radius is much easier (and almost always done) through JS than server-side.
.
I do agree that in general relying on JS to display basic page layout is a bad idea. However, things like column layouts, opacity, min/max height/width and margin: auto in IE, RGBA colors and other (CSS3 standard properties) are properly implemented for all browsers in CSS, there’s always going to be some JS in page styling. Coming from print layout, it’s amazing the basic techniques that can’t be used to style webpages — all due to lack of browser support.
.
As long as the page is readable, functional, and accessible on load without JS, do whatever you want to the style afterwards.

Comment by Charles — November 29, 2007

border-radius, opacity, screen width and resolution are client side issues, how would you fix that on the server?
IMHO, the solution involves css generation on the server(from a framework, with inheritance) and client side fixes in js.
@K9 how behaviour is related to css generation? ins’t intended for events(selecting elements by css selectors…)?

Comment by devsmt — November 30, 2007

As said by Charles, jQuery.Rule can manage CSS rules objects, with the difference that the creation,manipulation and filtering is done in a “jQuery-ish” way.
Although what Charles said about animation is true, that specific part stills needs a couple of workarounds for IE.

Comment by Ariel — November 30, 2007

Leave a comment

You must be logged in to post a comment.