How eCSStender Works

Understanding how eCSStender works can be key for developers looking to leverage its power. Below is a step-by-step outline of the process by which eCSStender interacts with the page and with registered extensions.

Step 1 - Gathering the Document's Stylesheets

As soon as the DOM is available, eCSStender loops through the document's stylesheets and begins collecting information. It weeds out inactive stylesheets and stylesheets originating from foreign domains (for security reasons) and assigns the remaining sheets to an internal variable before proceeding to step 2. Any @import rules encountered within the stylesheet are similarly filed for parsing.

Step 2 - Parsing the Style Rules

When eCSStender begins examining the style rules in earnest, it first determines the assigned media type of the stylesheet it is in. If no media type is specified, the contained styles are assigned to "all." Internal containers are created for each media type so that the rules may be added to them in a later loop.

In the next step, eCSStender reads in the stylesheet. As most browsers do not expose properties and selectors they don't understand via traditional DOM style methods and properties, eCSStender relies on XMLHTTPRequest to read in the CSS files. It them cleans them up, removing comments and white space. eCSStender then proceeds to pluck out and "@" rules it understands (currently @font-face, @page) and stores their details in its fonts and pages properties.

eCSStender parses all of the declaration blocks within each stylesheet and pushes them to its internal catalog, paying attention to both the cascade and specificity of each. As eCSStender is media-aware, it also keeps an eye out for @media groups and assigns the contained rules to the appropriate medium or media in the catalog.

Step 3 - Running Tests

Before looking for extensions to trigger, eCSStender loops through the list of registered extensions and runs any test cases supplied. If the test cases do not pass, the extension is dropped from the list that will be run against the document's styles.

Step 4 - Triggering Extensions

In the final step of its run, eCSStender loops through the catalog of style rules, medium by medium, and checks to see if any of the contained rules meet the criteria of the registered extensions. Each time a match is encountered, the extension's callback function is triggered and passed the appropriate arguments.