Core Methods

Below are the core methods eCSStender exposes via its API.

addClass( element, className )

Returns: NULL

Adds the supplied class to the element.

addMethod( name, function )

Returns: NULL

Facilitates the setting or resetting of a named method in eCSStender.methods object so that it may be referenced by other functions or extensions.

addRules( element, styles )

Returns: NULL

Adds the supplied CSS declaration blocks to the style element passed as the first argument.

applyWeightedStyle( element, properties, specificity )

Returns: NULL

Applies the supplied JSON-formatted properties to an element, based on the supplied specificity, allowing you to apply inline rules in a way that is consistent with how style rules are applied via external and embedded stylesheets. If a supplied property is already defined at a greater specificity, the new value is not applied; however, if the new property being applied has an equal or greater specificity, the new property will override the previously-applied one. For example:
eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 10 );
// the element referenced by el now has visibility: hidden set
// with a specificity of 10
eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 1 );
// the visibility of el is not set to visible because 
// the specificity is not high enough
eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 10 );
// visibility is now set to “visible” because
// the specificity is equal to the prior specificity
eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 100 );
// visibility is now set to “hidden” again because
// the specificity is greater than the prior specificity


Returns: NULL

This method can be invoked in order to turn off eCSStender's caching mechanism. It is usually called outside of an extension.

elementMatchesSelector( element, selector )

Returns: Boolean

Checks to see if a given element matches the selector you’ve passed to it.

embedCSS( styles, media, delay )

Returns: Element

Embeds supplied CSS declaration blocks into the head of the current document and returns a reference to the style element used to do so. If the optional media argument is not supplied, the media of embedded stylesheet will be set to “all.” If the optional delay attribute is set to false (it's true by default), the styles will be written into the document immediately (instead of being delayed until eCSStender is finished writing).

emptyStyleSheet( stylesheet )

Returns: NULL

Strips all rules from the embedded stylesheet you pass to it.

getCSSValue( element, property )

Returns: String

Returns the current value of the property assigned to the element, taking into account the cascade and inline style application.

hasClass( element, className )

Returns: Boolean

Tests for the existence of the supplied class on the element. Returns true if it is found, false if it isn’t.

ignore( what )

Returns: NULL

This method allows you to tell eCSStender to ignore one (or several) CSS files. It accepts a string or an array of strings as an argument.

isSupported( type, arg1, arg2, arg3 )

Returns: Boolean

This method is primarily used to test for support of a given CSS property or selector in the current browser. To test a property, you only need to supply the first two arguments:

eCSStender.isSupported( 'property', 'visibility: hidden' ); // true
eCSStender.isSupported( 'property', 'foo: bar' ); // false

If you find the need for a more complicated test (e.g. certain browsers rearrange the standard shorthand internally or change color names, etc.), you can supply the property name as the second argument as the second argument and a string value (or array of string values) as the third argument.

eCSStender.isSupported( 'property', 'visibility', 'hidden' ); // true
eCSStender.isSupported( 'property', 'color', ['#000000','black','rgb(0,0,0)'] ); // true

To test for selector support, you will need to create the markup that you would expect the supplied test selector would act upon and the specific element that the selector should target is supplied as the fourth argument. For example:

var el = document.createElement('b'),
html = document.createElement('p');
eCSStender.isSupported( 'selector', 'p b', html, el ); // true
eCSStender.isSupported( 'selector', 'p ?? b', html, el ); // false

You can also use this method to store the results of more complicated tests that cannot reasonably be handled by the method itself (e.g. :before and :after support). You can accomplish this by saying:

eCSStender.isSupported( 'property', 'p:before', true );

Then, later on, you can request out the obtained result:

eCSStender.isSupported( 'property', 'p:before' ); // true

lookup( lookup, properties )

Returns: Array

This post-processing method can be used to reference the document’s styles from within an extension. It returns an array of JSON-formatted matches based on the lookup criteria you provide. The properties returned in each of those objects is determined by what properties you request. This method will be discussed in detail soon under the topic Consulting the Stylesheets.


Returns: String

Creates and returns a unique class.

matchMedia( query )

Returns: Boolean

Adds support for media query testing (or aliases native support). Supply a media query string; this method returns true if the media query matches the state of rendered document and false if it does not.

Note: the polyfill method does not take into account non-native media (like "print" or "handheld"); the aliased native method does.

newStyleElement( media, id, delay )

Returns: Element

Creates and returns a new style element. All three arguments are optional. By default, the id of the style element will be a randomly-generated number, prefaced by “temp-” and its media will be set to “all.” By default, the new style element will not be written into the document until eCSStender is finished running, but setting the optional third param to false will cause eCSStender to immediately write the style element into the page.

onComplete( function )

Returns: NULL

Adds the supplied function to the list of functions to be called when eCSStender finishes running.

register( lookup, properties, callback )

Returns: eCSStender

Registers an extension with eCSStender. This method is discussed in detail under the topic Writing an Extension.

removeClass( element, className )

Returns: NULL

Removes the supplied class from the element.

setFilter( name, function )

Removed in 1.0

Returns: NULL

Facilitates the setting or resetting of a named method in eCSStender.filters object so that it may be referenced by other functions or extensions.

toggleClass( element, className )

Returns: NULL

Adds the supplied class to the element if it isn’t there already. Removes the class if it is already applied to the element.