← All Workshops
MudEngine Part 10: Desktop with Blitz
Step 8 / 12
CSS in Blitz
Your existing assets/main.css works with Blitz — the document::Stylesheet component injects it into the head, and Stylo parses it.
However, not all CSS properties are implemented. Here's what you can expect:
✅ Supported
- Color, background-color
- Font-size, font-family, font-weight
- Padding, margin, border (basic)
- Display: flex, grid, block, inline, none
- Flexbox (gap, flex-direction, justify-content, align-items)
- CSS Grid (grid-template-columns, grid-template-rows, gap)
- Width, height, min-width, max-width, min-height, max-height
- Position: relative, absolute, fixed (basic)
- Overflow: hidden, auto, scroll
- Cursor: pointer, default
- Opacity
- Z-index
⬜ Partial support
- Border-radius — works but may not apply to all elements
- Linear-gradient — may render as solid fallback colour
- Box-shadow — works in some configurations, missing in others
- Text-shadow — similar partial support
❌ Not yet supported
- CSS animations /
@keyframes - CSS transitions
filterproperties (brightness, blur, etc.)transform(scale, rotate, translate)::before/::afterpseudo-elements@mediaqueries
For the MUD, the grid layout, sidebar, buttons, and input fields will all render correctly because they use Flexbox and CSS Grid. The hover glow effects and animations from previous parts may not work — but the game remains fully playable.
Style separation
Unlike the WebView, Blitz doesn't use the browser's CSS engine. Your CSS is parsed by Stylo — the same engine that powers Firefox's developer tools. This means CSS-in-JS approaches won't work, but regular stylesheets and inline styles do.
Step 8 / 12