 |
 |
 |
|
|
|
The DOM Level 2 Cascading Style Sheets (CSS ) interfaces are designed with the goal of exposing CSS constructs to object model consumers. Cascading Style Sheets is a declarative syntax for defining presentation rules, properties and ancillary constructs used to format and render Web documents. This document specifies a mechanism to programmatically access and modify the rich style and presentation control provided by CSS (specifically CSS level two ). This augments CSS by providing a mechanism to dynamically control the inclusion and exclusion of individual style sheets, as well as manipulate CSS rules and properties.
The CSS interfaces are organized in a logical, rather than physical structure. A collection of all style sheets referenced by or embedded in the document is accessible on the document interface. Each item in this collection exposes the properties common to all style sheets referenced or embedded in HTML and XML documents; this interface is described in the Style Sheets chapter of the DOM Level 2. User style sheets are not accessible through this collection, in part due to potential privacy concerns (and certainly read-write issues).
For each CSS style sheet, an additional interface is exposed - the CSSStyleSheet interface. This interface allows access to the collection of rules within a CSS style sheet and methods to modify that collection. Interfaces are provided for each specific type of rule in CSS2 (e.g. style declarations, @import rules, or @font-face rules), as well as a shared generic CSSRule interface.
The most common type of rule is a style declaration. The CSSStyleRule interface that represents this type of rule provides string access to the CSS selector of the rule, and access to the property declarations through the CSSStyleDeclaration interface.
Finally, an optional CSS2Properties interface is described;
this interface (if implemented) provides shortcuts to the string
values of all the properties in CSS level 2.
The interfaces within this section are considered fundamental, and must be implemented by all conforming applications of this specifcation. These interfaces represent CSS style sheets specifically.
The CSSStyleSheet interface is a concrete interface used
to represent a CSS style sheet i.e. a style sheet whose content type
is "text/css".
interface CSSStyleSheet : StyleSheet {
readonly attribute CSSRuleCollection cssRules;
unsigned long insertRule(in DOMString rule,
in unsigned long index)
raises(DOMException);
void deleteRule(in unsigned long index)
raises(DOMException);
};
cssRulesinsertRulerule |
The parsable text representing the rule. For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content. | |
index |
The index within the style sheet's rule collection of the rule before which to insert the specified rule. If the specified index is equal to the length of the style sheet's rule collection, the rule will be added to the end of the style sheet. |
DOMExceptionHIERARCHY_REQUEST_ERR: Raised if the rule cannot be inserted
at the specified index e.g. if an @import rule
is inserted after a standard rule set or other at-rule.
INDEX_SIZE_ERR: Raised if the specified index is not a valid insertion point.
SYNTAX_ERR: Raised if the specified rule has a syntax error and is unparsable.
deleteRuleindex |
The index within the style sheet's rule collection of the rule to remove. |
DOMExceptionINDEX_SIZE_ERR: Raised if the specified index does not correspond to a rule in the style sheet's rule collection.
The CSSRuleCollection interface provides the
abstraction of an ordered collection of CSS rules.
interface CSSRuleCollection {
readonly attribute unsigned long length;
CSSRule item(in unsigned long index);
};
lengthitemindex |
Index into the collection |
index position in the
CSSRuleCollection, or null if
that is not a valid index.
The CSSRule interface is the abstract base interface
for any type of CSS statement
.
This includes both rule sets
and
at-rules
.
interface CSSRule {
// RuleType
const unsigned short UNKNOWN_RULE = 0;
const unsigned short STYLE_RULE = 1;
const unsigned short IMPORT_RULE = 2;
const unsigned short MEDIA_RULE = 3;
const unsigned short FONT_FACE_RULE = 4;
const unsigned short PAGE_RULE = 5;
readonly attribute unsigned short type;
attribute DOMString cssText;
// raises(DOMException) on setting
readonly attribute CSSStyleSheet parentStyleSheet;
readonly attribute CSSRule parentRule;
};
An integer indicating which type of rule this is.
| UNKNOWN_RULE |
The rule is a |
| STYLE_RULE |
The rule is a |
| IMPORT_RULE |
The rule is a |
| MEDIA_RULE |
The rule is a |
| FONT_FACE_RULE |
The rule is a |
| PAGE_RULE |
The rule is a |
typecssTextDOMExceptionSYNTAX_ERR: Raised if the specified CSS string value has a syntax error and is unparsable.
parentStyleSheetparentRulenull.
The CSSStyleRule interface represents a single rule set
in a CSS style sheet.
interface CSSStyleRule : CSSRule {
attribute DOMString selectorText;
readonly attribute CSSStyleDeclaration style;
};
selectorTextstyle
The CSSMediaRule interface represents a @media
rule
in a CSS style sheet. A @media rule can be
used to delimit style rules for specific media types.
interface CSSMediaRule : CSSRule {
attribute DOMString mediaTypes;
readonly attribute CSSRuleCollection cssRules;
unsigned long insertRule(in DOMString rule,
in unsigned long index)
raises(DOMException);
void deleteRule(in unsigned long index);
};
mediaTypes"@media" specifier.
cssRulesinsertRulerule |
The parsable text representing the rule. For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content. | |
index |
The index within the media block's rule collection of the rule before which to insert the specified rule. If the specified index is equal to the length of the media blocks's rule collection, the rule will be added to the end of the media block. |
DOMExceptionHIERARCHY_REQUEST_ERR: Raised if the rule cannot be inserted
at the specified index. e.g. if an @import rule
is inserted after a standard rule set or other at-rule.
INDEX_SIZE_ERR: Raised if the specified index is not a valid insertion point.
SYNTAX_ERR: Raised if the specified rule has a syntax error and is unparsable.
deleteRuleindex |
The index within the media block's rule collection of the rule to remove. |
The CSSFontFaceRule interface represents a @font-face
rule
in a CSS style sheet. The @font-face rule
is used to hold a set of font descriptions.
interface CSSFontFaceRule : CSSRule {
readonly attribute CSSStyleDeclaration style;
};
style
The CSSPageRule interface represents a @page
rule
within a CSS style sheet. The @page rule is
used to specify the dimensions, orientation, margins, etc. of a page box
for paged media.
interface CSSPageRule : CSSRule {
attribute DOMString selectorText;
readonly attribute CSSStyleDeclaration style;
};
selectorTextstyle
The CSSImportRule interface represents a @import
rule
within a CSS style sheet. The @import rule
is used to import style rules from other style sheets.
interface CSSImportRule : CSSRule {
attribute DOMString href;
attribute DOMString media;
readonly attribute CSSStyleSheet styleSheet;
};
href"url(...)" specifier around the URI.
mediastyleSheet
The CSSUnkownRule interface represents an at-rule not
supported by this user agent.
interface CSSUnknownRule : CSSRule {
};
The CSSStyleDeclaration interface represents a single
CSS declaration block
. This interface may be used to determine the style properties
currently set in a block or to set style properties explicitly within
the block.
interface CSSStyleDeclaration {
attribute DOMString cssText;
// raises(DOMException) on setting
DOMString getPropertyValue(in DOMString propertyName);
DOMString removeProperty(in DOMString propertyName);
DOMString getPropertyPriority(in DOMString propertyName);
void setProperty(in DOMString propertyName,
in DOMString value,
in DOMString priority)
raises(DOMException);
readonly attribute unsigned long length;
DOMString item(in unsigned long index);
readonly attribute CSSRule parentRule;
};
cssTextDOMExceptionSYNTAX_ERR: Raised if the specified CSS string value has a syntax error and is unparsable.
getPropertyValuepropertyName |
The name of the CSS property. See the CSS property index . |
removePropertypropertyName |
The name of the CSS property. See the CSS property index . |
getPropertyPriority"important" qualifier) if the property
has been explicitly set in this declaration block.
propertyName |
The name of the CSS property. See the CSS property index . |
"important")
if one exists. The empty string if none exists.
setPropertypropertyName |
The name of the CSS property. See the CSS property index . | |
value |
The new value of the property. | |
priority |
The new priority of the property (e.g. |
DOMExceptionSYNTAX_ERR: Raised if the specified value has a syntax error and is unparsable.
lengthitemindex |
Index of the property name to retrieve. |
parentRuleThe interfaces found within this section are not mandatory. They may be implemented by a DOM implementation as a convenience to the DOM script user.
The CSS2Properties interface represents a convenience
mechanism for retrieving and setting properties within a
CSSStyleDeclaration. The attributes of this interface
correspond to all the properties specified in CSS2
. Getting an attribute of this
interface is equivalent
to calling the getPropertyValue method of the
CSSStyleDeclaration interface. Setting an attribute of this
interface
is equivalent to calling the setProperty method of
the CSSStyleDeclaration interface.
A compliant implementation is not required to implement the
CSS2Properties interface. If an implementation
does implement this interface, it is expected to understand
the specific syntax of the shorthand properties, and apply their
semantics; when the margin property is set, for
example, the marginTop, marginRight,
marginBottom and marginLeft properties
are actually being set by the underlying implementation.
When dealing with CSS "shorthand" properties, the shorthand properties should be decomposed into their component longhand properties as appropriate, and when querying for their value, the form returned should be the shortest form exactly equivalent to the declarations made in the ruleset. However, if there is no shorthand declaration that could be added to the ruleset without changing in any way the rules already declared in the ruleset (i.e., by adding longhand rules that were previously not declared in the ruleset), then the empty string should be returned for the shorthand property.
For example, querying for the font property should not return "normal normal normal 14pt/normal Arial, sans-serif", when "14pt Arial, sans-serif" suffices (the normals are initial values, and are implied by use of the longhand property).
If the values for all the longhand properties that compose a particular string are the initial values, then a string consisting of all the initial values should be returned (e.g. a 'border-width' value of "medium" should be returned as such, not as "").
For some shorthand properties that take missing values from other sides, such as the margin, padding, and border-[width|style|color] properties, the minimum number of sides possible should be used, i.e., "0px 10px" will be returned instead of "0px 10px 0px 10px".
interface CSS2Properties {
attribute DOMString azimuth;
attribute DOMString background;
attribute DOMString backgroundAttachment;
attribute DOMString backgroundColor;
attribute DOMString backgroundImage;
attribute DOMString backgroundPosition;
attribute DOMString backgroundRepeat;
attribute DOMString border;
attribute DOMString borderCollapse;
attribute DOMString borderColor;
attribute DOMString borderSpacing;
attribute DOMString borderStyle;
attribute DOMString borderTop;
attribute DOMString borderRight;
attribute DOMString borderBottom;
attribute DOMString borderLeft;
attribute DOMString borderTopColor;
attribute DOMString borderRightColor;
attribute DOMString borderBottomColor;
attribute DOMString borderLeftColor;
attribute DOMString borderTopStyle;
attribute DOMString borderRightStyle;
attribute DOMString borderBottomStyle;
attribute DOMString borderLeftStyle;
attribute DOMString borderTopWidth;
attribute DOMString borderRightWidth;
attribute DOMString borderBottomWidth;
attribute DOMString borderLeftWidth;
attribute DOMString borderWidth;
attribute DOMString bottom;
attribute DOMString captionSide;
attribute DOMString clear;
attribute DOMString clip;
attribute DOMString color;
attribute DOMString content;
attribute DOMString counterIncrement;
attribute DOMString counterReset;
attribute DOMString cue;
attribute DOMString cueAfter;
attribute DOMString cueBefore;
attribute DOMString cursor;
attribute DOMString direction;
attribute DOMString display;
attribute DOMString elevation;
attribute DOMString emptyCells;
attribute DOMString cssFloat;
attribute DOMString font;
attribute DOMString fontFamily;
attribute DOMString fontSize;
attribute DOMString fontSizeAdjust;
attribute DOMString fontStretch;
attribute DOMString fontStyle;
attribute DOMString fontVariant;
attribute DOMString fontWeight;
attribute DOMString height;
attribute DOMString left;
attribute DOMString letterSpacing;
attribute DOMString lineHeight;
attribute DOMString listStyle;
attribute DOMString listStyleImage;
attribute DOMString listStylePosition;
attribute DOMString listStyleType;
attribute DOMString margin;
attribute DOMString marginTop;
attribute DOMString marginRight;
attribute DOMString marginBottom;
attribute DOMString marginLeft;
attribute DOMString markerOffset;
attribute DOMString marks;
attribute DOMString maxHeight;
attribute DOMString maxWidth;
attribute DOMString minHeight;
attribute DOMString minWidth;
attribute DOMString orphans;
attribute DOMString outline;
attribute DOMString outlineColor;
attribute DOMString outlineStyle;
attribute DOMString outlineWidth;
attribute DOMString overflow;
attribute DOMString padding;
attribute DOMString paddingTop;
attribute DOMString paddingRight;
attribute DOMString paddingBottom;
attribute DOMString paddingLeft;
attribute DOMString page;
attribute DOMString pageBreakAfter;
attribute DOMString pageBreakBefore;
attribute DOMString pageBreakInside;
attribute DOMString pause;
attribute DOMString pauseAfter;
attribute DOMString pauseBefore;
attribute DOMString pitch;
attribute DOMString pitchRange;
attribute DOMString playDuring;
attribute DOMString position;
attribute DOMString quotes;
attribute DOMString richness;
attribute DOMString right;
attribute DOMString size;
attribute DOMString speak;
attribute DOMString speakHeader;
attribute DOMString speakNumeral;
attribute DOMString speakPunctuation;
attribute DOMString speechRate;
attribute DOMString stress;
attribute DOMString tableLayout;
attribute DOMString textAlign;
attribute DOMString textDecoration;
attribute DOMString textIndent;
attribute DOMString textShadow;
attribute DOMString textTransform;
attribute DOMString top;
attribute DOMString unicodeBidi;
attribute DOMString verticalAlign;
attribute DOMString visibility;
attribute DOMString voiceFamily;
attribute DOMString volume;
attribute DOMString whiteSpace;
attribute DOMString widows;
attribute DOMString width;
attribute DOMString wordSpacing;
attribute DOMString zIndex;
};
azimuthbackgroundbackgroundAttachmentbackgroundColorbackgroundImagebackgroundPositionbackgroundRepeatborderborderCollapseborderColorborderSpacingborderStyleborderTopborderRightborderBottomborderLeftborderTopColorborderRightColorborderBottomColorborderLeftColorborderTopStyleborderRightStyleborderBottomStyleborderLeftStyleborderTopWidthborderRightWidthborderBottomWidthborderLeftWidthborderWidthbottomcaptionSideclearclipcolorcontentcounterIncrementcounterResetcuecueAftercueBeforecursordirectiondisplayelevationemptyCellscssFloatfontfontFamilyfontSizefontSizeAdjustfontStretchfontStylefontVariantfontWeightheightleftletterSpacinglineHeightlistStylelistStyleImagelistStylePositionlistStyleTypemarginmarginTopmarginRightmarginBottommarginLeftmarkerOffsetmarksmaxHeightmaxWidthminHeightminWidthorphansoutlineoutlineColoroutlineStyleoutlineWidthoverflowpaddingpaddingToppaddingRightpaddingBottompaddingLeftpagepageBreakAfterpageBreakBeforepageBreakInsidepausepauseAfterpauseBeforepitchpitchRangeplayDuringpositionquotesrichnessrightsizespeakspeakHeaderspeakNumeralspeakPunctuationspeechRatestresstableLayouttextAligntextDecorationtextIndenttextShadowtextTransformtopunicodeBidiverticalAlignvisibilityvoiceFamilyvolumewhiteSpacewidowswidthwordSpacingzIndex
A collection of all style sheets linked into or embedded in
the document is exposed through the styleSheets attribute.
In HTML, this collection contains both external style sheets,
included via the
LINK
element, and inline style sheets, included via
STYLE
elements. In XML, this collection contains all external
style sheets included via a style sheet
processing instruction
.
interface Document2 : Document {
readonly attribute StyleSheetCollection styleSheets;
};
Inline style information attached to HTML elements is exposed
through the style attribute. This represents the
contents of the
STYLE
attribute for HTML elements.
interface HTMLElement2 : HTMLElement {
readonly attribute CSSStyleDeclaration style;
};
The style sheet associated with an HTML STYLE element is accessible via the styleSheet attribute.
interface HTMLStyleElement2 : HTMLStyleElement {
readonly attribute StyleSheet styleSheet;
};
The styleSheet associated with an HTML LINK element with a REL
of "stylesheet" or "alternate stylesheet" is not accessible
directly. This is because LINK elements are not used
purely as a stylesheet
linking mechanism. The styleSheet property on LINK elements
with other relationships would be incongruous.
|
|
|