Thursday, November 29th, 2007
New CSS JavaScript Library
Category: CSS, JavaScript
, Library
, MooTools
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:
- CSS.implement({
- 'trident_opacity': function(value, property)
- {
- return ['filter', 'alpha(opacity=' + (value * 100) + ')'];
- }
- });
or allowing you to use border-radius and have it setup for the right browser:
- CSS.implement({
- local:
- {
- limited: ['border-radius']
- },
- 'gecko_border-radius': function(value, property)
- {
- return ['-moz-' + property, value];
- },
- 'webkit_border-radius': function(value, property)
- {
- return ['-webkit-' + property, value];
- }
- });
Well, in fact it seems to be the same concept than a 18Month old library called Behavior … nothing more …
Isn’t 95% of this better done server-side ?
That’s the point.
Non js in the CSS please?
I can comment on it better after trying this.
Tobie – I’d guess 100% of it is done better serverside.
I’m in the “better done serverside” camp… at a minimum you wont loose CSS and JS both if a user has JS disabled/
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
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.
It’s exactly what i need, but i can not use this library because mootools is too big.
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.
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…)?
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.