Explore Chrome 140: Modern CSS Counters, Variable Fonts & Popover Events

Modern web development has lots of small but powerful tools that make building websites easier. In this article, we’ll look at CSS counters, nested numbering, variable fonts, and the new popover ToggleEvent.source feature in Chrome 140.

We’ll explain what each one does, show simple examples, and share real-life uses so you can apply them in your own projects.

TL;DR ⚡

CSS Counters (counter-increment): Automatically number any element — not just list items — giving full design control for steps, cards, or headings.
Nested Numbering: Create hierarchical numbering (1.1, 1.2, 2.1…) using CSS alone, perfect for documents, tutorials, or multi-level content.
Variable Fonts (font-variation-settings): One font file can dynamically handle all weights and styles, reducing downloads and enabling flexible typography.
Popover ToggleEvent.source (Chrome 140+): Tells you exactly which element triggered a popover, useful for shared popovers, tooltips, and interactive dashboards.
✅ These small but powerful features simplify UI, improve performance, and give more control over design and interactivity.

🔢 CSS Counters (counter-increment) — Automatic Numbering Made Easy

🧩 How It Works
counter-increment is a CSS feature that automatically adds numbers to elements. Unlike <ol>, which only numbers list items, counter-increment can number any element — headings, steps, cards, or custom UI components.

It works like a built-in counter that updates itself as you add or remove content, letting you create dynamic, styled numbering without touching the HTML.

💻 Example

⚡ Make sure to read the comments thoroughly—they hold key insights that will help you grasp the concept fully!

This adds step numbers automatically without writing “Step 1”, “Step 2”, etc. in your HTML.

🤔 Question

What does counter-increment: step; mean and why do we need it when we already have <ol>?

✅ Answer:
While <ol> works great for simple ordered lists, counter-increment gives you more control.
You can number anything, not just list items, and design it however you want — inside cards, paragraphs, or even custom layouts.

For example, you can number FAQs, tutorial steps, blog headings, or dashboard items with full freedom over placement and style.

🔢 Nested Numbering (like 1.1, 1.2) — Hierarchical Counters

🧩 How It Works

Sometimes, you need multi-level numbering, like chapters and sub-chapters in a document:

1. Introduction  
1.1 Overview  
1.2 Installation  
2. Getting Started  
2.1 Setup  
2.2 Deployment

That’s where nested counters come in!
They let you create hierarchical numbering using CSS — no need for complex HTML or JavaScript.
You can control main sections (1, 2, 3) and their subsections (1.1, 1.2, etc.) easily.

💻 Example

⚡ Make sure to read the comments thoroughly—they hold key insights that will help you grasp the concept fully!

✨ Variable Fonts and font-variation-settings — One Font, Infinite Possibilities

🧩 How It Works

A variable font is like having many fonts inside one single file.

Before variable fonts, websites needed separate files for each style — for example:

Roboto-Light.ttf
Roboto-Regular.ttf
Roboto-Bold.ttf

That meant more files to download and slower performance.

Now, with variable fonts, you only need one file that can smoothly change its weight, width, or slant — all controlled in CSS!

The font-variation-settings property lets you define the default variation of a font (like weight = bold or light).
This feature became even more powerful and easier to use starting from Chrome 140. 🚀

💻 Example

⚡ Make sure to read the comments thoroughly—they hold key insights that will help you grasp the concept fully!

💡 Popover ToggleEvent.source — Know What Triggered It

🧩 How It Works

Chrome 140 introduced a new property ToggleEvent.source for popovers.

• When a popover opens or closes, the toggle event fires.
• The source property tells you which element triggered the popover — a button, link, or any interactive element.
• This is useful when multiple triggers share the same popover, or you want different behavior depending on the trigger.

💻 Example

⚡ Make sure to read the comments thoroughly—they hold key insights that will help you grasp the concept fully!

🟢 What Happens Here:

• Clicking Button 1 or Button 2 opens the same popover.
• In the console, e.source tells you which button triggered it.
• Useful for dynamic behavior depending on the source.

🤔 Question

“What exactly does ToggleEvent.source do, and why do we need it?”

✅ Answer:
Before Chrome 140, a popover could open from multiple triggers, but you couldn’t easily tell which element opened it.
ToggleEvent.source fixes that by telling you the exact element that triggered the toggle event.

🌍 Real-Life Use Cases

💻 Shared popovers — same popover opens from different buttons, but content changes depending on the trigger.
📋 Tooltips or menus — knowing the source helps position or style the popover differently.
🖱️ Interactive dashboards — multiple controls open the same info panel dynamically.
🧩 Conditional behavior — show different data depending on which element opened the popover.