CSS Domain
This domain exposes CSS read/write operations. All CSS objects (stylesheets, rules, and styles) have an associated id
used in subsequent operations on the related object. Each object type has a specific id
structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the get*ForNode()
calls (which accept a DOM node id). A client can also discover all the existing stylesheets with the getAllStyleSheets()
method (or keeping track of the styleSheetAdded
/styleSheetRemoved
events) and subsequently load the required stylesheet contents using the getStyleSheet[Text]()
methods.
Methods
enable#
Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received.
disable#
Disables the CSS agent for the given page.
getMatchedStylesForNode#
Returns requested styles for a DOM node identified by nodeId
.
Parameters
- nodeId
- DOM.NodeId
- excludePseudo
- boolean Whether to exclude pseudo styles (default: false).
- excludeInherited
- boolean Whether to exclude inherited styles (default: false).
Return object
- matchedCSSRules
- array [ RuleMatch ] CSS rules matching this node, from all applicable stylesheets.
- pseudoElements
- array [ PseudoIdMatches ] Pseudo style matches for this node.
- inherited
- array [ InheritedStyleEntry ] A chain of inherited styles (from the immediate node parent up to the DOM tree root).
getInlineStylesForNode#
Returns the styles defined inline (explicitly in the "style" attribute and implicitly, using DOM attributes) for a DOM node identified by nodeId
.
Parameters
- nodeId
- DOM.NodeId
Return object
getComputedStyleForNode#
Returns the computed style for a DOM node identified by nodeId
.
Parameters
- nodeId
- DOM.NodeId
Return object
- computedStyle
- array [ CSSComputedStyleProperty ] Computed style for the specified DOM node.
getPlatformFontsForNode#
Requests information about platform fonts which we used to render child TextNodes in the given node.
Parameters
- nodeId
- DOM.NodeId
Return object
- fonts
- array [ PlatformFontUsage ] Usage statistics for every employed platform font.
getStyleSheetText#
Returns the current textual content and the URL for a stylesheet.
Parameters
- styleSheetId
- StyleSheetId
Return object
- text
- string The stylesheet text.
setRuleSelector#
Modifies the rule selector.
Parameters
- styleSheetId
- StyleSheetId
- range
- SourceRange
- selector
- string
Return object
- rule
- CSSRule The resulting rule after the selector modification.
setStyleText#
Modifies the style text.
Parameters
- styleSheetId
- StyleSheetId
- range
- SourceRange
- text
- string
Return object
- style
- CSSStyle The resulting style after the selector modification.
setMediaText#
Modifies the rule selector.
Parameters
- styleSheetId
- StyleSheetId
- range
- SourceRange
- text
- string
Return object
- media
- CSSMedia The resulting CSS media rule after modification.
createStyleSheet#
Creates a new special "via-inspector" stylesheet in the frame with given frameId
.
Parameters
- frameId
- Page.FrameId Identifier of the frame where "via-inspector" stylesheet should be created.
Return object
- styleSheetId
- StyleSheetId Identifier of the created "via-inspector" stylesheet.
addRule#
Inserts a new rule with the given ruleText
in a stylesheet with given styleSheetId
, at the position specified by location
.
Parameters
- styleSheetId
- StyleSheetId The css style sheet identifier where a new rule should be inserted.
- ruleText
- string The text of a new rule.
- location
- SourceRange Text position of a new rule in the target style sheet.
Return object
- rule
- CSSRule The newly created rule.
forcePseudoState#
Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser.
Parameters
- nodeId
- DOM.NodeId The element id for which to force the pseudo state.
- forcedPseudoClasses
- array [string] Element pseudo classes to force when computing the element's style.
Array element:
Allowed values: active, focus, hover, visited.getMediaQueries#
Returns all media queries parsed by the rendering engine.
Return object
- medias
- array [ CSSMedia ]
setEffectivePropertyValueForNode#
Find a rule with the given active property for the given node and set the new value for this property
Parameters
- nodeId
- DOM.NodeId The element id for which to set property.
- propertyName
- string
- value
- string
Events
mediaQueryResultChanged#
Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features.
styleSheetChanged#
Fired whenever a stylesheet is changed as a result of the client operation.
Parameters
- styleSheetId
- StyleSheetId
styleSheetAdded#
Fired whenever an active document stylesheet is added.
Parameters
- header
- CSSStyleSheetHeader Added stylesheet metainfo.
styleSheetRemoved#
Fired whenever an active document stylesheet is removed.
Parameters
- styleSheetId
- StyleSheetId Identifier of the removed stylesheet.
layoutEditorChange#
Parameters
- styleSheetId
- StyleSheetId Identifier of the stylesheet where the modification occurred.
- changeRange
- SourceRange Range where the modification occurred.
Types
StyleSheetId#
Type: string
StyleSheetOrigin#
Stylesheet type: "injected" for stylesheets injected via extension, "user-agent" for user-agent stylesheets, "inspector" for stylesheets created by the inspector (i.e. those holding the "via inspector" rules), "regular" for regular stylesheets.
Type: string
Allowed values
injected, user-agent, inspector, regular.
PseudoIdMatches#
CSS rule collection for a single pseudo style.
Type: object
Properties
- pseudoId
-
integer
Pseudo style identifier (see
enum PseudoId
inComputedStyleConstants.h
). - matches
- array [ RuleMatch ] Matches of CSS rules applicable to the pseudo style.
RuleMatch#
Match data for a CSS rule.
Type: object
Properties
- rule
- CSSRule CSS rule in the match.
- matchingSelectors
- array [integer] Matching selector indices in the rule's selectorList selectors (0-based).
Selector#
Data for a simple selector (these are delimited by commas in a selector list).
Type: object
Properties
- value
- string Selector text.
- range
- SourceRange Selector range in the underlying resource (if available).
SelectorList#
Selector list data.
Type: object
Properties
- selectors
- array [ Selector ] Selectors in the list.
- text
- string Rule selector text.
CSSStyleSheetHeader#
CSS stylesheet metainformation.
Type: object
Properties
- styleSheetId
- StyleSheetId The stylesheet identifier.
- frameId
- Page.FrameId Owner frame identifier.
- sourceURL
- string Stylesheet resource URL.
- sourceMapURL
- string URL of source map associated with the stylesheet (if any).
- origin
- StyleSheetOrigin Stylesheet origin.
- title
- string Stylesheet title.
- ownerNode
- DOM.BackendNodeId The backend id for the owner node of the stylesheet.
- disabled
- boolean Denotes whether the stylesheet is disabled.
- hasSourceURL
- boolean Whether the sourceURL field value comes from the sourceURL comment.
- isInline
- boolean Whether this stylesheet is created for STYLE tag by parser. This flag is not set for document.written STYLE tags.
- startLine
- number Line offset of the stylesheet within the resource (zero based).
- startColumn
- number Column offset of the stylesheet within the resource (zero based).
CSSRule#
CSS rule representation.
Type: object
Properties
- styleSheetId
- StyleSheetId The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from.
- selectorList
- SelectorList Rule selector data.
- origin
- StyleSheetOrigin Parent stylesheet's origin.
- style
- CSSStyle Associated style declaration.
- media
- array [ CSSMedia ] Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards.
SourceRange#
Text range within a resource. All numbers are zero-based.
Type: object
Properties
- startLine
- integer Start line of range.
- startColumn
- integer Start column of range (inclusive).
- endLine
- integer End line of range
- endColumn
- integer End column of range (exclusive).
ShorthandEntry#
Type: object
Properties
- name
- string Shorthand name.
- value
- string Shorthand value.
- important
-
boolean
Whether the property has "!important" annotation (implies
false
if absent).
CSSComputedStyleProperty#
Type: object
Properties
- name
- string Computed style property name.
- value
- string Computed style property value.
CSSStyle#
CSS style representation.
Type: object
Properties
- styleSheetId
- StyleSheetId The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from.
- cssProperties
- array [ CSSProperty ] CSS properties in the style.
- shorthandEntries
- array [ ShorthandEntry ] Computed values for all shorthands found in the style.
- cssText
- string Style declaration text (if available).
- range
- SourceRange Style declaration range in the enclosing stylesheet (if available).
CSSProperty#
CSS property declaration data.
Type: object
Properties
- name
- string The property name.
- value
- string The property value.
- important
-
boolean
Whether the property has "!important" annotation (implies
false
if absent). - implicit
-
boolean
Whether the property is implicit (implies
false
if absent). - text
- string The full property text as specified in the style.
- parsedOk
-
boolean
Whether the property is understood by the browser (implies
true
if absent). - disabled
- boolean Whether the property is disabled by the user (present for source-based properties only).
- range
- SourceRange The entire property range in the enclosing style declaration (if available).
CSSMedia#
CSS media rule descriptor.
Type: object
Properties
- text
- string Media query text.
- source
- string Source of the media query: "mediaRule" if specified by a @media rule, "importRule" if specified by an @import rule, "linkedSheet" if specified by a "media" attribute in a linked stylesheet's LINK tag, "inlineSheet" if specified by a "media" attribute in an inline stylesheet's STYLE tag. Allowed values: mediaRule, importRule, linkedSheet, inlineSheet.
- sourceURL
- string URL of the document containing the media query description.
- range
- SourceRange The associated rule (@media or @import) header range in the enclosing stylesheet (if available).
- parentStyleSheetId
- StyleSheetId Identifier of the stylesheet containing this object (if exists).
- mediaList
- array [ MediaQuery ] Array of media queries.
MediaQuery#
Media query descriptor.
Type: object
Properties
- expressions
- array [ MediaQueryExpression ] Array of media query expressions.
- active
- boolean Whether the media query condition is satisfied.
MediaQueryExpression#
Media query expression descriptor.
Type: object
Properties
- value
- number Media query expression value.
- unit
- string Media query expression units.
- feature
- string Media query expression feature.
- valueRange
- SourceRange The associated range of the value text in the enclosing stylesheet (if available).
- computedLength
- number Computed length of media query expression (if applicable).
PlatformFontUsage#
Information about amount of glyphs that were rendered with given font.
Type: object
Properties
- familyName
- string Font's family name reported by platform.
- glyphCount
- number Amount of glyphs that were rendered with this font.