+ +
+

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

+
+

domonic.style

+
+
+class domonic.style.CSSRule[source]
+

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

+

CSSStyleRule +CSSImportRule +CSSMediaRule +CSSFontFaceRule +CSSPageRule +CSSNamespaceRule +CSSKeyframesRule +CSSKeyframeRule +CSSCounterStyleRule +CSSDocumentRule +CSSSupportsRule +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

+
+
+
+ +
+
+property parentRule
+

Returns the containing rule, otherwise null. E.g. if this rule is a style rule inside an @media block, +the parent rule would be that CSSMediaRule.

+
+ +
+
+parentStyleSheet()[source]
+

Returns the CSSStyleSheet object for the style sheet that contains this rule

+
+ +
+
+type()[source]
+

Returns one of the Type constants to determine which type of rule is represented.

+
+ +
+ +
+
+class domonic.style.CSSRuleList[source]
+

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()[source]
+

Gets a single CSSRule.

+
+ +
+
+length()[source]
+

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

+
+ +
+ +
+
+class domonic.style.CSSStyleDeclaration(parentNode=None, *args, **kwargs)[source]
+

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.

+
+
+property cssText
+

Textual representation of the declaration block, if and only if it is exposed via HTMLElement.style. +Setting this attribute changes the inline style. +If you want a text representation of a computed declaration block, +you can get it with JSON.stringify().

+
+ +
+
+getPropertyCSSValue()[source]
+

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

+
+ +
+
+getPropertyPriority()[source]
+

Returns the optional priority, “important”.

+
+ +
+
+getPropertyValue()[source]
+

Returns the property value given a property name.

+
+ +
+
+item()[source]
+

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.

+
+ +
+
+property parentRule
+

The containing CSSRule.

+
+ +
+
+removeProperty()[source]
+

Removes a property from the CSS declaration block.

+
+ +
+ +
+
+class domonic.style.CSSStyleSheet[source]
+

Creates a new CSSStyleSheet object.

+
+
+addRule()[source]
+

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.

+
+ +
+
+property cssRules
+

Returns a live CSSRuleList which maintains an up-to-date list of the CSSRule objects +that comprise the stylesheet.

+
+ +
+
+deleteRule()[source]
+

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

+
+ +
+
+insertRule()[source]
+

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

+
+ +
+
+property ownerRule
+

If this stylesheet is imported into the document using an @import rule, +the ownerRule property returns the corresponding CSSImportRule; otherwise, this property’s value is null.

+
+ +
+
+removeRule()[source]
+

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

+
+ +
+
+replace()[source]
+

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

+
+ +
+
+replaceSync()[source]
+

Synchronously replaces the content of the stylesheet.

+
+ +
+
+property rules
+

The rules property is functionally identical to the standard cssRules property +it returns a live CSSRuleList which maintains an up-to-date list of all of the rules in the style sheet.

+
+ +
+ +
+
+class domonic.style.Style(parent_node=None)[source]
+

[ 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[source]
+

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

+
+
+property href
+

Returns a DOMString representing the location of the stylesheet.

+
+ +
+
+property media
+

Returns a MediaList representing the intended destination medium for style information.

+
+ +
+
+property ownerNode
+

Returns a Node associating this style sheet with the current document.

+
+ +
+
+property parentStyleSheet
+

Returns a StyleSheet including this one, if any; returns null if there aren’t any.

+
+ +
+
+property title
+

Returns a DOMString representing the advisory title of the current style sheet.

+
+ +
+
+property type
+

Returns a DOMString representing the style sheet language for this style sheet.

+
+ +
+ +
+
+class domonic.style.StyleSheetList[source]
+

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)[source]
+

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.

+
+ +
+ +
+
+
+ + +