Supported CSS

Union uses a CSS parser that implements most of CSS Level 3 syntax, along with some extensions.

Supported Selectors

Most of the basic selectors are supported:

• Element type: element-type. Note that matching is case-insensitive.
• Element ID: #element-id.
• Class: .hint. These are converted to what Union calls "hints", but work the same way.
• Pseudo-class: :hovered. Pseudo-classes are interpreted as states, which means that the following pseudo-classes are available:
  • hovered
  • active-focus
  • visual-focus
  • pressed
  • checked
  • disabled
  • highlighted
• Attribute Exists: [attribute].
• Attribute Equals: [attribute=value].
• Attribute Contains [attribute~=value].
• Universal: *.

In addition, the :root selector is supported as a way of declaring variables, but does not actually match any element.

Supported Combinators

At the moment, only the descendant (element descendant) and child (element > child) combinators are supported. Other combinators may be supported in the future but require implementation.

Properties

Union uses a different data model from that used by HTML/the web. This means that not all properties known from web CSS are supported by Union, and Union adds several other properties that have no equivalent to web properties. Some effort is made to map Union properties to more familiar web properties, but this will necessarily not be a one-to-one mapping.

For a detailed overview of supported properties and their effects see CSS Properties.

Custom Properties

Custom properties are supported and can be created in two ways. The first way is to prefix the property with -- and declaring it in any rule. Note that these are currently not scoped so a custom property declared in a rule for a specific element will be available for all other properties that are declared after the initial declaration.

The second way is to declare a property at the top level using @property syntax. This syntax allows for specifying additional information about a property, most importantly it allows specifying a syntax for values of the property.

Note that using @property allows creating custom properties that do not need to start with --. It is however recommended to not make use of this, as it is used by Union itself to define properties which may end up conflicting with any custom properties you have declared.

Union also supports an extended syntax for the property syntax declaration.

Common CSS That is Currently Unsupported

The following common CSS constructs are currently unsupported, but are planned to be supported in future releases:

• Units other than px. In some places these are already somewhat supported but may not work exactly the way you expect it to.
• Property inheritance.
• @media queries.
• Multiple background declarations.
• :first-child and :last-child pseudo selectors.
• visibility property.
• calc() for property values.
• Transitions and animations.

The following common CSS constructs are currently unsupported and not planned to be supported:

• position and related properties. Most of the positioning of controls is done by applications themselves without Union being able to influence it. For sub-controls, Union uses a custom layout that is designed to be flexible but also allow a fair amount of control.
• Flexbox or Grid layouts. Similar to positioning, most of the layouting is done by the application outside of Union's control. The sub-control layout used by Union is loosely based on Flexbox, however.
• display and related properties. Applications, and by extension Union, don't work with the same model as used by HTML. Therefore, the distinction between block and inline elements does not exist. Neither do many of the other contexts that the display property is used for.
• width and height as anything more than initial size hints. Like positions, Union is not in control of most layouting done by an application. This includes sizing controls. The size specified using the width and height properties is used as an initial size hint, but the application can always ignore it.