Best of CSS-Tricks — October 2025

1. 1
   Article

   CSS-Tricks·26w

   Building a Honeypot Field That Works

   Honeypot fields remain effective for preventing spam form submissions in 2025 without requiring reCAPTCHA. The key is avoiding common detection patterns: use regular text inputs instead of hidden fields, hide them with external CSS rather than inline styles, and use legitimate-sounding names like 'occupation' instead of 'honeypot'. Additional protection includes detecting user interactions through mouse movements, keyboard events, and form completion time using JavaScript. The article provides ready-to-use components for Svelte and Astro, plus vanilla JavaScript utilities for implementing these spam prevention techniques.

   36

   4
2. 2
   Article

   CSS-Tricks·27w

   Masonry: Watching a CSS Feature Evolve

   The CSS Masonry layout feature is evolving through competing proposals from Chrome (display: masonry) and WebKit (grid-based with item-flow). This debate illustrates how CSS features develop through the CSS Working Group's consensus process, where browsers prototype implementations, gather developer feedback, and negotiate technical trade-offs. The article examines lessons from Flexbox and Grid's evolution, explaining how browser politics, technical merit, and developer input shape web standards. Currently, the CSSWG has resolved that masonry will be a new display type including 'grid' in its name, while adopting the item-flow approach for implementation.

   25

   1
3. 3
   Article

   CSS-Tricks·25w

   Pure CSS Tabs With Details, Grid, and Subgrid

   A modern approach to building tabbed interfaces using only HTML and CSS, leveraging the <details> element combined with CSS Grid and Subgrid. The tutorial walks through creating a three-column tab layout where each tab is a <details> element positioned using subgrid, with tab panels displayed in a second grid row. The solution uses the ::details-content pseudo-element for styling panel content and CSS custom properties for positioning tabs dynamically. The <details> element provides built-in accessibility features including keyboard navigation and screen reader support.

   24