CSS Conditionals with the New if() Function — The if function opens up a slew of architectural opportunities for CSS. Here’s a look at how we can now use such inline conditionals along with media, supports, and style queries – in Chrome 137+ at least, though support should grow given the CSS WG's consensus on the feature. Demos and code aplenty.

Una Kravets

❇️ Talking of if(), here's a fun demo from YongSeok Jang showing how it can be used to illustrate logic gates with just CSS.

'We Studied 100 Dev Tool Landing Pages, Here’s What Really Works in 2025' — You're bound to find a takeaway or two from here that will prove useful – a good roundup of modern day landing pages, even.

Anton Lovchikov

Login Is Just the Start. Protect Your Flow from Real Threats — Block bots, brute force attacks, and free trial abuse before they hit your app. AuthKit gives you a fully hosted, customizable login UI with SSO, MFA, and more. Add Radar for real-time threat prevention. Trusted by fast-moving teams like Cursor.

WorkOS sponsor

CSS Intelligence: Speculating on the Future of a Smarter Language — Thanks to a growing number of ‘logical powers’, Gabriel explores how CSS is evolving to be something of a smarter language. His post looks at where things are heading, asks if things are becoming too complex, and prods at how developers are reacting to this shift.

Gabriel Shoyombo

📙 Articles, Opinions & Tutorials

What is popover=hint? — The hint popover type arrived earlier this year, and here Una breaks it down, complete with animated visuals showing the stacking ability in action, and code examples. Una notes features such as this “make building layered UI elements that are currently really hard to implement much easier”.

Una Kravets

Better CSS Shapes Using shape(): close and move — Temani wraps up their great series on getting the most out of the shape() function, this time by focusing in on two commands that you’ll likely rarely use, but are “incredibly useful when you need them”.

Temani Afif

Server-Side Support for MCP in Next.js — Multitenancy in Next.js is now one API call away. Scorecard slashed 1,000 LOC to 70 using Clerk’s new support.

Clerk sponsor

How to Create Kinetic Image Animations with React Three Fiber — A fantastic visual effect for the Web (which can try live here) that’s explained in technical detail. It’s amazing with React Three Fiber pull off and might inspire you to have a play for yourself.

Dominik Fojcik

⚛️ The link above comes via the React Status newsletter. If you've any interest in the React ecosystem, then it's well worth a look.

Custom 3D Models in Mapbox: A Step-by-Step Guide — Niche, but potentially very useful for specific custom mapping situations.
Mykola Chernyshevskyi

Automating Frontend Accessibility with Storybook 9
Dominic Nguyen

'Tailwind is the Worst Form of CSS, Except for all the Others'
Darius Cepulis

Design Guidelines for Better Notifications UX
Vitaly Friedman

🧰 Tools, Code & Resources

line-numbers: A Web Component to Add Line Numbers Next to Various HTML Elements — Useful for custom apps that show source code or other snippets that require line numbering. See examples here, which demonstrate the flexibility customization options for the line numbering.

Zach Leatherman

SurveyJS: JavaScript Libraries that Help You Build & Render Surveys & Forms on the Client — SurveyJS provides JSON schemas of your forms to capture responses easily and send them to your own backend API (Node.js, .NET, PHP, etc.).

SurveyJS sponsor

Monorail: Turn CSS Keyframe Animations into an Interactive Graph — A potentially useful visualization for something you might not inherently get a feel for otherwise. Play with the demo on the main page to get the idea.

Stanko

snapDOM 1.8: Captures DOM Nodes as Images — A rapidly maturing, fast and accurate DOM-to-image capture mechanism to capture any HTML element as a scalable SVG image, preserving styles, fonts, background images, etc. The homepage is packed with examples.

ZumerLab

Vecto3d: A Tools to Convert SVGs to 3D Models — There are some example SVG logos you can try it out with (such as the Octocat here). Includes a number of customization options to play with the look (texture, bevel, etc), and you can export in different formats. Repo here.

Lakshay Bhushan

CSS to Tailwind Converter: Convert CSS Gradients to Tailwind Classes — Paste your CSS code and the tool will generate the Tailwind-compatible version. Supports linear, radial, and conic gradients and there’s a gradient library of ready-to-use snippets.

Jack Higar

URL to Any: An All-in-One Conversion Tool — This tool lets you convert or extract the content of a page by entering the URL. Will convert to Markdown, HTML, PDF, image, JSON, XML, or plain text.

URL to Any

Spark: Advanced 3D Gaussian Splatting Renderer for Three.js — Visual examples.
World Labs Technologies, Inc.

The Gap Strikes Back: Now Stylable — Thanks to gap decorations we’ll soon be able to display styled separators between layout items. It looks to be an easy, flexible, and exciting CSS feature that will open up lots of styling possibilities — shown off here via demos and code.

Patrick Brosset

🎨 CSS Color Functions — Here’s a comprehensive overview of the various color functions and properties now available to us in CSS, including color spaces like sRGB and OKLab, and functions such as rgb(), hsl(), and oklch(). A good way to round out your understanding of the wide array of options in our CSS color toolbox.

Sunkanmi Fafowora

Master Chrome's DevTools — Join Jon Kuperman for this detailed video course and come away with the knowledge required to fix complicated UI and performance bugs. Covers performance, profiling, memory management and much more. Ready to inspect, debug and audit like a pro?

Frontend Masters sponsor

Introducing Pay Per Crawl: Enabling Content Owners to Charge AI Crawlers for Access — Cloudflare has a new, in beta, experimental service which allows AI crawlers to go over a site in exchange for compensation. You can allow, charge, or block. Curious to see where this goes.

Allen & Newton (Cloudflare)

📙 Articles, Opinions & Tutorials

PNG is Back — The PNG spec was recently updated, adding support for HDR, animations, EXIF data, and more. The last time the spec was updated? Over 20 years ago.

Chris Blume

Understanding CSS corner-shape and the Power of the Superellipse — The proposed corner-shape property hopes to expand on the capabilities of border-radius. As it’s an experimental/theoretical property, support is limited to just Chrome Canary — but this post is an interesting introduction as to what may one day be possible: “unlocks a world of new possibilities that previously required complex SVG implementations or image-based solutions”.

Amit Sheen

▶  Why Matt Mullenweg Went to 'War' Over WordPress — Patel of The Verge speaks with Mullenweg of Automattic on the long, drawn-out saga of WordPress and WPEngine, the future of the web more broadly, and some optimism that AI isn’t going to ‘wreck the web’.

Nilay Patel podcast

CSS Blob Recipes — There’s plenty of blob generators online, but we can also use things like border-radius, the shape() function, or SVGs to achieve a similar look. Juan weighs up the options.

Juan Diego Rodríguez

Custom Select (That Comes Up From the Bottom on Mobile) — Is creating a custom select element that comes up from the bottom better for thumb-reach? Chris tries to find out.

Chris Coyier

Product for Engineers Newsletter — Build better products, not just better code. Learn how to build features users love. Subscribe for free.

PostHog sponsor

You're Overthinking Web Components — Explores the benefits of using Web Components for progressively enhancing server-rendered HTML, without the need to worry about additional dependencies, the shadow DOM, or going full SPA.

Allen Sanford

A Step Into the Spatial Web: The HTML Model Element in Apple Vision Pro — Admittedly rather niche, but the ability to view 3D models in Apple’s headset directly on the web is pretty neat.

Brandel Zachernuk

Using CSS Cascade Layers with Tailwind Utilities
Zell Liew

How to Make a Design System That’s Not Boring
Brad Frost

SVG Optimization and Accessibility Basics
David Bushell

Adding Audio Effects to Dynamic Websites
Jonathan Gamble

🧰 Tools, Code & Resources

HTML Form Inspector — A new, free tool to help audit your forms — just paste in your HTML and it shares an overview of its structure and fields, highlighting any mistakes along with how to fix them.

Polypane

SVG to CSS Shape Converter: A Simple Tool That Converts SVG Paths to CSS — To get it to work, you have to make sure you paste in the value of the d attribute for a single path. Works well, but naturally would take multiple runs to create a full graphic with many paths.

Temani Afif

FliiipBook: A Simple GIF Animation App for the Web — If you've ever messed around with flipbook animation then this will be instantly familiar. Create directly in the browser, and you can download the end result. I had a go at creating a rocket — I can’t draw, but you get the idea. 😄

JONATHAN ANDREW MYERS

Params Editor: A Chrome Extension to Edit URL Parameters in the Browser — Has a comprehensive set of features including expanding long URLs with syntax highlighting, ability to add and customize all sorts of param values, a JSON editor, and more.

Utsav Barnwal

PicoSSG: A No-Config "Anti-Framework" Static Site Generator — Supports Markdown for content and Nunjucks for templating, and boasts a 1:1 file mapping approach that you might find cleaner than other solutions.

wolfram kriesing

CSV to HTML Table: Display CSV Files as Searchable, Filterable, HTML Tables — Not a new project but we haven’t featured it until now. It works by reading a CSV file in a “data” folder and has a simple API to customize the result.

Derek Eder

A Guide to Scroll-Driven Animations with Just CSS — Here’s a look at how to start using scroll-driven animations via CSS (using scroll() and view()), with no JavaScript required. There’s code examples here highlighting how this technique can used to create progress bars or animate elements into the viewport. Saron also notes accessibility and motion considerations.

Saron Yitbarek

A Short History of Web Bots and Bot Detection Techniques — A solid high-level overview of the cat-and-mouse game of web bots and various detection techniques. Looks at the evolution of bots so far, along with IP reputation, fingerprinting, headless browser flaws, proxy detection, CAPTCHAs, behavioral analysis, and more. Good stuff.

OlegWock

Become an Accessibility Expert — Gain a foundational knowledge on all things web accessibility with this updated, in-depth video course. You'll learn about semantic HTML, ARIA labels, focus styles, color contrast, and much more.

Frontend Masters sponsor

Astro 5.10 Released — The main point of interest in this release is that Astro’s responsive image feature is now production ready. Additionally this version adds a new experimental fetch feature for real-time, dynamic content, along with improvements to CSP support.

Matt Kane

Firefox 140.0: New Features, Updates and Fixes — This new version of Firefox arrived just yesterday, adding a new vertical tabs feature along with support for the Custom Highlight API, the SVG fetchpriority attribute, and more. Developer release notes here.

Mozilla

📙 Articles, Opinions & Tutorials

Liquid Glass, But in CSS — Here’s Apple’s new Liquid Glass design language, but realised with CSS. Compatibility here isn’t great, but on the whole it’s a fun, yet hard-earned bit of experimentation.

Pup Atlas

Lightly Poking at the CSS if() Function in Chrome 137 — Support for this powerful function shipped recently in Chrome and Edge — here Sunkanmi takes a high-level look at the syntax, how it works, and how we may want to use it with other properties.

Sunkanmi Fafowora

How OAuth Works — A practical guide to OAuth Scoped Access with code examples, security tips, and how third-party integrations really work.

Clerk sponsor

Color Everything in CSS — Juan aims to give us “a big enough picture for some technicalities behind color in CSS, such that you feel confident using functions like lab() or oklch() while also understanding what makes them special”.

Juan Diego Rodríguez

CSS Cascade Layers vs. BEM vs. Utility Classes: Specificity Control — Specificity can often be the cause of some unpredictable CSS behaviour, as such Victor breaks things down for us so we don’t have to lean on !important flags.

Victor Ayomipo

How JPEG Became the Internet’s Image Standard — Thirty years ago the JPEG pretty much became the dominant way to share digital images online — it wasn’t the first image format for the web, and it’s by no means the last. Ernie takes us on a history lesson.

Ernie Smith

A Better API for the Intersection and Mutation Observers — Zell refactors both the Mutation and Intersection Observers into something “way simpler to use”.

Zell Liew

▶  Why Visual Website Builders Didn't Take Off
Salma Alam-Naylor

Lessons Learned from Implementing an Inline Document Viewer
Anjali Munasinghe

Coding a 3D Audio Visualizer with Three.js, GSAP and Web Audio API
Filip Zrnzevic

JavaScript Broke the Web (and Called It Progress)
Jono Alderson

🧰 Tools, Code & Resources

Mossaik: A Web-Based Tool to Create Stylish SVG Backgrounds — Choose from a number of preset shapes including waves, polygons, circles, blobs, etc. There’s also numerous settings for each shape to edit to your needs.

Gabriel Perales

<syntax-highlight>: A Custom Element for Syntax Highlighting — A custom element that uses the CSS Custom Highlight API (supported by most modern browsers) for syntax highlighting so you don’t need to retreat the time-old method of wrapping every token in spans. GitHub repo.

André Ruffert

AI Agents in Your Frontend? Don’t Leave Access Wide Open — WorkOS helps secure agent workflows with M2M auth, least-privilege access, and visibility into runtime behavior.

WorkOS sponsor

Browser MCP: Connect AI Apps to Your Browser to Automate Tests and Tasks — Includes an MCP server plus Chrome extension that enables AI apps like VS Code, Claude, Cursor, and Windsurf to do tasks like repeatedly fill out a form or test user flows. Repo.

Browser MCP

Contrast Report: A Simple WCAG Colour Contrast Checker — Select either WCAG AA or AAA guidelines and the tool lets you generate a shareable link. One of the neat features is the “picture-in-picture” mode that uses an eyedropper for color selection.

Adam Chaboryk

Text to SVG: A Tool to Convert Any Text to an SVG Path
Ondřej Hudeček

SlimImg: In-Browser Image Compression Tool
SlimImg

A New Way to Style Gaps in CSS — The Microsoft Edge team shares an update on the work underway to implement gap decorations, a welcome addition that should do away with the need for various pseudo-element hacks. If you want to play around with things, there’s an interactive demo page showcasing what’s possible (Note: it’s behind a flag in Chromium-based browsers).

Omekara and Brosset

✅ You're Not a Front-End Developer Until You've... — A fun, tongue-in-cheek checklist of the various oddities we all do as frontend devs. We’ve shared Nic’s site before — it’s one you’ll no doubt poke around and have fun with.

Nic Chan

With SurveyJS, You Have Full Control of Your Data & Form Builder UI — Keep full control over the data you collect from users and tailor the entire form builder—UI and functionality—to fit your app and your users’ needs. SurveyJS UI libraries work with React, Angular, Vue 3; compatible with any backend and auth system. Learn more.

SurveyJS sponsor

Payload is Joining Figma — The headless Next.js-native CMS Payload has been acquired by design giant Figma. It will remain open-source but can now “integrate with design systems in ways no other CMS can”. James Mikrut went on Syntax to chat with Wes Bos about the news.

James Mikrut

HTML Spec Change: Escaping < and > in Attributes — The Chrome team tells us about an interesting recent change to the HTML specification around how angled brackets are escaped in attributes. It’s designed to help prevent mutation XSS vulnerabilities.

Michał Bentkowski

📙 Articles, Opinions & Tutorials

Animating Zooming using CSS: Transform Order is Important… Sometimes — Jakes notes how CSS uses a rather complex algorithm to decide how to approach animating transforms. He warns that if we get it wrong, you end up with an 'unnatural' animation. As such, here’s how it works (complete with feline demos), and how to avoid the potential pitfalls.

Jake Archibald

Clerk OAuth Gets a Big Upgrade — Now Fully MCP-Ready — Clerk OAuth now supports token revocation, consent screens, dynamic clients, & more—now fully MCP-ready. Learn more here.

Clerk sponsor

What I Wish Someone Told Me When I Was Getting Into ARIA — Eric shares what you need to know about ‘Accessible Rich Internet Applications’ in this approachable post, providing some guiding thoughts and debunking some common misconceptions too. A good place to pad out your understanding of all things ARIA.

Eric Bailey

Safari at WWDC '25: The Ghost of Christmas Past — Now that the dust has settled on Apple’s various announcements made last week at their annual conference, Alex shares a rather critical analysis of where things stand on the browser/web front, accusing Apple of “gaslighting” and “suppressing the web”.

Alex Russell

🔎 Nat Tarnoff also shared some post-WWDC thoughts, but specifically on Apple's new 'Liquid Glass' design system and how it poses some potential accessibility issues.

How to Keep Up With New CSS Features — Resources worth knowing about for keeping on top of CSS features, beyond just aimless Googling.

Sacha Greif

Breaking Boundaries: Building a Tangram Puzzle With (S)CSS — An interesting experiment in seeing just how far CSS can be pushed when creating interactive user interfaces.

Sladjana Stojanovic

1fr 1fr vs auto auto vs 50% 50% — You’d be forgiven that thinking these properties may do the same thing when used to create some columns, but Chris highlights the subtle differences in output.

Chris Coyier

The Hamburger-Menu Icon Today: Is it Recognizable? — After being with us for more than a decade, the hamburger menu is now an established, recognizable pattern, but “familiarity alone doesn’t erase its fundamental tradeoffs”.

Kate Kaplan

▶  Why Visual Website Builders Didn't Take Off
Salma Alam-Naylor

Want to Be a Better Frontend Engineer? Try a Week On-Call
Den Odell

Selfish Reasons for Building Accessible UIs
Nolan Lawson

The Growing Risk of Malicious Browser Extensions
Kush Pandya

🧰 Tools, Code & Resources

Anime.js 4.0: A JS Animation Library for the Web — If you’re somewhat fatigued when it comes to working with web animations, Anime.js may well refresh your appetite. This mature library recently saw a major upgrade — it's a solid option for animating CSS properties, SVGs, the DOM, and JS objects. It’s well-built, and now has fresh documentation to help you get started.

Julian Garner

🍜 Tonkotsu is Your Natural Language IDE — Tonkotsu helps build your project plan and break work down, plus it can handle multiple coding tasks in parallel that you approve. Download the app for FREE during our early access program.

Tonkotsu AI sponsor

Anchors: Tailwind Plugin That Provides a Simple API for Working with CSS Anchor Positioning — The Anchor Positioning API is not quite at full support yet in browsers, but if you’re interested in trying it out in a Tailwind project, this will help.

Toolwind

Critical CSS Generator: Web-based Tool to Extract Critical CSS from Any URL — Enter a URL along with viewport width/height along with render wait time and this tool will generate the minified CSS. The page also includes instructions on how to add it to your page.

Kigo

DarkModeJS 2.0: A Utility Package for Managing Dark Mode — Uses the matchMedia API and the prefers-color-scheme media query to fire functions whenever a user is in dark mode (or changes the mode).

Assortment

RampenSau: A Color Palette Generation Library Using Hue Cycling and Easing Functions — You can try out an implementation on the home page, which allows you to adjust numerous settings to show the capabilities of the library.

David Aerne