Field Guide

Web Platform Field Guide

A tour of what plain HTML and CSS can do, with a little JavaScript: five pages, each a document of its own, with no framework and no build-time templating. Pick a page, or read on for the text elements every page relies on.

Text

Inline elements: strong, emphasis, marked text, inline code, Ctrl+C, sample output, CSS, a definition, H2O, E = mc2, removed and inserted text, small print, a short quotation, , and a link to MDN.

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

— HTML Design Principles

Ordered

  1. Parse the markup
  2. Apply the styles
    1. Cascade
    2. Inherit
  3. Lay out and paint

Unordered

  • Semantic elements
  • Accessible names
  • Progressive enhancement

Description

DOM
The document as a tree of nodes.
CSSOM
The styles, as objects.
example.css 
.card:has(input:checked) {
  outline: 2px solid var(--accent);
}

@container (min-width: 28rem) {
  .card { grid-template-columns: 6rem 1fr; }
}

Written for the three-html-panel examples.

Shown in a panel

These pages also run inside a 3D scene, as panels drawn by three-html-panel. A few things the browser draws outside the page do not show there; each page lists its own.

In a panel: links to the other pages open in the panel when the scene allows it; other links open in a new tab. The theme you choose goes along with the links, since a sandboxed page has no storage.