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
applyWeightedStyle( element, properties, specificity )
Returns: NULL
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
disableCache()
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');
html.appendChild(el);
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.
makeUniqueClass()
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
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.