Modern Web Guidance

JetBrainsOfficialCreated by Google ChromeDistributed by JetBrains

Skill
Tool integration
Software development
Apache-2.0
Low risk

From the author

Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: - UI/Layout: Modals, dialogs, popovers, Glassmorphism/backdrop-filters, anchor positioning, container queries, `:has()`, `:user-valid`. - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization. - System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets. - Frameworks: Adapting layout/styles in React, Vue, Angular. - General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc. DO NOT trigger for: - Backend: Database SQL, ORMs, Express API routes. - Pipelines: CI/CD deployment, Docker, Actions. - Generic: Local scripts (Python/Go tools), ESLint, Git.

— the description by Google Chrome

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured way to access up-to-date web development patterns, ensuring that implementations follow modern standards rather than relying on potentially outdated training data. It covers a wide range of frontend topics including UI components, performance optimization, browser APIs, and form handling. By integrating this tool, developers can search for specific use cases and retrieve detailed, framework-agnostic guides that include browser support and fallback recommendations.

What it does

Searches for standardized web development patterns and best practices.
Retrieves detailed implementation guides for specific frontend use cases.
Provides guidance on browser compatibility and necessary fallbacks.
Helps avoid ad-hoc solutions and unnecessary dependency bloat.
Supports modern web features like container queries, view transitions, and performance APIs.

When to use it

At the beginning of any frontend feature implementation.
Before creating new components to check for existing standardized patterns.
When evaluating the browser support requirements for modern web features.
When needing to implement performance optimizations like LCP or content-visibility.

Advantages

Ensures use of current, recommended web development practices.
Reduces technical debt by discouraging ad-hoc implementations.
Provides clear guidance on handling browser compatibility and fallbacks.
Promotes the use of native browser capabilities over heavy external dependencies.

Usage examples

“I need to implement a modal using modern web standards. What is the best approach?”: The agent searches for modal-related guides and retrieves the recommended implementation pattern, including any necessary browser fallbacks.
“How can I optimize the loading priority of my LCP images?”: The agent searches for image optimization guides and retrieves the specific instructions for using fetch priority to improve performance.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/jetbrains/modern-web-guidance/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip modern-web-guidance.zip -d .agents/skills

Documentation by Google Chrome

Modern Web Guidance

A skill to search for specific web development use cases and retrieve their corresponding best practice guides.

When to use

Must use this skill:

At the start of implementing any web feature.
Before creating a new component, to check if a standardized pattern already exists.
To avoid implementing ad-hoc solutions or loading large dependencies unnecessarily.

Usage Instructions

Step 1. Search Use Cases

Search with an action-oriented query summarizing what you want to achieve using the search command. Run modern-web-guidance directly with npx.

npx -y modern-web-guidance@latest search "<query>" --skill-version 2026_05_16-c5e7870

Example Output:

[
  {
    "id": "optimize-image-priority",
    "description": "Optimize the loading priority of Largest Contentful Paint (LCP) candidate images.",
    "category": "performance",
    "featuresUsed": [ "Fetch priority" ],
    "tokenCount": 985,
    "similarity": 0.7289
  },
  {
    "id": "defer-rendering-heavy-content",
    "description": "Reduce rendering times in content-heavy web pages by deferring rendering for offscreen content.",
    "category": "performance",
    "featuresUsed": [ "content-visibility", "hidden=\"until-found\"" ],
    "tokenCount": 1250,
    "similarity": 0.6961
  }
]

Note: If search results are vague, return no matches, or show low similarity scores, run the list command to browse all guides:
npx -y modern-web-guidance@latest list

Step 2. Retrieve Best Practices

Once you have a relevant id from the search results, call this script using the retrieve command to get the full guide. You can pass multiple IDs separated by commas.

npx -y modern-web-guidance@latest retrieve "<id>"

Example Output: The markdown content of the guide describing implementation steps...

Using npx

IMPORTANT: on Windows, using npx may fail. Use npx.cmd ... instead.
Network access is required for fetching npm packages needed by the task.
If the npx -y modern-web-guidance… command hangs, you may be offline. Try running again in offline mode: npx --offline ….
The --skill-version flag is used to determine if this SKILL.md is out of date. If it is, a warning message is logged to stderr.

Guidelines

Always search first to find the most relevant guides.
These guides are usually framework-agnostic; adapt them correctly to your setup.
Do not hallucinate guides or ignore them; they represent the preferred local standard for the user's project.

Interpreting Browser Support & Fallbacks

Default Behavior: All guides assume Baseline Widely available features are safe to use without fallbacks. For features that are not Baseline widely available, you MUST follow the fallback recommendations in the guide, unless the user has specified a custom browser support policy.
Custom Policies: If the user has already defined explicit browser support requirements, use the browser compatibility data in the guide to determine if a fallback can be safely ignored.
- For Baseline YYYY targets, a feature satisfies this target if its "Baseline since" date is <= YYYY.
- Policy Examples:
  - "Do not implement feature fallbacks." (for exploratory prototypes of the cutting-edge web)
  - "Safari 17.4+" (for internal tools targeting macOS or Tauri-based desktop apps)
  - "Never recommend or implement polyfills; if a Baseline Newly Available feature is required for core functionality, provide a lightweight custom fallback or redesign the approach." (to minimize bundle size and avoid technical debt)
  - "Assume a modern execution environment where Baseline Newly Available features can be used natively, provided they are strictly feature-detected and degrade gracefully." (for progressive enhancement strategies)
Reactive Policy Discovery: Watch for environmental cues to suggest documenting a policy in CLAUDE.md or AGENTS.md. Suggest this if the developer:
- Mentions building for a restricted runtime (e.g., Electron or Tauri).
- Explicitly excludes specific targets (e.g., "we don't support Desktop Chrome").
- Expresses hesitation about polyfill complexity, bundle size, or performance cost.
- Questions if a feature is safe to use without fallbacks.
No defined policy format. This is an example: **Browser Support:** Allow Newly Available features, but only adopt custom fallback code that adds <= 20 lines and does not require external dependencies.

Files

ATTRIBUTION.mdAdded by AutoGineer939 B
LICENSE11.1 KiB
SKILL.md5.7 KiB
guides/accessibility/accessibility.md24.0 KiB
guides/accessibility/accessible-error-announcement.md6.9 KiB
guides/built-in-ai/language-detection.md3.5 KiB
guides/built-in-ai/language-model.md7.1 KiB
guides/built-in-ai/summarizer.md5.9 KiB
guides/built-in-ai/translator.md5.3 KiB
guides/css-layout/css-layout.md19.5 KiB
guides/css/css.md27.0 KiB
guides/css/highlight-text-ranges.md5.4 KiB
guides/forms/animated-select-picker.md7.8 KiB
guides/forms/autofill-address-form.md4.1 KiB
guides/forms/autofill-highlight-inputs.md2.3 KiB
guides/forms/autofill-payment-form.md8.5 KiB
guides/forms/autofill-sign-in-form.md9.9 KiB
guides/forms/autofill-sign-up-form.md11.0 KiB
guides/forms/brand-consistent-forms.md8.3 KiB
guides/forms/branded-select-styling.md5.5 KiB
guides/forms/custom-select-picker-layouts.md5.0 KiB
guides/forms/form-fields-automatically-fit-contents.md5.8 KiB
guides/forms/forms.md13.8 KiB
guides/forms/required-field-feedback.md6.8 KiB
guides/forms/rich-media-picker.md6.6 KiB
guides/forms/select-menu-interaction.md5.6 KiB
guides/forms/validate-input-after-interaction.md8.6 KiB
guides/html/html.md17.5 KiB
guides/passkeys/passkey-authentication.md9.7 KiB
guides/passkeys/passkey-conditional-create.md6.5 KiB
guides/passkeys/passkey-management.md9.3 KiB
guides/passkeys/passkey-reauthentication.md4.9 KiB
guides/passkeys/passkey-registration.md9.3 KiB
guides/passkeys/passkeys.md4.2 KiB
guides/performance/batch-analytics-events.md6.4 KiB
guides/performance/break-up-long-tasks.md2.1 KiB
guides/performance/calculate-total-foreground-time.md2.9 KiB
guides/performance/conditional-async-dependencies.md3.6 KiB
guides/performance/defer-rendering-heavy-content.md6.3 KiB
guides/performance/defer-work-until-scroll-ends.md3.3 KiB
guides/performance/deprioritize-background-fetches.md1.8 KiB
guides/performance/detect-initial-visibility-state.md4.5 KiB
guides/performance/efficient-background-processing.md5.0 KiB
guides/performance/faster-spa-view-transitions.md3.4 KiB
guides/performance/full-session-analytics.md5.7 KiB
guides/performance/identify-heavy-scripts.md4.2 KiB
guides/performance/identify-inp-causes.md5.4 KiB
guides/performance/improve-next-page-load-performance.md7.1 KiB
guides/performance/interactions-in-complex-layouts.md3.4 KiB
guides/performance/optimize-image-priority.md4.0 KiB
guides/performance/optimize-preload-priority.md3.3 KiB
guides/performance/optimize-script-priority.md2.6 KiB
guides/performance/performance.md17.9 KiB
guides/performance/resolution-optimized-pseudo-elements.md2.3 KiB
guides/performance/schedule-tasks-by-priority.md2.2 KiB
guides/performance/sequence-distributed-events.md3.5 KiB
guides/privacy/privacy.md11.0 KiB
guides/security/security.md25.2 KiB
guides/user-experience/adapt-scrollbar-to-contrast-preferences.md3.5 KiB
guides/user-experience/anchor-positioning-tab-underline.md2.9 KiB
guides/user-experience/animate-element-entry-exit.md5.0 KiB
guides/user-experience/animate-to-from-top-layer.md5.5 KiB
guides/user-experience/animate-to-intrinsic-sizes.md5.3 KiB
guides/user-experience/apply-webgl-shaders.md9.9 KiB
guides/user-experience/calculate-event-differentials.md4.4 KiB
guides/user-experience/calculate-with-intrinsic-sizes.md9.6 KiB
guides/user-experience/capture-location-agnostic-data.md3.6 KiB
guides/user-experience/carousel-slide-effects.md8.1 KiB
guides/user-experience/carousel-snap-highlights.md5.7 KiB
guides/user-experience/child-state-based-styling.md4.8 KiB
guides/user-experience/complex-shapes.md3.5 KiB
guides/user-experience/component-specific-light-dark-theme.md9.3 KiB
guides/user-experience/consistent-cross-document-transitions.md11.8 KiB
guides/user-experience/content-based-styling.md5.2 KiB
guides/user-experience/coordinate-global-events.md3.5 KiB
guides/user-experience/cross-document-transitions.md4.4 KiB
guides/user-experience/customize-scrollbar-color-and-thickness.md2.4 KiB
guides/user-experience/dark-mode.md15.2 KiB
guides/user-experience/declarative-button-actions.md5.4 KiB
guides/user-experience/declarative-dialog-popover-control.md9.2 KiB
guides/user-experience/deliver-optimized-decorative-images.md2.8 KiB
guides/user-experience/design-token-reactivity.md5.7 KiB
guides/user-experience/directional-navigation-transitions.md4.9 KiB
guides/user-experience/dynamic-sibling-animations.md2.6 KiB
guides/user-experience/dynamic-sibling-styling.md3.6 KiB
guides/user-experience/export-html-media-from-canvas.md11.2 KiB
guides/user-experience/expose-canvas-content-to-browser-features.md14.1 KiB
guides/user-experience/flicker-free-client-side-ab-testing.md8.5 KiB
guides/user-experience/fluid-scaling.md3.0 KiB
guides/user-experience/format-human-readable-durations.md4.2 KiB
guides/user-experience/group-element-transitions.md5.0 KiB
guides/user-experience/improve-text-layout-and-legibility.md5.1 KiB
guides/user-experience/individual-transform-properties.md3.6 KiB
guides/user-experience/interactive-content-in-3d-scenes.md13.3 KiB
guides/user-experience/interactive-content-reveal.md5.1 KiB
guides/user-experience/interest-triggered-action-previews.md4.1 KiB
guides/user-experience/interest-triggered-tooltips.md6.8 KiB
guides/user-experience/light-dismiss-a-dialog.md3.6 KiB
guides/user-experience/manage-recurring-intervals.md3.3 KiB
guides/user-experience/model-partial-time-concepts.md4.2 KiB
guides/user-experience/move-dom-element-without-losing-state.md2.5 KiB
guides/user-experience/navigation-drawer.md15.7 KiB
guides/user-experience/overflow-clipping-control.md8.0 KiB
guides/user-experience/parallax-scroll-effects.md8.8 KiB
guides/user-experience/persistent-app-tours.md3.9 KiB
guides/user-experience/persistent-toast-notifications.md1.8 KiB
guides/user-experience/persistent-top-layer-ui.md2.2 KiB
guides/user-experience/physics-based-easing.md5.8 KiB
guides/user-experience/platform-controls-dismiss-dialog.md2.6 KiB
guides/user-experience/position-aware-tooltips.md5.9 KiB
guides/user-experience/precise-text-alignment.md4.7 KiB
guides/user-experience/prevent-text-wrapping.md2.4 KiB
guides/user-experience/pull-to-reveal.md4.7 KiB
guides/user-experience/reduce-style-repetition.md3.9 KiB
guides/user-experience/resilient-context-menus-and-nested-dropdowns.md4.9 KiB
guides/user-experience/same-document-transitions.md8.3 KiB
guides/user-experience/scroll-entry-exit-effects.md7.8 KiB
guides/user-experience/scroll-position-aware-elements.md3.6 KiB
guides/user-experience/scroll-progress-indicator.md6.7 KiB
guides/user-experience/scroll-snap-realtime-feedback.md6.7 KiB
guides/user-experience/scroll-snap-state-sync.md3.9 KiB
guides/user-experience/scroll-target-on-load.md3.3 KiB
guides/user-experience/scrollability-affordance-hints.md3.6 KiB
guides/user-experience/scrollytelling.md8.3 KiB
guides/user-experience/search-hidden-content.md6.7 KiB
guides/user-experience/shaped-cutouts.md7.0 KiB
guides/user-experience/shrinking-header-on-scroll.md6.3 KiB
guides/user-experience/size-aware-styling.md2.9 KiB
guides/user-experience/soft-edge-content-fade.md2.6 KiB
guides/user-experience/stabilize-reactive-state.md3.5 KiB
guides/user-experience/stack-drill-down.md32.9 KiB
guides/user-experience/style-parent-with-has.md6.0 KiB
guides/user-experience/support-global-calendar-systems.md5.7 KiB
guides/user-experience/swipe-to-remove.md26.2 KiB
guides/user-experience/visually-stable-font-fallbacks.md2.9 KiB
guides/user-experience/visually-stable-mixed-fonts.md2.8 KiB
guides/user-experience/visually-texture-content.md3.7 KiB
guides/webmcp/agentic-forms.md5.0 KiB
guides/webmcp/agentic-javascript-tools.md4.1 KiB
guides/webmcp/webmcp.md3.7 KiB

guides/css-layout/css-layout.md

CSS Layouts and Responsive Design

1 Fundamentals
1. Which layout mode to use?
2. Working principles
2 Flexbox
3 Grid and subgrid
1. Code example: grid and subgrid
4 Container queries
1. Code example: fluid typography using container query units
5 Native overlays, anchor positioning, and stacking contexts
6 Overflow tracking and layout stability
7 Viewport mechanics and track distribution
8 Grid lanes (aka masonry)

1 Fundamentals

Lean on the browser's layout engine when possible for better performance. Reach for intrinsic sizing, logical properties, and aspect-ratio before resorting to hardcoded dimensions or complicated media-queries.

1.1 Which layout mode to use?

Walk the decision tree top-to-bottom and stop at the first match. Note that layouts can be nested within each-other and each decision is based on the use-case for that container.

Is it a simple row OR column of items? Use flexbox — 1D, content-first, content distributes along a single axis.
Does a nested element need to line up with its grandparent grid's tracks? Use subgrid — 2D, relationship-first, inherits parent tracks so grandchildren can align across siblings.
Is it a complex page or component structure with rows AND columns? Use grid — 2D, layout-first, you define the skeleton and content fills it.
Is the content a long flow of prose that should split into balanced columns? Use multi-column — 1D flow, newspaper-style.
Are items of varied heights that need to be packed tightly? Use grid with grid-auto-flow: dense today; reach for native masonry (aka "grid lanes") only when it ships in your Baseline target (see §8).
Does an element need to float above the page and stay spatially tethered to a trigger, even across DOM boundaries or stacking contexts? Use anchor positioning — anchor-name on the trigger, position-anchor on the overlay (see §5).

1.2 Working principles

Do:

Use logical properties (inline-size, block-size, margin-inline, padding-block, inset-inline-start) for layout dimensions and spacing — see css (via npx -y modern-web-guidance@latest retrieve "css") for full coverage.
Apply the content-first vs layout-first mental model: flexbox when items dictate flow, grid when you define the skeleton first.
Use the place-* shorthands (place-content, place-items, place-self) to align across both axes in one declaration.
Reach for intrinsic sizing (min-content, max-content, fit-content()) and flexible tracks (fr, minmax()) before fixed width/height — fewer media queries, more resilient layouts.
Use aspect-ratio to reserve space for media and prevent layout shift before assets load.

.sidebar       { inline-size: max-content; }    /* Size to longest unbreakable token. */
.main-content  { inline-size: fit-content; }    /* Grow to available space, no further. */
.media         { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; }
body.centered  { display: grid; place-content: center; min-block-size: 100dvb; }

For calc-size() and constraint-aware intrinsic sizing, see calculate-with-intrinsic-sizes (via npx -y modern-web-guidance@latest retrieve "calculate-with-intrinsic-sizes").

2 Flexbox

One-dimensional layout — items flow along a single main axis with alignment on the cross axis. Reach for it for navbars, toolbars, item rows, and any single-row-or-column distribution.

Do:

Establish a context with display: flex and set the main axis with flex-direction (row default).
Use flex-wrap: wrap whenever overflow is a possibility — nowrap without overflow: auto/hidden will spill on narrow viewports.
Use the flex shorthand <grow> <shrink> <basis> (e.g., flex: 1 1 250px) on items rather than setting flex-grow/flex-shrink/flex-basis individually.
Use gap (or the row-gap/column-gap longhand) for spacing between items instead of child margins.
Prefix positional alignment with safe (e.g., align-items: safe center) so focusable content isn't clipped when the container is narrower than its content.
Push a single item to the far end of the main axis with margin-inline-start: auto (or margin-block-start: auto) — that's the standard escape hatch.
Override cross-axis alignment per item with align-self.
Use align-items to center all items on the cross axis; use margin: auto on a single item to center it on both axes independently; use align-content only when the container wraps and has extra space across rows.
Set min-inline-size: 0 (or min-width: 0) on flex items that contain long unbreakable content (URLs, code, long strings) — flex items won't shrink below their content size by default, causing overflow.

Do not:

Don't reach for justify-self on flex items — it only works on grid, block, and absolutely-positioned layouts. Use auto margins instead.
Don't use order or flex-direction: *-reverse to reorder interactive content. They change visual order only; the DOM order still drives sequential focus, so keyboard tab flow won't match what the user sees.
Don't confuse space-around (half-gap at the ends) with space-evenly (equal gaps before, between, and after).
Don't forget the axis flip: when flex-direction: column, justify-content aligns on the block axis and align-items aligns on the inline axis — the opposite of the default.
Don't size both the container and its children to fill each other — that's a common source of overflow and surprising results. Give one side a definite size.
Don't set both flex-basis and width/inline-size on the same item — flex-basis takes precedence in a flex context and width is ignored. Use flex-basis (or the flex shorthand) as the single source of truth for sizing flex items.

.card-grid        { display: flex; flex-flow: row wrap; gap: 1rem; }
.card-item        { flex: 1 1 250px; }                  /* grow, shrink, basis */
.card-item-action { margin-inline-start: auto; }        /* Push to main-axis end. */
.toolbar          { display: flex; align-items: safe center; }

3 Grid and subgrid

Baseline status for Subgrid: Widely available. It's been Baseline since 2023-09-15. Supported by: Chrome 117 (Sep 2023), Edge 117 (Sep 2023), Firefox 71 (Dec 2019), and Safari 16 (Sep 2022).

Two-dimensional layout — define rows AND columns explicitly, or let the engine derive them. Subgrid lets a nested grid inherit its parent's tracks so grandchildren align across siblings.

Choosing grid features:

Do you know exactly how many columns you need?
- Yes — use explicit tracks (grid-template-columns: 200px 1fr, repeat(3, 1fr), etc.)
  - Do different columns need different sizes (sidebar + main, header spanning all)? → use grid-template-areas for named, readable regions
  - Are all columns uniform or positioned purely by line number? → use repeat(N, ...) or named lines
- No (responsive, unknown item count) — use repeat(auto-fit, minmax(min, 1fr))
  - Should items on the last row stretch to fill remaining space? → auto-fit
  - Should empty last-row tracks hold their min size (preserving column ghost slots)? → auto-fill
Do you need to place an item at a specific location?
- Yes — use grid-column: <start> / <end> or grid-area: <name>
- No (just spanning multiple tracks, flow position doesn't matter) — use grid-column: span <n>
Do child elements need to inherit the parent grid's track sizes (ragged-edge alignment across siblings)?
- Yes — use subgrid on the affected axis
  - Is the number of children per cell variable? → subgrid one axis only; use grid-auto-rows/grid-auto-columns for the other
  - Is the child count fixed? → subgrid on both axes is fine
- No — standard grid, no subgrid needed

Do:

Establish a context with display: grid.
Use grid-template-areas for complex page-level layouts — area names are self-documenting and the declaration can be aligned in rows and columns for at-a-glance readability.
Use repeat(auto-fit, minmax(200px, 1fr)) for responsive card grids that stretch filled tracks to fill the row, or auto-fill to preserve empty repeated tracks at their min size.
Use fr for proportional track distribution and minmax(min, max) for flexible-but-bounded tracks.
Position items with grid-column: span <n> to size across tracks, grid-column: <start> / <end> to place at specific lines, or grid-area: <name> for named regions.
Use subgrid (grid-template-columns: subgrid or grid-template-rows: subgrid) to solve the "ragged edge" problem in card lists — internal elements like titles, metadata, and CTAs line up across siblings.
Pair a subgrid declaration with a preceding explicit grid-template-rows/-columns declaration as a same-cascade fallback for older browsers.

Do not:

Don't expect auto-fit/auto-fill track size to come from item content — it comes from the repeat() size argument.
Don't use grid-auto-flow: dense on interactive content. It packs items efficiently but reorders them visually, breaking DOM-order keyboard tab flow.
Don't apply subgrid to both axes when the child count is variable. Extras land in the last track; use grid-auto-rows/grid-auto-columns for the implicit axis instead.
Don't confuse justify-items/align-items (aligns item content within its track) with justify-content/align-content (aligns the grid tracks within the container). Using the wrong one silently has no effect.
Don't use repeat(auto-fit/auto-fill, ...) without a definite inline-size on the container — inside display: inline-grid or an unsized flex item, the container has no width to divide, making track counts unpredictable.

3.1 Code example: grid and subgrid

Page shell: <main class="page-layout"> contains <header>, <aside>, a <section class="card-grid"> with <div class="card"> children, and <footer>.

/* Align grid-template-areas in rows and columns for readability. */
.page-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  gap: 1.5rem;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
footer  { grid-area: footer; }

.card-grid {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-template-rows: auto 1fr; /* title block, body block */
  gap: 1rem;
}

.card {
  grid-row: span 2;
  display: grid;
  /* Same-cascade fallback: ignored when subgrid is supported. */
  grid-template-rows: auto 1fr;
  grid-template-rows: subgrid;
}

4 Container queries

Baseline status for Container queries: Widely available. It's been Baseline since 2023-02-14. Supported by: Chrome 105 (Sep 2022), Edge 105 (Sep 2022), Firefox 110 (Feb 2023), and Safari 16 (Sep 2022).

Query the size (or computed style) of an ancestor container rather than the viewport. Mental model: container queries = component context; media queries = global page layout and user preferences (prefers-color-scheme, prefers-reduced-motion).

Do:

Establish a containment context with container-type: inline-size (width-only queries) or container-type: size (both axes) on a wrapper before its descendants can be queried.
Name containers with container-name (or the container shorthand: container: inline-size card) when nested contexts could collide.
Include container query units in calculating fluid type and spacing: cqi/cqb (logical inline/block), cqw/cqh (physical), cqmin/cqmax.
Give the container a definite block-size whenever container-type: size is used — without one, descendants collapse because size containment forces the container to ignore its content.

Do not:

Don't use block-size as a container-type value — it isn't valid. Use size for both axes.
Don't expect children's intrinsic size to influence the container after declaring container-type. The container is computed as if it has no children once containment is active.
Don't rely on container query units inside descendants of a non-qualifying ancestor; they fall back to the small viewport (svw/svh).

4.1 Code example: fluid typography using container query units

.card-wrapper {
  container: inline-size / card; /* shorthand for container-type + container-name */
}

@container card (inline-size > 400px) {
  .content {
    display: flex;
    gap: 2rem;
  }
}

.title {
  /* Fluid type bound to the container width, not the viewport. */
  font-size: clamp(1rem, 4cqi, 2rem);
}

For component-driven responsive styling patterns, see size-aware-styling (via npx -y modern-web-guidance@latest retrieve "size-aware-styling") and fluid-scaling (via npx -y modern-web-guidance@latest retrieve "fluid-scaling").

5 Native overlays, anchor positioning, and stacking contexts

Baseline status for <dialog>: Widely available. It's been Baseline since 2022-03-14. Supported by: Chrome 37 (Aug 2014), Edge 79 (Jan 2020), Firefox 98 (Mar 2022), and Safari 15.4 (Mar 2022). Baseline status for Popover: Newly available. It's been Baseline since 2025-01-27. Supported by: Chrome 116 (Aug 2023), Edge 116 (Aug 2023), Firefox 125 (Apr 2024), Safari 17 (Sep 2023), and Safari iOS 18.3 (Jan 2025). Anchor positioning is not natively supported by any major browser yet.

When to use each overlay primitive:

Use popover for transient, non-modal UI (flyouts, toasts, tooltips) — lives in the top layer, no z-index management needed.
Use <dialog> with .showModal() for modal interactions that require focus trapping and an inert backdrop.
Don't combine popover and .showModal() on the same element — they're mutually exclusive runtime states.

Anchor positioning (spatial layout of overlays):

Use position-area (or anchor() on insets) and anchor-size() to position and size an overlay relative to its trigger.
Use position-try-fallbacks: flip-block (or flip-inline) to let the browser reposition when the overlay overflows the viewport.
Don't mix physical and logical keywords in a single position-area value — pick one coordinate system.
Feature-detect with @supports (anchor-name: --x) and provide an absolute-position fallback.

For full implementation detail, polyfill strategies, and popover value reference, see declarative-dialog-popover-control (via npx -y modern-web-guidance@latest retrieve "declarative-dialog-popover-control") and position-aware-tooltips (via npx -y modern-web-guidance@latest retrieve "position-aware-tooltips"). For anchor positioning applied to menus and tab indicators, see resilient-context-menus-and-nested-dropdowns (via npx -y modern-web-guidance@latest retrieve "resilient-context-menus-and-nested-dropdowns") and anchor-positioning-tab-underline (via npx -y modern-web-guidance@latest retrieve "anchor-positioning-tab-underline").

6 Overflow tracking and layout stability

Baseline status for scrollbar-gutter: Newly available. It's been Baseline since 2024-12-11. Supported by: Chrome 94 (Sep 2021), Edge 94 (Sep 2021), Firefox 97 (Feb 2022), and Safari 18.2 (Dec 2024). line-clamp is not natively supported by any major browser yet.

Manage layout shifts, scrollbars, and clipping predictably.

Do:

Use overflow: auto so scrollbars appear only when content actually overflows.
Use overflow: clip to clip content without establishing a scroll container; opt into spillover with overflow-clip-margin.
Use scrollbar-gutter: stable to reserve space for scrollbars and prevent layout shifts when content grows.
Use overscroll-behavior: contain (or none) on scrollable containers to stop scroll chains from bubbling into the parent or document.
Use the -webkit-line-clamp + display: -webkit-box + -webkit-box-orient: vertical triad for multi-line truncation — despite the prefix, this pattern is fully specified and not deprecated. Declare the unprefixed line-clamp shorthand alongside it; browsers that don't yet support it ignore the property harmlessly. Do not:
Don't use overflow: scroll when auto will do — scroll forces scrollbars even when there's nothing to scroll.
Don't reach for overflow: hidden when you only want to clip — hidden establishes a scroll container that can be programmatically scrolled.

.scrollable-list {
  max-block-size: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;       /* Reserve scrollbar space. */
  overscroll-behavior: contain;   /* No scroll chaining into the page. */
}

.snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;                  /* Ignored where unsupported. */
  overflow: clip;
}

For overflow: clip and overflow-clip-margin in depth, see overflow-clipping-control (via npx -y modern-web-guidance@latest retrieve "overflow-clipping-control"). For scrollbar color, sizing, and theming, see customize-scrollbar-color-and-thickness (via npx -y modern-web-guidance@latest retrieve "customize-scrollbar-color-and-thickness"), dark-mode (via npx -y modern-web-guidance@latest retrieve "dark-mode"), and adapt-scrollbar-to-contrast-preferences (via npx -y modern-web-guidance@latest retrieve "adapt-scrollbar-to-contrast-preferences").

7 Viewport mechanics and track distribution

Baseline status for Small, large, and dynamic viewport units: Widely available. It's been Baseline since 2022-12-05. Supported by: Chrome 108 (Nov 2022), Edge 108 (Dec 2022), Firefox 101 (May 2022), and Safari 15.4 (Mar 2022).

Use dvh/dvw for mobile layout containers that must account for browser UI shifting (URL bar collapse/expand).
Don't use 100vw for full-width layout — it ignores scrollbar width and causes horizontal overflow. Use 100%, 100dvw, or 100svw instead.

For the full viewport unit reference (svh, lvh, dvi, dvb, etc.), see css (via npx -y modern-web-guidance@latest retrieve "css").

8 Grid lanes (aka masonry)

Masonry is not natively supported by any major browser yet.

The spec is in development. The currently agreed-upon name is "grid lanes" (e.g., display: grid-lanes). Firefox ships grid-template-rows: masonry behind a flag; no other engines ship it in stable as of this writing.

Do:

Use grid with grid-auto-flow: dense for tight packing today, accepting that DOM order may not match visual order.
Use multi-column (columns: 3; column-gap: 1rem) for content-heavy masonry-like flow when items are document fragments rather than equal-weight cards.
Treat grid-template-rows: masonry as a progressive enhancement only — feature-detect with @supports.

Do not:

Don't ship grid-template-rows: masonry as a hard requirement until your Baseline target catches up.

.gallery       { columns: 3 200px; column-gap: 1rem; }
.gallery > *   { break-inside: avoid; margin-block-end: 1rem; }

@supports (grid-template-rows: masonry) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
    columns: unset;
  }
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Google Chrome

Publisher

JetBrains (Official)

Distributed by

JetBrains

Source

JetBrains/skills · modern-web-guidance · commit 3f53782

Licence

Apache License 2.0 (redistribution allowed)

ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Google Chrome or JetBrains.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download modern-web-guidance.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Google Chrome

Modern Web Guidance

When to use

Usage Instructions

Step 1. Search Use Cases

Step 2. Retrieve Best Practices

Using npx

Guidelines

Interpreting Browser Support & Fallbacks

Files

guides/css-layout/css-layout.md

CSS Layouts and Responsive Design

1 Fundamentals

1.1 Which layout mode to use?

1.2 Working principles

2 Flexbox

3 Grid and subgrid

3.1 Code example: grid and subgrid

4 Container queries

4.1 Code example: fluid typography using container query units

5 Native overlays, anchor positioning, and stacking contexts

6 Overflow tracking and layout stability

7 Viewport mechanics and track distribution

8 Grid lanes (aka masonry)

Requirements and compatibility

Security

Attribution and licence

Related skills

Web Artifacts Builder

Frontend UI Engineering

Anti UI Slop

Ask Sonner

Pick UI Library

Animate Expo

Download ZIP