The CSS features you need to know this year, including Grid Lanes

🎉 Happy New Year! This is the very first issue of Frontend Focus for 2026, but if you're still feeling a touch reflective, our previous issue looked back over the most popular links shared throughout 2025 — you can see that here if you missed it. With that, let's get into this week's issue.
__
Your editor, Chris Brandrick

Introducing CSS Grid Lanes — You may remember a lot of chatter last year about how best to achieve Masonry layouts in CSS. Well, an approach has now been agreed upon, and it’s called Grid Lanes (display: grid-lanes;). There are still a few minor details to iron out, but the feature is ready for testing (in Safari Technology Preview right now) as explained in excellent detail here. A new one to commit to memory!

Simmons, Etemad, & Stewart (WebKit)

How to Stop Bots from Abusing Free Trials — Bots exploit trial signups and drain compute. WorkOS Radar uses device fingerprinting, traffic analysis, and behavioral signals to detect and block abuse in real time while integrating cleanly with your existing auth flow through a simple API.

WorkOS sponsor

4 CSS Features Every Frontend Developer Should Know In 2026 — Adam returns with his annual picks of what features you now need to be aware of. The 2026 suggestions include knowing how to query scroll states, trimming typographic whitespace, and more.

Adam Argyle

🗳️ The Results: State of HTML 2025 — Reflections on the year that was. The conclusion highlights how developer interest seems firmly grounded in using practical and functional features over the more fanciful offerings. Plus, any pain points highlighted in the survey results are noted as thankfully being actively worked on. It’s a good snapshot of where HTML sits today, and always makes for an interesting read.

Devographics

📙 Articles, Opinions & Tutorials

🔮 The 8 Trends That Will Define Web Development in 2026 — David busts out the crystal ball to make some picks for what the year ahead may look like, touching upon AI development, meta-frameworks, the rise of TypeScript, utility CSS, and more.

David Omotayo

Directional CSS with Scroll-State (Scrolled) — Una takes a look at the new scroll-state() query and how it lets us apply styles based on scroll directions. Unlocks some interesting possibilities, as the demos here show.

Una Kravets

Take AI Agents and MCP Servers From Playground to Production — Learn identity challenges that prevent AI production-readiness and tips to build secure, scalable AI / MCP systems.

Descope sponsor

Chrome DevTools Features I Use All The Time (And Why You Should Too) — Runs through a bunch of features, why they are useful, and how you may want to use them. Good advice, clearly explained, that will no doubt improve your frontend instincts.

Keerthana Krishnan

Useful Patterns for Building HTML Tools — In many situations, you don’t need a full-on framework to build useful tools – just HTML, JavaScript and CSS in a single file will do the job. Simon’s become a bit of an expert by rolling out many such tools and shares his process and practices here. More please!

Simon Willison

A Minimal CSS Starter — Jens doesn’t use a CSS reset, but they do reach for a handful of properties with each project. Here’s a quick look at what those properties/values are and how they help.

Jens Oliver Meiert

5 Accessibility Checks to Run On Every Component
Hidde De Vries

Why Federated Design Systems Keep Failing
Shaun Bent

The Cost of Consistency: Avoiding Design System Bottlenecks
Omid Farhang

How to Load CSS (Fast)
Yoav Weiss

🧰 Tools, Code & Resources

Markdown UI: An Open Standard for Rendering Interactive Widgets in Plain Markdown — Useful for easily converting Markdown-based docs to interactive components. You can use any framework and includes widgets for complex forms, interactive charts, etc. Try the demo.

Blueprint

Ready to Query Billions of Rows in Milliseconds? — Full PostgreSQL + hypertables, compression, continuous aggregates. Get real-time analytics without the complexity.

Tiger Data (creators of TimescaleDB) sponsor

color.js Release v0.6.0 — The wildly popular (over 100 million downloads) standards-compliant color conversion and manipulation library marches on to its eventual 1.0 release.

Lea Verou

color-input: A Modern Color Picker with Support for All Color Spaces — Works as a standalone web component powered by Color.js and Preact Signals for state. Allows you to choose from sRGB, HSL, LAB, LCH, OKLCH, OKLAB, and more. Try it out here.

Adam Argyle

<relative-time> 5.0: Format Timestamps as a Localized Relative Time — Supply this web component with a standard formatted date and time and it’ll render “2 days ago”, say. GitHub uses this itself on all repo and code views.

GitHub

Auld English: Fonts That Simulate Reading in the Olden Days — The paid version has some extras, but the free version includes roman, italic, and the old-style “long S”, which was evidently abandoned around the year 1800.

Nick Shinn

ExposedByDefault: What Your Browser Reveals About You — Visit this page and it will scan for information your browser exposes automatically, under two dozen or so categories like audio, graphics, geolocation, media, and so on (AKA your browser fingerprint).

NT

safe-npm: Safely Install NPM Packages — Works by reading your dependencies and only installing package versions that have been publicly available for a specified amount of time (90 days is the default).

Kevin Lin