styles

domonic supports the style attribute.

Styling Elements

Styling gets passed to the style tag on render.

mytag = div("hi", _id="test")
mytag.style.backgroundColor = "black"
mytag.style.fontSize = "12px"
print(mytag)
# <div id="test" style="background-color:black;font-size:12px;">hi</div>

CSSOM is also stubbed out. See the styles.py class. Feel free to make a PR

stylesheets

from domonic.window import *
window.location = "https://www.facebook.com"
window.document.stylesheets

domonic.style

# TODO - should this be moved to the webapi in a future revision?

class domonic.style.CSSColorProfileRule

The CSSColorProfileRule interface represents an @color-profile rule.

class domonic.style.CSSConditionRule

The CSSConditionRule interface represents a condition rule.

class domonic.style.CSSCounterStyleRule

The CSSCounterStyleRule interface represents a @counter-style rule.

class domonic.style.CSSDocumentRule

The CSSDocumentRule interface represents an @document rule.

class domonic.style.CSSFontFaceRule

The CSSFontFaceRule interface represents a @font-face rule in a CSS style sheet.

class domonic.style.CSSFontFeatureValuesRule

The CSSFontFeatureValuesRule interface represents a @font-feature-values rule.

class domonic.style.CSSGroupingRule

The CSSGroupingRule interface represents a @grouping rule.

class domonic.style.CSSImportRule

The CSSImportRule interface represents an @import rule in a CSS style sheet.

class domonic.style.CSSKeyframeRule

The CSSKeyframeRule interface represents a single @keyframes at-rule.

class domonic.style.CSSKeyframesRule

The CSSKeyframesRule interface represents a @keyframes at-rule.

class domonic.style.CSSMediaRule

The CSSMediaRule interface represents a @media rule in a CSS style sheet.

class domonic.style.CSSNamespaceRule

The CSSNamespaceRule interface represents an @namespace rule in a CSS style sheet.

class domonic.style.CSSPageRule

The CSSPageRule interface represents a @page rule in a CSS style sheet.

class domonic.style.CSSRule

The CSSRule interface represents a single CSS rule. There are several types of rules which inherit properties from CSSRule.

CSSFontFeatureValuesRule CSSViewportRule

property cssText

16pt }” or “@import ‘url’”. To access or modify parts of the rule (e.g. the value of “font-size” in the example) use the properties on the specialized interface for the rule’s type.

Type

Represents the textual representation of the rule, e.g. “h1,h2 { font-size

class domonic.style.CSSRuleList(iterable=(), /)

A CSSRuleList represents an ordered collection of read-only CSSRule objects. While the CSSRuleList object is read-only, and cannot be directly modified, it is considered a live object, as the content can change over time.

item(index: int) → CSSRule

Gets a single CSSRule.

property length: int

Returns an integer representing the number of CSSRule objects in the collection.

class domonic.style.CSSStyleDeclaration(parentNode=None, *args, **kwargs)

The CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.

A CSSStyleDeclaration object can be exposed using three different APIs:

Via HTMLElement.style, which deals with the inline styles of a single element (e.g., <div style=”…”>). Via the CSSStyleSheet API. For example, document.styleSheets[0].cssRules[0].style returns a CSSStyleDeclaration object on the first CSS rule in the document’s first stylesheet. Via Window.getComputedStyle(), which exposes the CSSStyleDeclaration object as a read-only interface.

getPropertyCSSValue()

Only supported via getComputedStyle in Firefox. Returns the property value as a CSSPrimitiveValue or null for shorthand properties.

getPropertyPriority()

Returns the optional priority, “important”.

getPropertyValue(propertyName: str) → str

Returns the value of the property with the specified name.

item(index: int) → str

Returns a CSS property name by its index, or the empty string if the index is out-of-bounds. An alternative to accessing nodeList[i] (which instead returns undefined when i is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.

property length

The number of properties. See the item() method below.

removeProperty()

Removes a property from the CSS declaration block.

class domonic.style.CSSStyleRule

The CSSStyleRule interface represents a single style rule in a CSS style sheet.

property cssText

Returns the textual representation of the rule.

class domonic.style.CSSStyleSheet

Creates a new CSSStyleSheet object.

addRule(selectorText: str, style: str, index: int)

Adds a new rule to the stylesheet given the selector to which the style applies and the style block to apply to the matching elements. This differs from insertRule(), which takes the textual representation of the entire rule as a single string.

deleteRule(index: int)

Deletes the rule at the specified index into the stylesheet’s rule list.

insertRule(rule: str, index: Optional[int] = None)

Inserts a new rule at the specified position in the stylesheet, given the textual representation of the rule.

removeRule(index: int)

Functionally identical to deleteRule(); removes the rule at the specified index from the stylesheet’s rule list.

replace(text: str)

Asynchronously replaces the content of the stylesheet and returns a Promise that resolves with the updated CSSStyleSheet.

replaceSync(text: str)

Synchronously replaces the content of the stylesheet.

class domonic.style.CSSSupportsRule

The CSSSupportsRule interface represents a @supports at-rule.

class domonic.style.MediaList(iterable=(), /)

The MediaList interface represents a list of media. It is used in the @media at-rule.

appendMedium(newMedium: str) → None

Appends a new medium to the end of the list.

deleteMedium(oldMedium: str) → None

Removes medium in the media list. If the medium is not found nothing happens.

item(index: int) → str

Returns the media at the given index in the MediaList.

property length: int

Returns the number of media in the list.

property mediaText: str

Returns a string containing the text of the media query.

class domonic.style.Style(parent_node=None)

[ js syntax styles ] # TODO - just add normal float? # TODO - consider camel case for hyphen params? # TODO - not json serialisable due to the decorators.

property alignContent

Sets or returns the alignment between the lines inside a flexible container when the items do not use all available space

property alignItems

Sets or returns the alignment for items inside a flexible container

property alignSelf

Sets or returns the alignment for selected items inside a flexible container

property animation

shorthand property for all the animation properties below, except the animationPlayState property

property animationDelay

Sets or returns when the animation will start

property animationDirection

Sets or returns whether or not the animation should play in reverse on alternate cycles

property animationDuration

Sets or returns how many seconds or milliseconds an animation takes to complete one cycle

property animationFillMode

Sets or returns what values are applied by the animation outside the time it is executing

property animationIterationCount

Sets or returns the number of times an animation should be played

property animationName

Sets or returns a name for the @keyframes animation

property animationPlayState

Sets or returns whether the animation is running or paused

property animationTimingFunction

Sets or returns the speed curve of the animation

property backfaceVisibility

Sets or returns whether or not an element should be visible when not facing the screen

property background

Sets or returns all the background properties in one declaration

property backgroundAttachment

Sets or returns whether a background-image is fixed or scrolls with the page

property backgroundClip

Sets or returns the painting area of the background

property backgroundColor

Sets or returns the background-color of an element

property backgroundImage

Sets or returns the background-image for an element

property backgroundOrigin

Sets or returns the positioning area of the background images

property backgroundPosition

Sets or returns the starting position of a background-image

property backgroundRepeat

Sets or returns how to repeat (tile) a background-image

property backgroundSize

Sets or returns the size of the background image

property border

Sets or returns borderWidth, borderStyle, and borderColor in one declaration

property borderBottom

Sets or returns all the borderBottom properties in one declaration

property borderBottomColor

Sets or returns the color of the bottom border 1

property borderBottomLeftRadius

Sets or returns the shape of the border of the bottom-left corner

property borderBottomRightRadius

Sets or returns the shape of the border of the bottom-right corner

property borderBottomStyle

Sets or returns the style of the bottom border

property borderBottomWidth

Sets or returns the width of the bottom border

property borderCollapse

Sets or returns whether the table border should be collapsed into a single border, or not

property borderColor

Sets or returns the color of an element’s border (can have up to four values)

property borderImage

horthand property for setting or returning all the borderImage properties

property borderImageOutset

Sets or returns the amount by which the border image area extends beyond the border box

property borderImageRepeat

Sets or returns whether the image-border should be repeated, rounded or stretched

property borderImageSlice

Sets or returns the inward offsets of the image-border

property borderImageSource

Sets or returns the image to be used as a border

property borderImageWidth

Sets or returns the widths of the image-border

property borderLeft

Sets or returns all the borderLeft properties in one declaration

property borderLeftColor

Sets or returns the color of the left border

property borderLeftStyle

Sets or returns the style of the left border

property borderLeftWidth

Sets or returns the width of the left border

property borderRadius

A shorthand property for setting or returning all the four borderRadius properties

property borderRight

Sets or returns all the borderRight properties in one declaration

property borderRightColor

Sets or returns the color of the right border

property borderRightStyle

Sets or returns the style of the right border

property borderRightWidth

Sets or returns the width of the right border

property borderSpacing

Sets or returns the space between cells in a table

property borderStyle

Sets or returns the style of an element’s border (can have up to four values)

property borderTop

Sets or returns all the borderTop properties in one declaration

property borderTopColor

Sets or returns the color of the top border

property borderTopLeftRadius

Sets or returns the shape of the border of the top-left corner

property borderTopRightRadius

Sets or returns the shape of the border of the top-right corner

property borderTopStyle

Sets or returns the style of the top border

property borderTopWidth

Sets or returns the width of the top border

property borderWidth

Sets or returns the width of an element’s border (can have up to four values)

property bottom

Sets or returns the bottom position of a positioned element

property boxDecorationBreak

Sets or returns the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break.

property boxShadow

ttaches one or more drop-shadows to the box

property boxSizing

llows you to define certain elements to fit an area in a certain way

property captionSide

Sets or returns the position of the table caption

property clear

Sets or returns the position of the element relative to floating objects

property clip

Sets or returns which part of a positioned element is visible

property color

Sets or returns the color of the text

property columnCount

Sets or returns the number of columns an element should be divided into

property columnFill

Sets or returns how to fill columns

property columnGap

Sets or returns the gap between the columns

property columnRule

shorthand property for setting or returning all the columnRule properties

property columnRuleColor

Sets or returns the color of the rule between columns

property columnRuleStyle

Sets or returns the style of the rule between columns

property columnRuleWidth

Sets or returns the width of the rule between columns

property columnSpan

Sets or returns how many columns an element should span across

property columnWidth

Sets or returns the width of the columns

property columns

horthand property for setting or returning columnWidth and columnCount

property content

after pseudo-elements, to insert generated content

Type

d with the

Type

before and

property counterIncrement

Increments one or more counters

property counterReset

Creates or resets one or more counters

property cssFloat

Sets or returns the horizontal alignment of an element

property cursor

Sets or returns the type of cursor to display for the mouse pointer

property direction

Sets or returns the text direction

property display

Sets or returns an element’s display type

property emptyCells

Sets or returns whether to show the border and background of empty cells, or not

property filter

Sets or returns image filters (visual effects, like blur and saturation)

property flex

Sets or returns the length of the item, relative to the rest

property flexBasis

Sets or returns the initial length of a flexible item

property flexDirection

Sets or returns the direction of the flexible items

property flexFlow

A shorthand property for the flexDirection and the flexWrap properties

property flexGrow

Sets or returns how much the item will grow relative to the rest

property flexShrink

Sets or returns how the item will shrink relative to the rest

property flexWrap

Sets or returns whether the flexible items should wrap or not

property font

Sets or returns fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily in one declaration

property fontFamily

Sets or returns the font family for text

property fontSize

Sets or returns the font size of the text

property fontSizeAdjust

eserves the readability of text when font fallback occurs

property fontStretch

ects a normal, condensed, or expanded face from a font family

property fontStyle

Sets or returns whether the style of the font is normal, italic or oblique

property fontVariant

Sets or returns whether the font should be displayed in small capital letters

property fontWeight

Sets or returns the boldness of the font

property hangingPunctuation

ecifies whether a punctuation character may be placed outside the line box

property height

Sets or returns the height of an element

property hyphens

Sets how to split words to improve the layout of paragraphs

property icon

Provides the author the ability to style an element with an iconic equivalent

property imageOrientation

Specifies a rotation in the right or clockwise direction that a user agent applies to an image

property isolation

efines whether an element must create a new stacking content

property justifyContent

Sets or returns the alignment between the items inside a flexible container when the items do not use all available space.

property left

Sets or returns the left position of a positioned element

property letterSpacing

Sets or returns the space between characters in a text

property lineHeight

Sets or returns the distance between lines in a text

property listStyle

Sets or returns listStyleImage, listStylePosition, and listStyleType in one declaration

property listStyleImage

Sets or returns an image as the list-item marker

property listStylePosition

Sets or returns the position of the list-item marker

property listStyleType

Sets or returns the list-item marker type

property margin

Sets or returns the margins of an element (can have up to four values)

property marginBottom

Sets or returns the bottom margin of an element

property marginLeft

Sets or returns the left margin of an element

property marginRight

Sets or returns the right margin of an element

property marginTop

Sets or returns the top margin of an element

property maxHeight

Sets or returns the maximum height of an element

property maxWidth

Sets or returns the maximum width of an element

property minHeight

Sets or returns the minimum height of an element

property minWidth

Sets or returns the minimum width of an element

property navDown

Sets or returns where to navigate when using the arrow-down navigation key

property navIndex

Sets or returns the tabbing order for an element

property navLeft

Sets or returns where to navigate when using the arrow-left navigation key

property navRight

Sets or returns where to navigate when using the arrow-right navigation key

property navUp

Sets or returns where to navigate when using the arrow-up navigation key

property objectFit

pecifies how the contents of a replaced element should be fitted to the box established by its used height and width

property objectPosition

ecifies the alignment of the replaced element inside its box

property opacity

Sets or returns the opacity level for an element

property order

Sets or returns the order of the flexible item, relative to the rest

property orphans

Sets or returns the minimum number of lines for an element that must be left at the bottom of a page when a page break occurs inside an element

property outline

Sets or returns all the outline properties in one declaration

property outlineColor

Sets or returns the color of the outline around a element

property outlineOffset

ffsets an outline, and draws it beyond the border edge

property outlineStyle

Sets or returns the style of the outline around an element

property outlineWidth

Sets or returns the width of the outline around an element

property overflow

Sets or returns what to do with content that renders outside the element box

property overflowX

pecifies what to do with the left/right edges of the content, if it overflows the element’s content area

property overflowY

pecifies what to do with the top/bottom edges of the content, if it overflows the element’s content area

property padding

Sets or returns the padding of an element (can have up to four values)

property paddingBottom

Sets or returns the bottom padding of an element

property paddingLeft

Sets or returns the left padding of an element

property paddingRight

Sets or returns the right padding of an element

property paddingTop

Sets or returns the top padding of an element

property pageBreakAfter

Sets or returns the page-break behavior after an element

property pageBreakBefore

Sets or returns the page-break behavior before an element

property pageBreakInside

Sets or returns the page-break behavior inside an element

property perspective

Sets or returns the perspective on how 3D elements are viewed

property perspectiveOrigin

Sets or returns the bottom position of 3D elements

property position

Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed)

property quotes

Sets or returns the type of quotation marks for embedded quotations

property resize

Sets or returns whether or not an element is resizable by the user

property right

Sets or returns the right position of a positioned element

property tabSize

Sets or returns the length of the tab-character

property tableLayout

Sets or returns the way to lay out table cells, rows, and columns

property textAlign

Sets or returns the horizontal alignment of text

property textAlignLast

Sets or returns how the last line of a block or a line right before a forced line break is aligned when text-align is justify

property textDecoration

Sets or returns the decoration of a text

property textDecorationColor

Sets or returns the color of the text-decoration

property textDecorationLine

Sets or returns the type of line in a text-decoration

property textDecorationStyle

Sets or returns the style of the line in a text decoration

property textIndent

Sets or returns the indentation of the first line of text

property textJustify

Sets or returns the justification method used when text-align is justify

property textOverflow

Sets or returns what should happen when text overflows the containing element

property textShadow

Sets or returns the shadow effect of a text

property textTransform

Sets or returns the capitalization of a text

property top

Sets or returns the top position of a positioned element

property transform

pplies a 2D or 3D transformation to an element

property transformOrigin

Sets or returns the position of transformed elements

property transformStyle

Sets or returns how nested elements are rendered in 3D space

property transition

shorthand property for setting or returning the four transition properties

property transitionDelay

Sets or returns when the transition effect will start

property transitionDuration

Sets or returns how many seconds or milliseconds a transition effect takes to complete

property transitionProperty

Sets or returns the CSS property that the transition effect is for

property transitionTimingFunction

Sets or returns the speed curve of the transition effect

property unicodeBidi

Sets or returns whether the text should be overridden to support multiple languages in the same document

property userSelect

Sets or returns whether the text of an element can be selected or not

property verticalAlign

Sets or returns the vertical alignment of the content in an element

property visibility

Sets or returns whether an element should be visible

property whiteSpace

Sets or returns how to handle tabs, line breaks and whitespace in a text 1

property widows

Sets or returns the minimum number of lines for an element that must be visible at the top of a page

property width

Sets or returns the width of an element

property wordBreak

Sets or returns line breaking rules for non-CJK scripts

property wordSpacing

Sets or returns the spacing between words in a text

property wordWrap

Allows long, unbreakable words to be broken and wrap to the next line

property zIndex

Sets or returns the stack order of a positioned element

class domonic.style.StyleSheet

An object implementing the StyleSheet interface represents a single style sheet. CSS style sheets will further implement the more specialized CSSStyleSheet interface.

class domonic.style.StyleSheetList(iterable=(), /)

An instance of this object can be returned by Document.styleSheets. it can be iterated over in a standard for loop over its indices, or converted to an Array.

item(index)

Returns the CSSStyleSheet object at the index passed in, or null if no item exists for that index.

property length

Returns the number of CSSStyleSheet objects in the collection.