Class CSSStyleSheet

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

The CSSStyleSheet interface represents a single CSS stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet. It inherits properties and methods from its parent, StyleSheet.

[Value("CSSStyleSheet")]
public class CSSStyleSheet : StyleSheet

Inheritance

object

StyleSheet

CSSStyleSheet

Inherited Members

StyleSheet.Type

StyleSheet.Href

StyleSheet.OwnerNode

StyleSheet.ParentStyleSheet

StyleSheet.Title

StyleSheet.Media

StyleSheet.Disabled

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

A stylesheet consists of a collection of CSSRule objects representing each of the rules in the stylesheet. The rules are contained in a CSSRuleList, which can be obtained from the stylesheet's CssRules property.

For example, one rule might be a CSSStyleRule object containing a style such as:

Another rule might be an at-rule such as @import or @media, and so forth.

See the Obtaining a StyleSheet section for the various ways a CSSStyleSheet object can be obtained. A CSSStyleSheet object can also be directly constructed. The constructor, and the Replace(string), and ReplaceSync(string) methods are newer additions to the specification, enabling Constructable Stylesheets.

-CSS Object Model
-Using dynamic styling information

See also on MDN

Constructors

CSSStyleSheet()

public CSSStyleSheet()

CSSStyleSheet(CSSStyleSheetInit)

The CSSStyleSheet() constructor creates a new CSSStyleSheet object which represents a single Stylesheet.

public CSSStyleSheet(CSSStyleSheetInit options = null)

Parameters

options CSSStyleSheetInit

Remarks

After constructing a stylesheet the Replace(string), ReplaceSync(string), InsertRule(string, ulong), and DeleteRule(ulong) methods can be used to modify the rules of the new stylesheet.

A stylesheet created using this method is referred to as a "constructed stylesheet".
A constructed stylesheet can be shared between a document and its shadow DOM subtrees using ShadowRoot.AdoptedStyleSheets and Document.AdoptedStyleSheets.

-Document.AdoptedStyleSheets
-Constructable Stylesheets (web.dev)
-Using the Shadow DOM
-construct-style-sheets-polyfill

See also on MDN

Properties

CssRules

The read-only CSSStyleSheet property
cssRules returns a live CSSRuleList which
provides a real-time, up-to-date list of every CSS rule which comprises the
stylesheet. Each item in the list is a CSSRule defining a single
rule.

[Value("cssRules")]
public CSSRuleList CssRules { get; }

Property Value

CSSRuleList

A live-updating CSSRuleList containing each of the CSS rules making up
the stylesheet. Each entry in the rule list is a CSSRule object
describing one rule making up the stylesheet.

Remarks

-CSS Object Model
-Using dynamic styling information

See also on MDN

OwnerRule

The read-only CSSStyleSheet property
ownerRule returns the CSSImportRule
corresponding to the @import at-rule which imported the stylesheet into
the document. If the stylesheet wasn't imported into the document using
_import, the returned value is null.

[Value("ownerRule")]
public CSSRule? OwnerRule { get; }

Property Value

CSSRule

A CSSImportRule corresponding to the {{cssxref("@import")}} rule which
imported the stylesheet into the document. If the stylesheet wasn't imported into the
document using _import, the returned value is null.

Remarks

-CSS Object Model
-Using dynamic styling information

See also on MDN

Rules

IMPORTANT

Deprecated

rules is a deprecated
legacy property of the CSSStyleSheet interface. Functionally
identical to the preferred CssRules property,
it provides access to a live-updating list of the CSS rules comprising the
stylesheet.

[Value("rules")]
public CSSRuleList Rules { get; }

Property Value

CSSRuleList

A live-updating CSSRuleList containing each of the CSS rules making up
the stylesheet. Each entry in the rule list is a CSSRule object
describing one rule making up the stylesheet.

Remarks

NOTE

As a legacy property, you should not use rules and
should instead use the preferred CssRules.
While rules is unlikely to be removed soon, its availability is not as
widespread and using it will result in compatibility problems for your site or app.

-CSS Object Model
-Using dynamic styling information

See also on MDN

Methods

AddRule(string, string, ulong)

IMPORTANT

Deprecated

The obsolete CSSStyleSheet interface's
addRule() legacy method adds a new rule to the
stylesheet. You should avoid using this method, and should instead use the more standard
InsertRule(string, ulong) method.

[Value("addRule")]
public long AddRule(string selector = null, string style = null, ulong index = 0)

Parameters

selector string

style string

index ulong

Returns

long

Always returns -1.Note that due to somewhat esoteric rules about where you can legally insert rules,
it's possible that an exception may be thrown. See InsertRule(string, ulong) for more information.

Remarks

-CSS Object Model
-Using dynamic styling information

See also on MDN

DeleteRule(ulong)

The CSSStyleSheet method
deleteRule() removes a rule from the stylesheet
object.

[Value("deleteRule")]
public GlobalObject.Undefined DeleteRule(ulong index)

Parameters

index ulong

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-CSS Object Model
-Constructable Stylesheets (web.dev)
-Using dynamic styling information
-InsertRule(string, ulong)

See also on MDN

InsertRule(string, ulong)

The CSSStyleSheet.insertRule()
method inserts a new CSS rule into the current style sheet.

[Value("insertRule")]
public ulong InsertRule(string rule, ulong index = 0)

Parameters

rule string

index ulong

Returns

ulong

The newly inserted rule's index within the stylesheet's rule-list.

Remarks

NOTE

Although insertRule() is exclusively a method of
CSSStyleSheet, it actually inserts the rule into
{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules — its internal
CSSRuleList.

-DeleteRule(ulong)
-Constructable Stylesheets (web.dev)

See also on MDN

RemoveRule(ulong)

IMPORTANT

Deprecated

The obsolete CSSStyleSheet method
removeRule() removes a rule from the stylesheet
object. It is functionally identical to the standard, preferred method
DeleteRule(ulong).

[Value("removeRule")]
public GlobalObject.Undefined RemoveRule(ulong index = 0)

Parameters

index ulong

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

NOTE

This is a legacy method which has been replaced by
the standard method DeleteRule(ulong). You
should use that instead.

-CSS Object Model
-Using dynamic styling information
-InsertRule(string, ulong)

See also on MDN

Replace(string)

The replace() method of the CSSStyleSheet interface asynchronously replaces the content of the stylesheet with the content passed into it. The method returns a promise that resolves with the CSSStyleSheet object.

[Value("replace")]
public Task<CSSStyleSheet> Replace(string text)

Parameters

text string

Returns

Task<CSSStyleSheet>

A {{jsxref("Promise")}} that resolves with the CSSStyleSheet.

Remarks

The replace() and ReplaceSync(string) methods can only be used on a stylesheet created with the CSSStyleSheet(CSSStyleSheetInit) constructor.

-Constructable Stylesheets (web.dev)
-Using the Shadow DOM

See also on MDN

ReplaceSync(string)

The replaceSync() method of the CSSStyleSheet interface synchronously replaces the content of the stylesheet with the content passed into it.

[Value("replaceSync")]
public GlobalObject.Undefined ReplaceSync(string text)

Parameters

text string

Returns

GlobalObject.Undefined

None (undefined).

Remarks

The replaceSync() and Replace(string) methods can only be used on a stylesheet created with the CSSStyleSheet(CSSStyleSheetInit) constructor.

-Constructable Stylesheets (web.dev)
-Using the Shadow DOM

See also on MDN