771 commands · 48 cheat sheets · 6 subcategories
CSS master quick reference — Page 4
Browse 195 commands from 12 focused cheat sheets on page 4 of 4. Each example opens its matching detailed section.
Motion and Transitions · 11 commands
CSS Transforms and Coordinate Systems Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Translate | .item { transform: translate(1rem, -0.5rem); } | View examples |
| Rotate | .item { transform: rotate(8deg); } | View examples |
| Scale | .item { transform: scale(1.05); } | View examples |
| Use individual properties | .item { translate: 1rem 0; rotate: 5deg; scale: 1.1; } | View examples |
| Compose functions | .item { transform: translateX(2rem) rotate(10deg); } | View examples |
| Move the origin | .door { transform-origin: left center; } | View examples |
| Choose reference box | svg path {
transform-box: fill-box;
transform-origin: center;
} | View examples |
| Set scene perspective | .scene { perspective: 800px; } | View examples |
| Preserve child depth | .card { transform-style: preserve-3d; } | View examples |
| Hide the reverse face | .face { backface-visibility: hidden; } | View examples |
| Remove optional motion | @media (prefers-reduced-motion: reduce) {
.item { transform: none; };
} | View examples |
Motion and Transitions · 18 commands
CSS Transitions and Animations Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Choose transitioned properties | .button {
transition-property: background-color, transform;
} | View examples |
| Set transition duration | .button { transition-duration: 160ms; } | View examples |
| Declare a transition | .button { transition: transform 160ms ease-out; } | View examples |
| Transition several properties | .card {
transition:
transform 180ms ease-out, box-shadow 180ms ease-out;
} | View examples |
| Delay a transition | .item { transition-delay: 80ms; } | View examples |
| Use custom easing | .panel {
transition-timing-function:
cubic-bezier(.2, .8, .2, 1);
} | View examples |
| Use stepped timing | .sprite { transition-timing-function: steps(6, end); } | View examples |
| Define keyframes | @keyframes fade-in {
from { opacity: 0; } to { opacity: 1; };
} | View examples |
| Run a keyframe animation | .notice { animation: fade-in 240ms ease-out; } | View examples |
| Add intermediate keyframes | @keyframes pulse {
0%, 100% { opacity: 1; } 50% { opacity: .55; };
} | View examples |
| Repeat an animation | .spinner { animation-iteration-count: infinite; } | View examples |
| Alternate direction | .indicator { animation-direction: alternate; } | View examples |
| Retain the final keyframe | .enter { animation-fill-mode: forwards; } | View examples |
| Pause an animation | .carousel:hover { animation-play-state: paused; } | View examples |
| Move with transform | .card:hover { transform: translateY(-.25rem); } | View examples |
| Fade with opacity | .popover[data-open="true"] { opacity: 1; } | View examples |
| Honor reduced motion | @media (prefers-reduced-motion: reduce) {
.animated { animation:
none; transition-duration: .01ms; };
} | View examples |
| Preserve a clear focus state | .button:focus-visible {
outline: .2rem solid currentColor;
outline-offset: .2rem;
} | View examples |
Motion and Transitions · 16 commands
CSS View Transitions Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Start a transition | document.startViewTransition(() => updateDOM()); | View examples |
| Provide an API fallback | document.startViewTransition ? document.startViewTransition(update) :
update(); | View examples |
| Name a shared element | .hero { view-transition-name: product-hero; } | View examples |
| Exclude an element | .live-clock { view-transition-name: none; } | View examples |
| Style group geometry | ::view-transition-group(product-hero) {
animation-duration: 360ms;
} | View examples |
| Animate the old capture | ::view-transition-old(product-hero) {
animation: fade-out 180ms ease-in both;
} | View examples |
| Animate the new capture | ::view-transition-new(product-hero) {
animation: fade-in 240ms ease-out both;
} | View examples |
| Customize the root cross-fade | ::view-transition-old(root) {
animation: fade-out 160ms linear both;
} | View examples |
| Control image-pair blending | ::view-transition-image-pair(card) {
isolation: isolate;
} | View examples |
| Opt in navigation | @view-transition { navigation: auto; } | View examples |
| Declare navigation types | @view-transition {
navigation: auto;
types: forwards backwards;
} | View examples |
| Match an active type | :active-view-transition-type(forwards) {
--slide-direction: 1;
} | View examples |
| Class several captures | .tile { view-transition-class: tile; } | View examples |
| Style a capture class | ::view-transition-group(*.tile) {
animation-duration: 300ms;
} | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
::view-transition-group(*) { animation-duration: 1ms; };
} | View examples |
| Limit expensive capture area | .card { contain: paint; view-transition-name: card; } | View examples |
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 |