150 commands · 9 cheat sheets · CSS
Responsive and Interface master quick reference
Browse 150 commands from 9 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Responsive and Interface · 22 commands
CSS Environment Variables, Safe Areas, and Viewport Segments Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Opt into edge-to-edge rendering | <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | View examples |
| Protect all four viewport edges | .shell {
padding:
env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
} | View examples |
| Preserve design spacing | .shell {
padding-top: max(1rem, env(safe-area-inset-top, 0px));
} | View examples |
| Supply an undefined-variable fallback | .toolbar { bottom: env(keyboard-inset-height, 0px); } | View examples |
| Fallback after segment indices | .pane {
inline-size: env(viewport-segment-width 0 0, 100vw);
} | View examples |
| Chain environment fallbacks | .dock {
bottom:
env(keyboard-inset-height, env(safe-area-inset-bottom, 0px));
} | View examples |
| Keep a declaration-level fallback | .shell {
padding-bottom: 1rem;
padding-bottom:
max(1rem, env(safe-area-inset-bottom, 0px));
} | View examples |
| Follow the current safe edge | .bottom-bar {
padding-bottom:
max(0.75rem, env(safe-area-inset-bottom, 0px));
} | View examples |
| Reserve the maximum safe inset | .stable-panel {
padding-bottom: env(safe-area-max-inset-bottom, 0px);
} | View examples |
| Lift a fixed action from the edge | .fab {
bottom: max(1rem, env(safe-area-inset-bottom, 0px));
right: max(1rem, env(safe-area-inset-right, 0px));
} | View examples |
| Declare keyboard overlay behavior | <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=overlays-content"> | View examples |
| Clear an overlaid keyboard | .composer { bottom: env(keyboard-inset-height, 0px); } | View examples |
| Preserve focused-field scroll space | .messages {
scroll-padding-bottom:
calc(5rem + env(keyboard-inset-height, 0px));
} | View examples |
| Fit an installed app title bar | .titlebar {
left: env(titlebar-area-x, 0px);
width: env(titlebar-area-width, 100%);
height: env(titlebar-area-height, 3rem);
} | View examples |
| Target window-controls-overlay mode | @media (display-mode: window-controls-overlay) {
.titlebar { display: flex; };
} | View examples |
| Detect side-by-side segments | @media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
.workspace { display: grid; };
} | View examples |
| Size both viewport panes | .workspace {
grid-template-columns:
env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
} | View examples |
| Measure the hinge gap | .workspace {
column-gap:
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
} | View examples |
| Keep device insets physical | .shell {
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
} | View examples |
| Remap a logical start token for RTL | :root:dir(rtl) {
--safe-inline-start: env(safe-area-inset-right, 0px);
} | View examples |
| Keep browser zoom available | <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | View examples |
| Track the dynamic viewport | .screen { min-height: 100vh; min-height: 100dvh; } | View examples |
Responsive and Interface · 19 commands
CSS Highlight Pseudo-elements and Custom Highlights Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Style selected text | ::selection { color: #fff; background-color: #1d4ed8; } | View examples |
| Scope selection styling | .editor::selection {
background-color: #facc15;
color: #172033;
} | View examples |
| Style spelling errors | ::spelling-error {
text-decoration: wavy underline #dc2626;
} | View examples |
| Style grammar errors | ::grammar-error {
text-decoration: wavy underline #2563eb;
} | View examples |
| Style find-in-page matches | ::search-text {
background-color: #fde68a;
color: #172033;
} | View examples |
| Style a text fragment | ::target-text {
background-color: #bbf7d0;
color: #172033;
} | View examples |
| Style a named highlight | ::highlight(search-match) {
background-color: #fde68a;
color: #172033;
} | View examples |
| Create a text range | const range = new Range(); range.setStart(text, 0); range.setEnd(text, 6); | View examples |
| Register a named highlight | CSS.highlights.set("search-match", new Highlight(range)); | View examples |
| Remove one highlight | CSS.highlights.delete("search-match"); | View examples |
| Clear the registry | CSS.highlights.clear(); | View examples |
| Add another range | highlight.add(nextRange); | View examples |
| Remove one range | highlight.delete(range); | View examples |
| Create immutable boundaries | new StaticRange( {
startContainer:
text, startOffset: 0, endContainer: text, endOffset: 6;
} | View examples |
| Set overlap priority | highlight.priority = 10; | View examples |
| Declare semantic highlight type | highlight.type = "spelling-error"; | View examples |
| Detect the registry | if ("highlights" in CSS && "Highlight" in window) {
enableHighlights();
} | View examples |
| Use system highlight colors | @media (forced-colors: active) {
::highlight(search-match) { color: HighlightText; background-color: Highlight; };
} | View examples |
| Use interoperable highlight paint | ::highlight(search-match) {
color: #172033;
background-color: #fde68a;
text-decoration: underline;
} | View examples |
Responsive and Interface · 17 commands
CSS Media Queries Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Enhance wider viewports | @media (min-width: 48rem) {
.layout { grid-template-columns: 16rem 1fr; };
} | View examples |
| Adapt narrow viewports | @media (max-width: 40rem) {
.toolbar { flex-direction: column; };
} | View examples |
| Target a width range | @media (30rem <= width < 60rem) {
.cards { grid-template-columns: repeat(2, 1fr); };
} | View examples |
| Check orientation | @media (orientation: landscape) {
.gallery { grid-auto-flow: column; };
} | View examples |
| Enhance hover input | @media (hover: hover) {
.card:hover { box-shadow: 0 0.5rem 1rem #0003; };
} | View examples |
| Enlarge coarse targets | @media (pointer: coarse) {
.button { min-block-size: 3rem; };
} | View examples |
| Detect any hover input | @media (any-hover: hover) {
.tooltip-help { display: inline-block; };
} | View examples |
| Reduce nonessential motion | @media (prefers-reduced-motion: reduce) {
.animated { animation: none; scroll-behavior: auto; };
} | View examples |
| Honor dark preference | @media (prefers-color-scheme: dark) {
:root { color-scheme: dark; };
} | View examples |
| Increase contrast | @media (prefers-contrast: more) {
.card { border-width: 2px; };
} | View examples |
| Support forced colors | @media (forced-colors: active) {
.status { border-color: currentColor; };
} | View examples |
| Create print styles | @media print { nav, .actions { display: none; } } | View examples |
| Target high resolution | @media (min-resolution: 2dppx) {
.logo { background-image: url(logo@2x.png); };
} | View examples |
| Require both conditions | @media (min-width: 60rem) and (hover: hover) {
.menu { display: flex; };
} | View examples |
| Accept either query | @media (orientation: portrait), (max-width: 35rem) {
.sidebar { display: none; };
} | View examples |
| Negate a query | @media not print { .print-only { display: none; } } | View examples |
| Write the base style first | .cards {
grid-template-columns: 1fr;
} @media (min-width:
36rem) { .cards { grid-template-columns: repeat(2, 1fr); };
} | View examples |
Responsive and Interface · 14 commands
CSS Overflow, Clipping, Scrolling, and Resizing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Set overflow by logical axis | .panel { overflow-block: auto; overflow-inline: clip; } | View examples |
| Scroll only when needed | .results { max-block-size: 24rem; overflow: auto; } | View examples |
| Extend the clip edge | .art { overflow: clip; overflow-clip-margin: 1rem; } | View examples |
| Hide visual scrollbars | .viewport { overflow: hidden; } | View examples |
| Reserve scrollbar space | .feed { overflow: auto; scrollbar-gutter: stable; } | View examples |
| Contain scroll chaining | .dialog__body { overscroll-behavior: contain; } | View examples |
| Opt out of scroll anchoring | .live-region { overflow-anchor: none; } | View examples |
| Ellipsize one line | .label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} | View examples |
| Break emergency text | .message { overflow-wrap: anywhere; } | View examples |
| Clamp a text block | .summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
} | View examples |
| Allow two-axis resizing | .workspace { resize: both; overflow: auto; } | View examples |
| Resize in the inline axis | .sidebar {
resize: inline;
overflow: auto;
min-inline-size: 12rem;
} | View examples |
| Label a focusable region | <section tabindex="0" role="region" aria-label="Build log"> | View examples |
| Expose scroller focus | .log:focus-visible {
outline: 3px solid CanvasText;
outline-offset: 2px;
} | View examples |
Responsive and Interface · 13 commands
CSS Print and Paged Media Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Target print output | @media print { nav, .toolbar { display: none; } } | View examples |
| Request paper size | @page { size: A4; } | View examples |
| Set page margins | @page { margin: 18mm; } | View examples |
| Assign a named page | .landscape-table { page: wide; } | View examples |
| Landscape named page | @page wide { size: A4 landscape; } | View examples |
| Start on a new page | h1.chapter { break-before: page; } | View examples |
| Keep a block together | figure, table { break-inside: avoid; } | View examples |
| Keep ending lines together | p { orphans: 3; widows: 3; } | View examples |
| Expose external URLs | a[href^="http"]::after { content: " (" attr(href) ")"; } | View examples |
| Request exact colors | .chart { print-color-adjust: exact; } | View examples |
| Use physical page units | @page { margin: 15mm 18mm; } | View examples |
| Repeat table headings | thead { display: table-header-group; } | View examples |
| Expose abbreviation title | abbr[title]::after { content: " (" attr(title) ")"; } | View examples |
Responsive and Interface · 18 commands
CSS Scope and Shadow Parts Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create a scope | @scope (.card) { h2 { color: var(--heading-color); } } | View examples |
| Stop before nested regions | @scope (.article) to (.comments) {
a { text-decoration-thickness: .12em; };
} | View examples |
| Select the scoping root | @scope (.notice) {
:scope { border-inline-start: .25rem solid; };
} | View examples |
| Relate content to the root | @scope (.menu) { :scope > a { display: block; } } | View examples |
| Prefer the nearest scope | @scope (.theme) { p { color: var(--text); } } | View examples |
| Keep a selector fallback | .profile .name { color: #17324d; } | View examples |
| Style the shadow host | :host {
display: block;
color: var(--profile-color, #172033);
} | View examples |
| Match a host state | :host([variant='compact']) { font-size: .875rem; } | View examples |
| Style assigned elements | ::slotted(a) { color: var(--profile-link, #075985); } | View examples |
| Expose a shadow part | <button part="control">Save</button> | View examples |
| Style an exposed part | save-button::part(control) { border-radius: .5rem; } | View examples |
| Assign multiple part names | <span part="label emphasized">Important</span> | View examples |
| Style a part interaction | save-button::part(control):focus-visible {
outline: 3px solid #f59e0b;
} | View examples |
| Forward a nested part | <icon-button exportparts="control"></icon-button> | View examples |
| Rename a forwarded part | <icon-button exportparts="control:
action"></icon-button> | View examples |
| Offer a theme token | status-chip { --status-accent: #0f766e; } | View examples |
| Preserve system colors | @media (forced-colors: active) {
status-chip::part(icon) { color: ButtonText; };
} | View examples |
| Contain independent layout | :host { contain: layout paint; } | View examples |
Responsive and Interface · 18 commands
CSS Scrollbar Styling Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use platform scrollbar colors | .panel { scrollbar-color: auto; } | View examples |
| Set thumb then track | .panel { scrollbar-color: #475569 #e2e8f0; } | View examples |
| Use platform thickness | .panel { scrollbar-width: auto; } | View examples |
| Request a thinner scrollbar | .compact { scrollbar-width: thin; } | View examples |
| Hide scrollbar chrome | .carousel { scrollbar-width: none; } | View examples |
| Style viewport scrollbars | :root { scrollbar-color: #475569 #f8fafc; } | View examples |
| Reserve scrollbar space | .shell { scrollbar-gutter: stable; } | View examples |
| Balance both gutter edges | .reader { scrollbar-gutter: stable both-edges; } | View examples |
| Create a scroll container | .panel { max-block-size: 20rem; overflow: auto; } | View examples |
| Make a region focusable | <div class="panel" tabindex="0" role="region" aria-label="Build log"> | View examples |
| Offer explicit scroll controls | button.addEventListener("click", () => panel.scrollBy( {
left: 240, behavior: "smooth";
} | View examples |
| Preserve touch panning | .carousel { touch-action: pan-x; overflow-x: auto; } | View examples |
| Adapt native UI to schemes | :root { color-scheme: light dark; } | View examples |
| Restore system scrollbar colors | @media (forced-colors: active) {
.panel { scrollbar-color: auto; };
} | View examples |
| Use a scoped legacy thumb | .panel::-webkit-scrollbar-thumb { background: #475569; } | View examples |
| Use a scoped legacy track | .panel::-webkit-scrollbar-track { background: #e2e8f0; } | View examples |
| Prefer standard styling | @supports (scrollbar-color: auto) {
.panel { scrollbar-color: #475569 #e2e8f0; };
} | View examples |
| Remove smooth scrolling | @media (prefers-reduced-motion: reduce) {
.panel { scroll-behavior: auto; };
} | View examples |
Responsive and Interface · 12 commands
CSS Scrolling, Scroll Snap, and Overscroll Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create vertical scrolling | .panel { max-block-size: 24rem; overflow-y: auto; } | View examples |
| Reserve scrollbar space | .panel { scrollbar-gutter: stable; } | View examples |
| Smooth programmatic scroll | html { scroll-behavior: smooth; } | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; };
} | View examples |
| Enable proximity snap | .carousel { scroll-snap-type: inline proximity; } | View examples |
| Align a snap target | .slide { scroll-snap-align: start; } | View examples |
| Require a stop | .critical-step { scroll-snap-stop: always; } | View examples |
| Offset the scrollport | html { scroll-padding-block-start: 5rem; } | View examples |
| Offset one target | section { scroll-margin-block-start: 5rem; } | View examples |
| Contain scroll chaining | .modal-body { overscroll-behavior: contain; } | View examples |
| Suppress boundary effects | .canvas { overscroll-behavior: none; } | View examples |
| Stable target link | <a href="#installation">Installation</a> | View examples |
Responsive and Interface · 17 commands
CSS User Interface and Form Controls Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Set the control accent | :root { accent-color: #2563eb; } | View examples |
| Declare supported schemes | :root { color-scheme: light dark; } | View examples |
| Keep native appearance | select { appearance: auto; } | View examples |
| Remove native appearance | .custom-check { appearance: none; } | View examples |
| Restore checked state | .custom-check:checked { background: currentColor; } | View examples |
| Show keyboard focus | :focus-visible {
outline: 3px solid CanvasText;
outline-offset: 3px;
} | View examples |
| Color the insertion caret | input, textarea { caret-color: #2563eb; } | View examples |
| Signal link activation | a[href] { cursor: pointer; } | View examples |
| Signal unavailable action | button:disabled { cursor: not-allowed; } | View examples |
| Use an image cursor safely | .pan { cursor: url('/cursors/grab.cur') 8 8, grab; } | View examples |
| Resize in the block axis | textarea { resize: block; overflow: auto; } | View examples |
| Resize both dimensions | .editor { resize: both; overflow: auto; } | View examples |
| Select a token atomically | .copy-token { user-select: all; } | View examples |
| Avoid accidental selection | .drag-handle { user-select: none; } | View examples |
| Ignore decorative hit testing | .button-icon { pointer-events: none; } | View examples |
| Adapt in forced colors | @media (forced-colors: active) {
.status { border-color: CanvasText; };
} | View examples |
| Preserve essential color | .color-swatch { forced-color-adjust: none; } | View examples |