How to use it
Use the capability reference to check individual properties and values. Flex, Grid, normal flow, tables and positioning have distinct constraints. A property declaration does not guarantee browser-equivalent behavior in every combination.
Integration and limits
Make box dimensions, font resources and scroll containers explicit. During debugging, inspect computed styles before box geometry, parent dimensions and overflow. Check multicolumn, CSS Shapes and Subgrid against build defaults and scope documentation.
Layout code in the project
The settings page uses Flex to divide the sidebar and workspace, changing direction at narrow widths. This is the same stylesheet shipped in the course project; run it to check behavior.
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; background: #f5f7fa; color: #202936; }
.app { display: flex; min-height: 100vh; }
.sidebar { width: 184px; flex-shrink: 0; background: #fafbfc; border-right: 1px solid #e2e7ee; padding: 24px 14px; }
.wordmark { font-size: 19px; font-weight: 700; margin: 0 10px 32px; }
.sidebar-label { font-size: 11px; color: #6c788a; margin: 0 10px 10px; }
.nav-item { padding: 9px 12px; font-size: 13px; line-height: 1.4; margin-bottom: 4px; border-radius: 5px; color: #536174; }
.active { background: #e9f0ff; color: #235bcd; font-weight: 600; }
.workspace { flex: 1; min-width: 0; padding: 20px 28px; }
.topline { display: flex; justify-content: space-between; font-size: 11px; color: #6c788a; padding-bottom: 12px; border-bottom: 1px solid #e2e7ee; }
h1 { font-size: 25px; line-height: 1.3; margin-top: 18px; margin-bottom: 7px; }
.intro { font-size: 13px; line-height: 1.6; color: #637084; margin-bottom: 18px; }
.panel { padding: 16px 20px; background: #ffffff; border: 1px solid #dfe5ed; border-radius: 7px; margin-bottom: 14px; }
.panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.panel-note { font-size: 12px; line-height: 1.6; color: #6c788a; margin-bottom: 16px; }
.field { margin-bottom: 16px; }
label { font-size: 13px; display: block; margin-bottom: 6px; }
input[type=text] { width: 100%; padding: 8px 10px; font-size: 14px; color: #202936; background: #fff; border: 1px solid #bbc6d5; border-radius: 4px; }
input:focus { outline: 2px solid #4379df; outline-offset: 2px; }
input[aria-invalid=true] { border-color: #a93828; }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 13px; min-height: 24px; }
.checkbox-row label { margin-bottom: 0; }
.details { display: flex; gap: 20px; }
.detail { flex: 1; border-top: 1px solid #e8ecf2; padding-top: 12px; }
.detail p { font-size: 11px; color: #6c788a; margin-bottom: 5px; }
.detail strong { font-size: 13px; font-weight: 600; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
button { padding: 8px 18px; font-size: 13px; background: #2864d7; color: #fff; border: 1px solid #2864d7; border-radius: 4px; cursor: pointer; }
button:hover { background: #1e53ba; border-color: #1e53ba; }
button:active { background: #19469e; }
button:focus { outline: 2px solid #4379df; outline-offset: 3px; }
button.secondary { background: #fff; color: #43536b; border-color: #cbd4e0; }
button.secondary:hover { background: #edf2f9; border-color: #abbad0; }
.status { margin-top: 12px; min-height: 34px; padding: 8px 12px; font-size: 12px; line-height: 1.5; background: #edf1f6; border-radius: 4px; color: #58677d; }
.status[data-state=success] { color: #2855a2; background: #eaf1ff; }
.status[data-state=error] { color: #a33434; background: #fff0ef; }
@media(max-width: 760px) {
.sidebar { width: 152px; padding: 20px 10px; }
.wordmark { font-size: 17px; }
.workspace { padding: 18px; }
.panel { padding: 16px; }
.details { flex-direction: column; gap: 12px; }
}
@media(max-width: 560px) {
.app { flex-direction: column; }
.sidebar { width: 100%; padding: 14px 18px; }
.wordmark { margin: 0; }
.sidebar-label, .nav-item { display: none; }
.workspace { padding: 18px; }
.actions { flex-wrap: wrap; }
}
Bundled and system fonts
@font-face can use local and url sources. When the system font is unavailable, use the font shipped with the application. Resolve relative paths according to the page-loading method; loadHTML applications can use a controlled absolute path or an explicit resource-loading scheme.
@font-face {
font-family: "AppMono";
src: local("Consolas"), url("fonts/app-mono.woff2") format("woff2");
}
code { font-family: "AppMono", monospace; }Font-loading behavior
The current SDK loads @font-face synchronously. font-display values are parsed and stored without the browser-style asynchronous FOUT/FOIT differences. Parsing unicode-range does not establish code-point-level font matching.
Build a stable layout from a blank page
Start with structure so each layout problem has a smaller search area.
- Separate title bar, navigation, content and status areas; give major containers IDs.
- Define outer height and scroll ownership, then distribute space with Flex or Grid.
- Use min-width:0 for shrinking content and check min-height:0 on scrolling Flex children.
- Add type, color, borders and states, then inspect wide and minimum-size windows.
Common layout symptoms
Use the symptom to narrow the cause before editing.
| Symptom | Check and action |
|---|---|
| Content pushes beyond the window | Inspect fixed widths, long text and min-width; avoid duplicate padding on the main area. |
| No scrollbar | Constrain the scrolling container’s height before checking overflow. |
| Style seems ignored | Inspect selector matches, computed styles and dimensions in DevTools, then check support for the exact property value. |
Control a theme with a small token set
Centralize background, text, border, accent and spacing values. Use classes or data attributes for interaction states instead of repeating inline styles. Keep structure consistent across themes for comparison.
:root { --surface: #f5f7fa; --ink: #1d2939; --line: #d9e1ec; --accent: #2563eb; }
.panel { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 16px; }
.panel[data-state="error"] { border-color: #bb3348; }Something unclear?
Report an issue on this page →