Web64 Developer Docs

Build compact websites for a browser running directly on Nintendo 64 hardware.

CSS64

CSS64 supports external stylesheets, embedded <style> blocks, and inline style attributes. Rules are parsed once and used by the N64 layout and renderer.

Selectors and cascade

Element

p, h1, div, and other supported HTML64 types. Specificity 1.

Class

.panel. Specificity 10.

#site-logo. Specificity 100.

Selector lists

Up to eight selectors can share a declaration block.

Higher specificity wins. When specificity is equal, the later declaration wins. Inline styles are applied after stylesheet rules.

Length units and sizing

pxemvwvh%auto

Where a property accepts a length, CSS64 can use pixels, font-relative em, viewport-width vw, and viewport-height vh values. Percentage and auto support depends on the property.

.panel {
  width: 80vw;
  height: 25vh;
  padding: 0.75em;
  max-width: 560px;
}

Sizing

width
height
min-width
max-width

Spacing

margin
margin-top/right/bottom/left
padding
padding-top/right/bottom/left

Display

inline
inline-block
block
vertical-align

Colors, text, and opacity

Hex colors

#RGB, #RGBA, #RRGGBB, and #RRGGBBAA.

RGB colors

rgb() and rgba() with numeric or percentage channels.

Named colors

black, white, red, green, blue, yellow, gray/grey, transparent, and currentcolor where supported.

Text

color, font-family, font-size, text-align, line-height, and vertical-align.

Opacity

Use a value from 0 through 1.

1.00.70.40.15

color: #f80;
background-color: rgba(32, 64, 96, 0.8);
opacity: 0.7;

Backgrounds

Properties

background, background-color, background-image, background-repeat, background-size, and background-position.

Repeat

repeat, repeat-x, repeat-y, and no-repeat.

Size

auto, cover, contain, pixels, percentages, one-value, and two-value forms.

Position

Keywords, pixels, percentages, one-value, and two-value forms.

Repeated background

.panel {
  background: #dcecff;
  background-image: url("images/background2.sprite");
  background-repeat: repeat;
  background-size: 32px 32px;
}

Borders and rounded corners

dotted

dashed

solid

double

groove

ridge

inset

outset

radius

Supported border styles are none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. Border radius supports shorthand and individual corners, but it requires additional rendering memory. Use it sparingly on N64 pages, especially for repeated containers.

.small-badge {
  border-radius: 8px;
}

Shadows and outlines

outer shadow

inset shadow

outline

box-shadow

Offsets, blur, spread, colors, inset shadows, multiple shadows, and none.

outline

outline, width, style, color, and offset.

Positioning and cursor

position

static, relative, absolute, and fixed.

Offsets

top, right, bottom, and left with positive or negative lengths, zero, or auto.

Stacking

z-index accepts a signed integer or auto.

Cursor

auto, default, and pointer.

Standard CSS block comments are accepted and ignored.