Skip to content
Modern Web Platform Practices for Coding Agents
The Trove library · Condensed from Google Chrome's Modern Web Guidance (Apache-2.0)

Modern Web Platform Practices for Coding Agents

Use when you build a web UI component, pick a native HTML and CSS feature with its browser fallback, fix Core Web Vitals.

Read a preview

You can read the contents and the first 2,000 characters.
Pro includes the whole book.

  • By Condensed from Google Chrome's Modern Web Guidance (Apache-2.0)
  • 65 chapters
  • Updated Nov 14, 2026
  • 4 readers

What you’ll get

  • Build dialogs, popovers, menus and selects with native HTML instead of libraries
  • Know which web features need a fallback for your browser targets, and which one
  • Fix LCP, INP and CLS with fetch priority, task scheduling and stable fonts
  • Add passkeys, Trusted Types and safe HTML sanitization correctly
  • Animate with view transitions and scroll-driven CSS instead of JS libraries

What is Modern Web Platform Practices for Coding Agents?

Use when you build a web UI component, pick a native HTML and CSS feature with its browser fallback, fix Core Web Vitals, or harden forms and passkey sign-in. It covers dialogs, popovers, menus, tabs, carousels, tooltips and custom selects; view transitions, scroll-driven animations, anchor positioning, container queries and :has(); autofill and validation; LCP, INP and CLS; passkeys, sanitization and Trusted Types; web components, Temporal, Chrome built-in AI, WebMCP, PWA and WebAssembly. Every rule states its Baseline support and the fallback to ship. Condensed from the 208 expert-reviewed guides in Google Chrome's modern-web-guidance npm package v1.0.0 (Apache-2.0, built with the Firefox and Edge teams). Unofficial. Not for backend, build tooling or Chrome extensions.

Read more

Condensed from Google Chrome's Modern Web Guidance (Apache-2.0) · markdown · Listed Nov 14, 2026

  • web development
  • css
  • html
  • javascript
  • accessibility
  • web performance
  • coding agents
  • browser compatibility
  • passkeys
  • ui components

From the first page

Scope: native HTML, CSS and client-side JavaScript for web UI, forms, accessibility, visual design, performance, security and privacy, web components, dates, built-in AI, WebMCP, PWA and WebAssembly. Not covered: backend, build tooling, Chrome extensions.

Checked against: npm modern-web-guidance v1.0.0 (skill version 20261109-5bcc021b), Baseline data as shipped in that release.

Reviewed: 2026-11-14. Next review: 2027-02-14.

Licence: Apache-2.0 (derived from Google Chrome's Modern Web Guidance, Apache-2.0; see the last page for attribution).

This book tells a coding agent how to build web UI and client-side features with today's native HTML, CSS and JavaScript instead of legacy patterns or extra dependencies, and which fallback to ship for browsers that lack a feature. It condenses Google Chrome's Modern Web Guidance (npm modern-web-guidance v1.0.0, 208 expert-reviewed guides, Apache-2.0, built with the Firefox and Edge teams). It is an unofficial derivative; see the last page for sources, license and upkeep.

Preview · 2,000 of 523,106 characters

Building and Publishing Chrome Extensions
GDPR Compliance: Checklist and Official Texts
EDPB Guidelines for GDPR Compliance
Show, Don't Sell

Contents

  1. 01Modern Web Platform Practices for Coding Agentsp.1
    1. When to load this bookp.1
    2. Three questions this book answers better than model memoryp.1
    3. How to use itp.1
    4. Page indexp.1
  2. 02Decision matrix: task to pagep.2
  3. 03Foundations: Browser support policy and how to apply this bookp.3
    1. The problem this book solvesp.3
    2. Reading support statementsp.3
    3. Carrying vanilla guidance into frameworksp.3
    4. Verifying the resultp.3
    5. Modernizing an existing codebasep.3
  4. 04Accessibility: Core guidelines for structure, names, keyboard and mediap.4
    1. Accessibility coding guidelinesp.4
  5. 05Accessibility: Form errors, generated content and OS text scalep.5
    1. Accessible error announcementp.5
    2. Accessible generated contentp.5
    3. Respect operating system text scalep.5
  6. 06User experience: Content first, form factors and natural interactionsp.6
    1. Maximize content and reduce noisep.6
    2. Adapt to the form factorp.6
    3. Implement natural interactionsp.6
  7. 07UI atoms: Icons, component themes and anchored overlaysp.7
    1. Using and managing iconsp.7
    2. Component-specific light/dark themesp.7
    3. Viewport-aware dropdownsp.7
    4. Position-aware tooltipsp.7
  8. 08UI atoms: Scroll-driven and scroll-state effectsp.8
    1. Carousel slide effectsp.8
    2. Scroll progress indicatorp.8
    3. Shrinking header on scrollp.8
    4. State-aware sticky headersp.8
    5. Scroll position aware elementsp.8
    6. Pull to revealp.8
See all 65 parts
  1. 09UI atoms: Overflowing content - tables, truncation and scroll hintsp.9
    1. Responsive tablesp.9
    2. Single-line text overflowp.9
    3. Scrollability affordance hintsp.9
  2. 10CSS: Architecture, cascade, functions and feature detectionp.10
    1. Modern CSS architecture *(guide: css)*p.10
    2. Reusable CSS functions *(guide: reduce-style-repetition)*p.10
    3. Conditional CSS on at-rule support *(guide: atrule-support-conditionals)*p.10
  3. 11CSS: Layout, container queries and responsive sizingp.11
    1. Modern CSS layout *(guide: css-layout)*p.11
    2. Responsive design entry point *(guide: responsive-design)*p.11
    3. Size-aware components *(guide: size-aware-styling)*p.11
    4. Fluid scaling with container units *(guide: fluid-scaling)*p.11
  4. 12CSS: Parent and sibling-aware styling with :has() and sibling functionsp.12
    1. Styling a container from child state *(guide: child-state-based-styling)*p.12
    2. Layout from content presence *(guide: content-based-styling)*p.12
    3. Styling a form group when a field is invalid *(guide: style-parent-with-has)*p.12
    4. Styling siblings by count and index *(guide: dynamic-sibling-styling)*p.12
  5. 13CSS: Container style queries for context, tokens and combined conditionsp.13
    1. Usage-aware component variations *(guide: usage-aware-component-variations)*p.13
    2. Reactive design tokens *(guide: design-token-reactivity)*p.13
    3. Combining selectors with @-rules *(guide: selector-atrule-combinations)*p.13
  6. 14CSS: Intrinsic-size animation, individual transforms and clippingp.14
    1. Animating to intrinsic sizes *(guide: animate-to-intrinsic-sizes)*p.14
    2. Calculating with intrinsic sizes *(guide: calculate-with-intrinsic-sizes)*p.14
    3. Individual transform properties *(guide: individual-transform-properties)*p.14
    4. Overflow clipping control *(guide: overflow-clipping-control)*p.14
  7. 15HTML: Semantics, overlays, disclosure, focus, forms and resource loadingp.15
    1. Modern HTML architecture *(guide: html)*p.15
  8. 16HTML: Web components: when to build, lifecycle, Shadow DOM and server renderingp.16
    1. Web components orientation *(guide: web-components)*p.16
    2. Custom elements *(guide: custom-elements)*p.16
    3. Shadow DOM, templates and slots *(guide: shadow-dom)*p.16
    4. Pre-rendering custom elements *(guide: prerendering-custom-elements)*p.16
  9. 17HTML: Web components: styling, accessibility and form controlsp.17
    1. Styling web components *(guide: styling-web-components)*p.17
    2. Accessible web components *(guide: accessible-web-components)*p.17
    3. Form-associated custom elements *(guide: form-associated-custom-elements)*p.17
  10. 18Forms: Foundations for accessible, secure form buildingp.18
    1. Form best practicesp.18
  11. 19Forms: Autofill for sign-in, sign-up, address and paymentp.19
    1. Shared rules for all four flowsp.19
    2. Sign-in formp.19
    3. Sign-up formp.19
    4. Address formp.19
    5. Payment formp.19
  12. 20Forms: One-time codes and autofill stylingp.20
    1. SMS one-time passcode formp.20
    2. Styling autofilled fieldsp.20
  13. 21Forms: Validation timing and IME-safe submitp.21
    1. Shared pattern: deferred errors with ARIA syncp.21
    2. Validate input after interactionp.21
    3. Required field feedbackp.21
    4. Required select menup.21
    5. IME-safe Enter-to-submitp.21
  14. 22Forms: Styling native controlsp.22
    1. Brand-colored form controls with accent-colorp.22
    2. Custom range sliderp.22
    3. Switch togglep.22
    4. Form fields that fit their contentp.22
  15. 23Forms: Customizable selectp.23
    1. Shared rules for every customizable selectp.23
    2. Branded select stylingp.23
    3. Animated select pickerp.23
    4. Custom picker layoutsp.23
    5. Rich media pickerp.23
  16. 24UI components: Dialogs, hovercards, toasts and toursp.24
    1. Dialogp.24
    2. Hovercardp.24
    3. Toast notificationsp.24
    4. Onboarding toursp.24
  17. 25UI components: Popup menus, menu bars and toolbarsp.25
    1. Popup menup.25
    2. Application menu barp.25
    3. Toolbarp.25
  18. 26UI components: Navbars, drawers, breadcrumbs and scrollspyp.26
    1. Responsive navbarp.26
    2. Navigation drawerp.26
    3. Breadcrumbsp.26
    4. Scrollspyp.26
  19. 27UI components: Carousels and stack drill-down navigationp.27
    1. Carouselp.27
    2. Stack drill-downp.27
  20. 28UI components: Accordions, tabs and cardsp.28
    1. Accordionp.28
    2. Tabsp.28
    3. Cardp.28
  21. 29UI components: Progress bars, progress rings and spinnersp.29
    1. Progress barp.29
    2. Progress ringp.29
    3. Loading spinnerp.29
  22. 30UI components: Checkboxes, copy buttons and dark mode togglesp.30
    1. Checkboxp.30
    2. Copy buttonp.30
    3. Dark mode togglep.30
  23. 31UI behaviors: Dialogs, popovers and button commandsp.31
    1. Declarative dialog and popover controlp.31
    2. Custom button actionsp.31
    3. Light-dismiss a dialogp.31
    4. Platform controls dismiss a dialogp.31
    5. Prevent page scroll under a modal dialogp.31
  24. 32UI behaviors: Tooltips, interest previews and anchored indicatorsp.32
    1. Interest-triggered tooltipsp.32
    2. Interest-triggered action previewsp.32
    3. Anchor-positioned tab underlinep.32
  25. 33UI behaviors: Motion, entry/exit animation and easingp.33
    1. Motion fundamentalsp.33
    2. Animate element entry and exitp.33
    3. Animate to and from the top layerp.33
    4. Physics-based easingp.33
    5. Stagger sibling animationsp.33
  26. 34UI behaviors: View transitionsp.34
    1. Same-document transitionsp.34
    2. Group element transitionsp.34
    3. Directional navigation transitionsp.34
    4. Scoped component transitionsp.34
    5. Cross-document transitionsp.34
    6. Consistent cross-document transitionsp.34
  27. 35UI behaviors: Scroll-driven effectsp.35
    1. Scroll entry and exit effectsp.35
    2. Parallax scroll effectsp.35
    3. Scrollytellingp.35
    4. Interactive content revealp.35
  28. 36UI behaviors: Scroll snap carousels and scroll positionp.36
    1. Carousel snap highlightsp.36
    2. Scroll snap real-time feedbackp.36
    3. Scroll snap state syncp.36
    4. Scroll target on loadp.36
    5. Scroll completion effectsp.36
    6. Two-dimensional panningp.36
  29. 37UI behaviors: Swipe gestures and dragging floating elementsp.37
    1. Swipe to removep.37
    2. Swipe to revealp.37
    3. Drag a floating elementp.37
  30. 38UI behaviors: Reordering and moving DOM elementsp.38
    1. Move a DOM element without losing statep.38
    2. Persistent top-layer UIp.38
    3. Drag and drop to reorderp.38
    4. Dynamic sortp.38
    5. Sortable tablep.38
  31. 39UI behaviors: Findable hidden content, text highlights and arrow-key navigationp.39
    1. Search hidden contentp.39
    2. Highlight text rangesp.39
    3. Spatial navigationp.39
  32. 40Visual design: Color, contrast and dark modep.40
    1. Accessible color, forced colors and tintsp.40
    2. Readable text on a dynamic backgroundp.40
    3. Dark mode with color-scheme and light-dark()p.40
  33. 41Visual design: Theming browser UI and scrollbarsp.41
    1. Theming browser-generated UIp.41
    2. Scrollbar color and thicknessp.41
    3. High-contrast scrollbarsp.41
  34. 42Visual design: Typography, line wrapping and text alignmentp.42
    1. Typography fundamentalsp.42
    2. Balanced and pretty line breaksp.42
    3. Precise vertical text alignmentp.42
    4. Equal-width lines in headline lockupsp.42
  35. 43Visual design: Font stability and text decorationsp.43
    1. Visually stable font fallbacksp.43
    2. Visually stable mixed fontsp.43
    3. Custom text decorationsp.43
  36. 44Visual design: Masks, shapes, gradients and effectsp.44
    1. Masking fundamentals (shared by the sections below)p.44
    2. Free-form shapes with masksp.44
    3. Shaped cutouts and notchesp.44
    4. Soft edge fadep.44
    5. Texture and weatheringp.44
    6. Shadows, blend modes, gradients and patternsp.44
  37. 45Visual design: HTML in canvas (2D, WebGL, WebGPU, Three.js)p.45
    1. Shared recipe: drawable canvas, paint, textures, geometryp.45
    2. WebGL shaders on HTML contentp.45
    3. Interactive HTML in 3D scenesp.45
    4. Export HTML as images or videop.45
  38. 46Performance: Loading fundamentals, render path and render-blocking scriptsp.46
    1. Web performance fundamentalsp.46
    2. Flicker-free client-side A/B testingp.46
    3. Conditional async dependencies with top-level awaitp.46
  39. 47Performance: Fetch priority, lazy loading, images and mediap.47
    1. Optimize image priorityp.47
    2. Optimize preload priorityp.47
    3. Optimize script priorityp.47
    4. Deprioritize background fetchesp.47
    5. Lazy load video and audiop.47
    6. Deliver optimized decorative imagesp.47
    7. Resolution-optimized pseudo-elementsp.47
  40. 48Performance: Next page loads, HTML streaming and SPA viewsp.48
    1. Improve next page load performancep.48
    2. Out-of-order HTML streamingp.48
    3. Faster SPA view switches via state cachingp.48
  41. 49Performance: Main thread, scrolling and rendering workp.49
    1. Break up long tasksp.49
    2. Schedule tasks by priorityp.49
    3. Defer work until scroll endsp.49
    4. Defer rendering heavy contentp.49
    5. Interactions in complex layoutsp.49
    6. Efficient background processingp.49
  42. 50Performance: Measuring INP, heavy scripts and interaction paintsp.50
    1. Identify causes of poor INPp.50
    2. Identify heavy-running JavaScriptp.50
    3. Measure interaction and soft-navigation paint timingp.50
  43. 51Performance: Analytics beacons and page visibilityp.51
    1. Reliably measure full-session analyticsp.51
    2. Debounce and batch analytics eventsp.51
    3. Calculate total foreground timep.51
    4. Detect initial visibility statep.51
  44. 52PWA: Installing web apps and migrating their originp.52
    1. Install web appsp.52
    2. Migrate an installed web app's originp.52
  45. 53Security: Baseline hardening, security headers and staged policy rolloutp.53
    1. Web security rollout planp.53
  46. 54Security: XSS defenses, origin checks and third-party subresourcesp.54
    1. Sanitizing untrusted HTMLp.54
    2. Trusted Typesp.54
    3. Validating origins and sitesp.54
    4. Securing external subresourcesp.54
  47. 55Security: Network boundaries for outbound and local-network trafficp.55
    1. Restricting outbound connectionsp.55
    2. Local Network Accessp.55
  48. 56Security: Passkey foundations, registration and silent post-login creationp.56
    1. Passkeys orientationp.56
    2. Passkey registrationp.56
    3. Conditional create after password sign-inp.56
  49. 57Security: Passkey sign-in, quick sign-ins, reauthentication and managementp.57
    1. Passkey authenticationp.57
    2. Quick sign-ins with immediate UI modep.57
    3. Passkey reauthenticationp.57
    4. Passkey managementp.57
  50. 58Security: Client-side cryptography and passwordless email verificationp.58
    1. Client-side encryptionp.58
    2. Digital signaturesp.58
    3. Verifying email ownership without a codep.58
  51. 59Privacy: Privacy by design for web appsp.59
    1. Privacy guidelinesp.59
  52. 60JavaScript: Dates, times, time zones and calendars with Temporalp.60
    1. Location-agnostic dates, times and partial datesp.60
    2. Scheduling events in a geographic time zonep.60
    3. Elapsed and remaining time, and formatting durationsp.60
    4. Sorting nanosecond timestampsp.60
    5. Non-Gregorian calendar systemsp.60
  53. 61Built-in AI: Prompt API (on-device language model)p.61
    1. Prompt API (LanguageModel)p.61
    2. Dos and don'ts for every built-in AI APIp.61
  54. 62Built-in AI: Language detection, summarization and translationp.62
    1. Language Detector APIp.62
    2. Summarizer APIp.62
    3. Translator APIp.62
  55. 63WebMCP: Exposing page features as tools for AI agentsp.63
    1. WebMCP overview and design rulesp.63
    2. Declarative WebMCP: agentic formsp.63
    3. Imperative WebMCP: JavaScript toolsp.63
  56. 64WebAssembly: Compiling C and C++ with Emscriptenp.64
    1. C and C++ on the web with Emscriptenp.64
  57. 65Sources, license and upkeepp.65
    1. Sourcep.65
    2. Licensep.65
    3. Scopep.65
    4. Upkeepp.65