cssx

cssx copied to clipboard

cssx (Cujo Style Sheet eXtender)

***** This project is no longer being maintained! *****

If you are looking for an AMD plugin for loading css, check out these:

link! - loads css files in a link element css! - loads via link element or embeds css text into javascript and injects a style tag

Both of these are maintained in the cujoJS curl.js repo: https://github.com/cujojs/curl/

If you are interested in an AMD plugin that shims CSS3 features for older browsers (and more), check out Kris Zyp's xstyle:

https://github.com/kriszyp/xstyle

cssx: current version: 0.1

The following shims modules are working:

• boxOffsets (IE6)
• childSelector (.parent > .chid) (IE6)
• comboSelector (.class1.class2) (IE6)
• hover (.anything:hover) (IE6)
• ieOpacity (IE6-8)
• opacity (makes future css3 "opacity" work) (all non-IE browsers)
• inlineBlock (IE6 and 7)
• minmax (min-width, max-width, min-height, max-height) (IE6)
• scrollbar (adds a scrollbar-width unit of measurement) (all browsers)
• @imported stylesheets are now processed!

What's not working:

• attribute selectors (e.g. input[type="checkbox"])
• the UA sniffs to load bundles are not complete
• media types are fixed at "all", "screen", and "handheld"

Next:

• more shims: transtions, box-sizing, :first-child, :last-child
• Kris Zyp's Xstyle extensions need to be added
• try to get Kris Zyp's fast-parse mechanism working

What is cssx?

Cssx is an AMD-compliant plugin that loads and augments css files. It's an important part of the cujo web app framework, but can be used independently of any other cujo micro-library. Cssx only requires an AMD-compliant module loader, such as RequireJS, Backdraft's loader, or curl.js (another awesome cujo micro-library).

If you want to just use the css-loading capabilities of cssx, you can simply copy the css.js file into your project. It does not rely on any other files in this repo. css.js requires the use of an AMD-compliant module loader just like cssx does. More notes about using css.js are in the section "How do I just use css.js in my RequireJS or curl.js project?" (below).

Why would you want to augment css files?

Mainly, to provide fixes for browsers that don't support CSS 3 or CSS 2.1. Cssx has it's own plugins. These plugins modify css in various ways, such as:

1. convert opacity and rgba to something that works in IE, e.g.: opacity:0.1; to filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
2. implement "box offset positioning" in IE6 (http://www.w3.org/TR/CSS2/visuren.html#position-props)
3. implement advanced selectors in IE 6&7, e.g.: input[type=checkbox], .class1.class2, .parent > .child
4. automatically convert css3 properties to vendor-specific properties, e.g.: transition:opacity 1s ease; to -webkit-transition:opacity 1s ease;
5. automatically convert machine-specific measurements, e.g.: margin-right: -cssx-scrollbar-width; to margin-right: 15px;

All of the above (and several others) are already implemented and work dynamically (not statically like when using Selectivizr)! Because cssx is plugin-based, you can create and add your own cssx plugins.

Doesn't run-time augmentation of css take up valuable load time?

Yes. It does. But probably not as much as you think. It takes a few milliseconds to process a reasonably-sized css file. cssx provides several configuration options to help streamline the parsing process.

Current work on AMD is focused on building optimized bundles of javascript for each browser. This is called User Agent Profiling. UA Profiling also extends to AMD plugins like cssx. UA Profiling will allow css augmentation to run on the server, rather than in the browser, eliminating the expensive text parsing.

cujo.js's build tool, cram (Cujo Resource AsseMbler), is only in the proof- of-concept stages. We expect it to be ready by mid 2011.

How do I start using cssx?

To start using cssx, just copy (or clone) the src/cssx folder into your project and map one of your AMD loader paths to it. There are several ways to map your loader paths. Go RTFM if you want to get the intimate details. In summary, you should map your loader's baseUrl to a common folder to all your javascript modules (including plugins such as cssx), if a common folder exists. Then, create path configuration options for any module roots that aren't peers within the baseUrl folder. Here's a simple example:

// this is just one way to set the configuration for RequireJS or curl.js: require = { baseUrl: 'js/', // maps to the js folder that is a peer to this page paths: { myApp: 'myCompany/myApp', // maps to js/myCompany/myApp/ cssx: '../libs/cssx' // maps to libs/cssx // Note: libs and js are peer folders } };

Once you've got the paths configured correctly, you can start referencing the cssx plugin in your code. Typically, you'll do this in define() calls. By convention, you should invoke the plugin by using a prefix with a complete path to the plugin. Prefixes are delineated by a ! symbol in the module name. (CSS files are considered resources by AMD loaders, but have the same syntax as modules.)

define( [ 'myApp/moduleA', // a javascript module dependency 'text!templates/myTemplate.html', // example usage of the text plugin 'cssx/cssx!styles/moduleA.css' // our css file! ], function (moduleA, template, cssxDef) { // code some awesomeness here } );

In this example, the stylesheet, moduleA.css is loaded, parsed, and augmented by cssx before the callback function is executed. When the callback function executes, it is handed an object, cssxDef, which -- except for tinkerers and the curious -- is not of much use. It contains a reference to the original