Styling with CSS

Styling with CSS

SpinyGUI uses CSS-inspired stylesheets over a DOM-like tree. Styles may be added to a frame with addStyleSheet(...), attached to a frame's stylesheet list, or set inline on an element. The pipeline resolves style before layout and rendering.

frame().addChild(div(Map.of("class", "notice"), text("Saved")));
addStyleSheet("""
    winframe { background-color: #f8fafc; padding: 24px; }
    .notice { background-color: #dcfce7; color: #166534; padding: 12px; }
    """);

Supported features are deliberately bounded

The project supports a selected set of CSS properties and CSS-like behavior; it does not claim full browser compatibility. The authoritative, branch-specific property checklist is CSS property support.

Current documentation covers these important boundaries:

• block, flex, inline, and an in-progress bounded Grid formatting context;
• scroll containers using overflow, overflow-x, and overflow-y;
• bounded static 2D transforms;
• paint-only CSS transitions for a selected property set;
• bounded scrollbar pseudo-element styling; and
• @font-face parsing and font-family resolution.

For a user-focused explanation and examples of scroll containers and the painted scrollbar subset, see Scrolling and Scrollbars.

For a deep dive, use the source feature guides:

• Scrollable overflow containers
• Scrollbar support
• Font-family resolution

Avoid a common assumption

The parser can recognize more browser syntax than the current semantic model and renderers implement. Before depending on a property, verify that it is documented as supported and that its stated layout, rendering, input, and fallback behavior meets your need. Unsupported or deferred CSS is intentionally not a promise of future compatibility.