> For the complete documentation index, see [llms.txt](https://docs.allout.game/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.allout.game/ui/uidoc-html-css-support.md).

# UIDoc HTML and CSS Support

***

UIDoc intentionally implements a practical browser-like subset for game UI. It compiles assets ahead of time and renders them through the engine; it does not run a browser, JavaScript, or a live DOM.

For a working first screen, start with [UIDoc Quick Start](/ui/uidoc-quick-start.md).

## HTML and UIDoc attributes

Element names are accepted as generic layout nodes. These elements have specialized runtime behavior:

| Element  | Behavior                                   |
| -------- | ------------------------------------------ |
| `span`   | Inline text content                        |
| `img`    | Engine asset image loaded from `src`       |
| `button` | Pointer interaction and click events       |
| `input`  | Editable text bound with `data-bind-value` |

Non-empty text content creates text nodes. Use `{{name}}` for a top-level text binding and `{{item.name}}` inside a repeated list. Interpolation is also supported in class names and relevant attribute values.

| Attribute                          | Purpose                                             |
| ---------------------------------- | --------------------------------------------------- |
| `id`, `class`, `style`             | CSS matching and inline style                       |
| `src`, `width`, `height`           | Image source and dimensions                         |
| `value`, `placeholder`, `disabled` | Input and control state                             |
| `data-if="binding"`                | Conditionally include a subtree                     |
| `data-for="item in items"`         | Repeat a subtree for a CSL-bound list               |
| `data-for-key`, `data-key`         | Give repeated and interactive nodes stable identity |
| `data-bind-value="name"`           | Connect an input to a UIDoc text value              |
| `data-on-click="event:name"`       | Send a click event to the CSL callback              |
| `data-style-transform-x/y`         | Bind numeric translation without relayout           |
| `data-style-transform-scale`       | Bind numeric visual scale                           |
| `data-style-opacity`               | Bind numeric opacity                                |
| `data-scroll-zoom`                 | Bind a complete content zoom on a scroll viewport   |

Numeric style attributes contain direct expressions, for example `data-style-opacity="item.opacity"`. Text and class interpolation use braces, for example `{{item.name}}`.

`style` and `script` blocks inside the HTML are ignored with a warning. Put authored CSS in `index.css`; there is no JavaScript runtime.

## CSS selectors and cascade

Supported selectors include:

* Element names, `.class`, `#id`, and `*`.
* Descendant and direct-child (`>`) combinators.
* Comma-separated selector lists.
* `:hover`, `:focus`, `:active`, `:pressed`, `:mouse-down`, `:dragging`, `:scroll-state`, and `:disabled`.

UIDoc uses normal id/class/type specificity and source order as the tie-breaker. Inline `style` is applied last. Paint order uses `z-index`, then document order.

Layout-affecting declarations inside interaction pseudo-state rules are ignored and diagnosed. Hovering a button can safely change its color or opacity, but should not change its size or surrounding layout.

Unsupported selector forms include sibling combinators, attribute selectors, pseudo-elements, `:not()`, `:nth-*`, `:is()`, `:where()`, and `:has()`.

## CSS layout

UIDoc supports block layout, `display: flex`, and `display: none`. Its main layout properties are:

* `width`, `height`, `min-*`, `max-*`, `aspect-ratio`, and `box-sizing`.
* `margin`, `padding`, `gap`, `row-gap`, and `column-gap`.
* `flex`, `flex-direction`, `flex-wrap`, `flex-grow`, `flex-shrink`, and `flex-basis`.
* `align-items`, `align-self`, `align-content`, and `justify-content`.
* `position: static`, `absolute`, or `fixed`, with `inset`, `top`, `right`, `bottom`, and `left`.
* `overflow`, `overflow-x`, and `overflow-y` using `visible`, `hidden`, `auto`, or `scroll`.

Lengths support the relevant combinations of unitless pixels, `px`, `rem`, `em`, `%`, `vw`, `vh`, safe-area `env(...)`, and additive or subtractive `calc(...)`. Not every unit is valid for every property: notably, percent padding and margin are diagnosed and ignored, as are viewport or percent units on offsets and gaps.

`padding`, `margin`, and `inset` accept one, two, or four values. Three-value shorthand is not supported.

## Text, images, and paint

Supported presentation features include:

* `color`, `background`, and `background-color`.
* `border`, `border-width`, `border-color`, and a single `border-radius`.
* A single `box-shadow` and a single `text-shadow`.
* `opacity`, `z-index`, and `pointer-events`.
* `font-size`, `line-height`, `text-align`, `white-space`, `overflow-wrap`, and `word-break`.
* Text `outline-color` and `outline-width`.
* `object-fit: cover`, `contain`, or `fill` for images.
* `translate`, `scale`, and the `translate(...)`, `translateX(...)`, `translateY(...)`, and `scale(...)` transform subset.

Colors support common CSS forms including hex, `rgb()`/`rgba()`, `hsl()`/`hsla()`, named colors, `transparent`, and `currentColor` where applicable.

`font-weight` is parsed and inherited, but it does not currently select a different font face. CSS image URLs are not loaded by `background-image`; use an `img` with an engine asset path instead. A `linear-gradient(...)` background is flattened to its first parseable color stop.

## Responsive styles and safe areas

The supported media-query conditions are:

* `(min-width: N)` and `(max-width: N)`.
* Combined minimum and maximum width queries.
* Tailwind-style `(width >= N)` and `(width <= N)`.
* `(hover: hover)`.

Width values accept unitless pixels, `px`, and `rem`. Unsupported media blocks are dropped with a diagnostic.

Use these values where safe-area lengths are accepted:

```css
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
```

UIDoc's top safe-area inset also reserves the game's top-bar band.

## Scrolling and zooming

`overflow-x` and `overflow-y` are independent, so one viewport can scroll horizontally, vertically, or on both axes. A two-axis viewport pans both axes when dragged. The mouse wheel scrolls vertically when vertical scrolling is enabled; a horizontal-only viewport maps the wheel to horizontal scrolling.

The runtime currently draws a vertical scrollbar thumb. Horizontal content is still reachable by dragging even though a horizontal thumb is not drawn.

`data-scroll-zoom="zoomBinding"` adds browser-like content zoom to an interactive scroll viewport. It scales descendant geometry, text, images, transforms, hit testing, and scroll extents while the viewport and its siblings remain fixed. When the binding changes, the engine preserves the viewed area around the viewport center and reclamps the scroll position.

## Tailwind-style classes

UIDoc assets can use supported Tailwind-style utility classes and responsive or interaction variants. Utilities are resolved and lowered into UIDoc's CSS subset during asset processing; Tailwind is not running in the game.

Only utilities that can be represented by the supported properties and selectors are available. Treat an asset-processing diagnostic as the source of truth for an unsupported utility.

## Notable browser features not supported

| Browser feature                                                          | UIDoc approach                                                                  |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
| JavaScript and DOM APIs                                                  | Drive state with CSL bindings, `data-if`, `data-for`, and event callbacks.      |
| CSS Grid                                                                 | Use flexbox, block layout, or explicit positioning.                             |
| CSS variables and custom properties                                      | Bind values from CSL or use ordinary shared classes.                            |
| Transitions, keyframes, and CSS animations                               | Animate CSL bindings such as opacity, translation, scale, or scroll zoom.       |
| Pseudo-elements and advanced selectors                                   | Add explicit elements and classes to the document.                              |
| Container queries and most media features                                | Use the supported viewport-width and hover queries.                             |
| Full gradients and CSS background images                                 | Use a solid color or an `img` engine asset.                                     |
| Multiple shadows, border radii, or backgrounds                           | Use the supported single-value form or explicit nested elements.                |
| Rotate, skew, 3D transforms, filters, and backdrop filters               | Prepare the visual as an asset or use supported translate/scale effects.        |
| Web forms, navigation, fetch, iframes, canvas, SVG DOM, audio, and video | Use CSL and the corresponding engine systems.                                   |
| Browser semantic and accessibility behavior                              | UIDoc elements are game UI nodes; HTML tag names do not imply browser behavior. |

UIDoc aims to make common game UI easy to author, not to reproduce every HTML and CSS feature. Keep layout within this subset so assets bake predictably and client/server UI simulation stays deterministic.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.allout.game/ui/uidoc-html-css-support.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.