\n\nThis paragraph inherits the dashed red border!\n\n
\n\n\n\n
\n```\n\n\n1
\n\n2
\n\n\n
\n\nResult\n\nThe `rule` property is not yet supported in your browser. Here’s what it looks like in supported browsers:\n\n\n\nLike `border`, the `rule` property is a shorthand property that allows us to specify the width, color, and style (dashed/dotted/solid) of the line. We can also use `row-rule` and `column-rule` if we only want to draw lines between each row or column.\n\n**Classic workaround**\n\nIn the meantime, while we wait for browsers to support gap decorations, how can we add lines between each grid cell?\n\nI’ve been using the same workaround for many years now. Here’s what it looks like:\n\nCode Playground\n\nCode editor:\n\n```\n\n\n1
\n2
\n\n\n
\n```\n\n\n1
\n\n2
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\nResult\n\nThe basic idea is that the grid itself gets a `background-color` that matches the border we want, and we add a 1px `gap` so that the background peeks through between each cell.\n\nUnfortunately, this means that we need to add a bunch of empty DOM nodes to fill each cell in the grid. It also only works if the page background is a solid color. And it’s nowhere near as flexible as the upcoming `rule` property is; for example, we can’t add a bit of space between the grid’s outer border and the inner grid lines.\n\nThis is just one of many techniques we explore in my comprehensive CSS course, [**CSS for JavaScript Developers**](https://css-for-js.dev/).\n\n## 10. Scroll state container queries\n\nCurrent Browser Support\n\nSupported in Chrome 155 and Edge 154\n\nNot supported in Firefox 157\n\nNot supported in Safari 27\n\nCurrent as of October 2026. \nMore info on [caniuse](https://caniuse.com/wf-container-scroll-state-queries)\n\nWhen working with `position: sticky`, have you ever wished there was a way to know whether the element was currently “stuck” or not? For example, maybe you’ve wanted to change the background color of a sticky header when it becomes stuck to the top of the viewport.\n\nThis [proposal](https://github.com/web-platform-tests/interop/issues/1364) is for the implementation of a new type of container query, one that matches when a `position: sticky` element switches from its typical in-flow position to being anchored to the viewport. Check it out:\n\nCode Playground\n\nCode editor:\n\n```\n\n\n1
\n2
\n\n\n\n\n\n\n\n\n\nSticky header example\n\n
\n\n\n\n👇 Scroll down 👇\n\n
\n```\n\n\n\nSticky header example\n
\n\n👇 Scroll down 👇\n
\n\nResult\n\nHere’s what this looks like, if this feature isn’t yet supported in your browser.\n\nInterestingly, this new API isn’t *just* for sticky positioning; we can use it to query all sorts of scroll-related state. For example, we can tell whether a scroll container is scrolled to the top/bottom, which can be useful for showing those scroll-indicating gradients:\n\nCode Playground\n\nCode editor:\n\n```\n\n\n\n\n
\n```\n\n\n- \n\n
- One \n\n
- Two \n\n
- Three \n\n
- Four \n\n
- Five \n\n
- Six \n\n
- Seven \n\n
- Eight \n\n
- Nine \n\n
- Ten \n\n
- Eleven \n\n
- Twelve \n\n
- Thirteen \n\n
- Fourteen \n\n
- Fifteen \n\n
- Sixteen \n\n
- Seventeen \n\n
- Eighteen \n\n
- Nineteen \n\n
- Twenty \n\n
- Twenty One \n\n
- Twenty Two \n\n
- Twenty Three \n\n
- Twenty Four \n\n
- Twenty Five \n\n
\n
\n\nResult\n\nIf there's the ability to scroll up, `scrollable: top` matches, and so we reveal the pseudo-element floating over the top of the content. When scrolled all the way up, `scrollable: top` no longer applies, and so the gradient is hidden.\n\nHere’s what this looks like in supported browsers:\n\n## Conclusion\n\nAs we head into Interop’s 7th year, it's undeniable that the project has been a smashing success for the web. I’m so glad they keep building on this success!\n\nI know it’s kind of a weird time right now for web developers, and many of us are wondering whether we even need to care about this kind of stuff anymore. If we’re delegating all of our work to LLMs, do we still need to keep up with the latest-and-greatest CSS features?\n\n**Personally, I think it’s more important than ever.** We can’t expect LLMs to use modern CSS features when so much of their training data is years old. Most of the features I’ve shared in this post can be used today as a progressive enhancement, and if history is any guide, many of them will soon be widely available.\n\nIf we want to build the best possible user experiences, we’ll need to guide our agents to take advantage of modern web features, which requires us to know about them! This is something I dug into in [a newsletter issue](https://www.joshwcomeau.com/email/wham-launch-005-elephant-2-p/) earlier this year: deep technical expertise remains *incredibly* worthwhile in the agentic era.\n\nFinally, I’d strongly encourage you to [rank your own top choices](https://interop-rank.fxdx.dev/)! There’s a ton of great proposals in this list, including some exciting JavaScript APIs like Temporal which didn’t make sense to include in this blog post.\n\n**Prior art**\n\nThe idea for this blog post came from Declan Chidlow, who [similarly released their top Interop 2027 pics](https://vale.rocks/micros/20261011-0700). In fact, [a](https://www.sarasoueidan.com/blog/interop-2027-rankings/) [bunch](https://ohhelloana.blog/my-interop-2027/) [of](https://tylersticka.com/journal/interop-2027-rank/) [us](https://pawelgrzybek.com/my-interop-2027-picks/) have shared our rankings!\n","body_html":"- \n
- One \n
- Two \n
- Three \n
- Four \n
- Five \n
- Six \n
- Seven \n
- Eight \n
- Nine \n
- Ten \n
- Eleven \n
- Twelve \n
- Thirteen \n
- Fourteen \n
- Fifteen \n
- Sixteen \n
- Seventeen \n
- Eighteen \n
- Nineteen \n
- Twenty \n
- Twenty One \n
- Twenty Two \n
- Twenty Three \n
- Twenty Four \n
- Twenty Five \n
The Future of CSS
\nJosh W. Comeau | October 20, 2026
\nFor the past few years, all of the major browser vendors (Google, Apple, Microsoft, and Mozilla, along with Igalia and Bocoup) have been working together on Interop, a project to improve universal browser support on web technologies. It’s been a remarkably successful effort; when a focus area gets added to Interop, it often winds up reaching near-100% support across all major browsers within a year. ✨
\nCSS Subgrid is a good example. Subgrid is a super-powerful extension to CSS Grid which enables entirely new layouts. It was implemented in Firefox back in 2019, but there wasn’t much movement with other browsers for years. It got added to Interop 2023, and by the end of that year, it was widely available across all modern browsers:
\n![\"A](\"https://www.joshwcomeau.com/_next/image/?url=%2Fimages%2Finterop-2027%2Fsubgrid-graph.png&w=1200&q=75\")
The Y axis shows the percentage of tests related to subgrid passing in each browser. The black “Interop” line shows tests passing in all browsers.
\nAs we reach the end of 2026, Interop 2027 is currently being planned, and the team at Mozilla has created a ranking system for us to upvote our most-requested features. They plan on using the ranking data to decide what to include for next year’s Interop!
\nIn this blog post, I want to dig into the top 10 features I voted for, to offer a bit of a preview of what CSS might look like within the next year. There will also be some little tips and tricks you can start using today!
\n1. CSS functions
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
One of the most exciting ideas is the proposal to add functions to CSS:
\n/* Define a function: */\n@function --gradient-to-transparent(--color, --direction: bottom) {\n result: linear-gradient(\n to var(--direction),\n var(--color),\n transparent;\n );\n}\n\n/* Invoke it: */\n.elem {\n background: --gradient-to-transparent(red);\n}\n\n/* …which produces: */\n.elem {\n background: linear-gradient(\n to bottom,\n red,\n transparent;\n );\n}If you’re familiar with JavaScript, this should feel pretty familiar. We define new functions with @function and specify the returned value with result.
There’s so much cool stuff we can do with this. Personally, the use case I’m most interested in is the ability to convert between polar and cartesian coordinates, a concept we use over and over in my Whimsical Animations course:
\n@function --translate-polar(--angle, --distance) {\n result: translate(\n calc(cos(var(--angle)) * var(--distance)),\n calc(sin(var(--angle)) * var(--distance))\n );\n}\n\n/* Move this element 100px at a 45° angle: */\n.particle {\n transform: --translate-polar(45deg, 100px);\n}This feels pretty “science-fiction” to me, but it’s already implemented in Chromium browsers, and if it gets added to Interop 2027, I think there’s very good odds that it could become widely available sooner rather than later!
\n2. Bevels and squircles with corner-shape
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
In CSS, we can use the border-radius property to round off the edges of our DOM nodes to create rounded rectangles. This property effectively adds a quarter-circle to each corner, connecting the 4 straight sides.
The corner-shape property is an exploration of alternative ways to connect the 4 sides of our DOM nodes. It provides a handful of new options:
Code Playground
\nCode editor:
\n<style>\n\n.box {\n\nborder-radius: 16px;\n\n&.squircle {\n\ncorner-shape: squircle;\n\n}\n\n&.bevel {\n\ncorner-shape: bevel;\n\n}\n\n&.notch {\n\ncorner-shape: notch;\n\n}\n\n&.scoop {\n\ncorner-shape: scoop;\n\n}\n\n}\n\n</style>\n\n<div class="wrapper">\n\n<div class="box">Round (default)</div>\n\n<div class="box squircle">Squircle</div>\n\n<div class="box bevel">Bevel</div>\n\n<div class="box notch">Notch</div>\n\n<div class="box scoop">Scoop</div>\n\n</div><style>\n.box {\nborder-radius: 16px;\n&.squircle {\ncorner-shape: squircle;\n}\n&.bevel {\ncorner-shape: bevel;\n}\n&.notch {\ncorner-shape: notch;\n}\n&.scoop {\ncorner-shape: scoop;\n}\n}\n</style>\n<div class="wrapper">\n<div class="box">Round (default)</div>\n<div class="box squircle">Squircle</div>\n<div class="box bevel">Bevel</div>\n<div class="box notch">Notch</div>\n<div class="box scoop">Scoop</div>\n</div>
\nResult
\n![\"5](\"https://www.joshwcomeau.com/images/interop-2027/corner-shape-options.png\")
When I first heard about this property, I was most excited about squircle. If you’re not familiar, squircles are an alternative algorithm for generating rounded corners using superellipses. Apple has been making use of them for years because they produce smoother, gentler edges.
That said, after messing around with corner-shape for a while, I find myself using corner-shape: bevel a ton. It’s great for creating video game / sci-fi UIs. Here’s a little preview of a side-project I’ve been working on, with tons of corner-shape: bevel:
![\"Screenshot](\"https://www.joshwcomeau.com/_next/image/?url=%2Fimages%2Finterop-2027%2Fbeveled-corners.png&w=750&q=75\")
We’ve technically been able to do stuff like this with clip-path or masks, but unlike those features, corner-shape actually changes the shape of the border-box. This means that our borders, outlines, and box-shadows will correctly follow the altered corner shapes!
And even though this property isn’t available in Firefox/Safari (as I write this in October 2026), I think it’s reasonable to start using it today. It’s a perfect progressive enhancement!
\n3. Infinite possibilities with border-shape
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
In addition to corner-shape, there’s a separate proposal for border-shape, which is essentially a lower-level version that allows us to draw the border ourselves.
I covered this property in depth in a recent newsletter issue, so I won’t repeat myself too much here. To summarize, border-shape lets us create whatever border shape we want using straight lines, arcs, and Bézier curves.
I used this property recently to draw this card with a big circular scoop at the top:
\n![\"Screenshot](\"https://www.joshwcomeau.com/_next/image/?url=%2Fimages%2Finterop-2027%2Fhegemon-card.png&w=1080&q=75\")
Like corner-shape, this property changes the element’s actual border box, so borders/outlines/shadows will trace it correctly. I drew the shape I wanted and then added a white border and black outline to achieve the effect shown above!
We can even animate between differnt border shapes, like I do in this clip:
\nYou can learn a bit more about this property in my newsletter issue on the subject.
\n4. Anchored Container Queries
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
I recently published a blog post on Anchor Positioning, one of the most exciting modern CSS features (which was actually prioritized in Interop 2026, and is now widely available!).
\nThe Anchor Positioning API allows us to anchor one element to another. For example, we might anchor a floating tooltip element to its trigger, so that no matter where that trigger is on the page, the tooltip will always be connected to it.
\nIf you’ve ever tried to solve this sort of problem yourself, you know it’s surprisingly tricky. For example, we might want our tooltip to float above the anchor, but what if the anchor is near the top of the viewport?
\nThis is a tooltip displaying additional information about this button.
\nThe tooltip fits comfortably.
\nThis is a tooltip displaying additional information about this button.
\nThe tooltip’s getting cut off!
\nThe original Anchor Positioning API gave us most of the tools needed to solve this problem easily in CSS. It allows us to specify fallback positions; if the target element doesn’t fit above the anchor, it can flip automatically to the bottom.
\nThe only thing missing was the ability to tell whether or not the target had flipped. We had no way to know, in CSS, whether the target element is currently sitting above or below the anchor, whether it’s using the default or fallback position. For tooltips, this is a problem because we typically want to add a little protrusion that points towards the anchor.
\nThe “Level 2” version of the Anchor Positioning API includes a new type of container query that allows us to check whether the target element is using a fallback position or not. You can learn more about it in my Anchor Positioning blog post, or check out the Interop 2027 proposal.
\n5. CSS inherit() function
\nSo honestly, I had never heard of this proposal, and as far as I can tell, it isn’t implemented in any browsers. It’s not even listed on caniuse, so I can’t display one of those little widgets!
\nAnd yet, the moment I saw it, it became something I needed to have. 😂
\nAs you might know, the inherit keyword in CSS allows us to pass a value down from the parent, even if that property isn’t typically inherited:
Code Playground
\nCode editor:
\n<style>\n\nmain {\n\nborder: 3px dashed red;\n\n}\n\np {\n\nborder: inherit;\n\n}\n\n</style>\n\n<main>\n\n<p>\n\nThis paragraph inherits the dashed red border!\n\n</p>\n\n</main><style>\nmain {\nborder: 3px dashed red;\n}\np {\nborder: inherit;\n}\n</style>\n<main>\n<p>\nThis paragraph inherits the dashed red border!\n</p>\n</main>
\nResult
\nThis is a useful little trick to reuse values, but I frequently wind up discovering that it doesn’t quite work. For example, suppose we have nested border radiuses (or is it radii?):
\nCode Playground
\nCode editor:
\n<style>\n\nmain {\n\nborder: 2px solid red;\n\nborder-radius: 16px;\n\n}\n\np {\n\nborder: inherit;\n\nborder-radius: inherit;\n\n}\n\n</style>\n\n<main>\n\n<p>\n\nThis paragraph inherits the dashed red border!\n\n</p>\n\n</main><style>\nmain {\nborder: 2px solid red;\nborder-radius: 16px;\n}\np {\nborder: inherit;\nborder-radius: inherit;\n}\n</style>\n<main>\n<p>\nThis paragraph inherits the dashed red border!\n</p>\n</main>
\nResult
\nIn order for nested border radii to look correct, we need to reduce the amount of rounding on the inner radius. So I don’t exactly want to use the inherited value; I want to transform it.
\nThat's where the proposed inherit() function comes in. It will pluck the inherited value and allow us to modify it using calc():
p {\n border-radius: calc(inherit() - 4px);\n}Given how preliminary this feature is, I’d be a bit surprised if it makes the cut for Interop 2027. But I hope we do get this feature in the future! It seems super useful. 😄
\n6. Scroll-triggered animations
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
In my blog post on scroll-driven animations, we explore how we can scrub through a keyframe animation by scrolling. For example, we can use it to fade an element in as it traverses the viewport:
\n100%
\n80%
\n60%
\n40%
\n20%
\n0%
\nScroll-driven animations were part of Interop 2026, and it’s been successfully implemented across all browsers. In addition to Scroll-driven animations, however, there’s a separate proposal for scroll-triggered animations.
\nWith scroll-triggered animations, the goal is to trigger a keyframe animation when the user scrolls to a specific point, like a proximity sensor going off. At that point, the animation runs normally over a specified duration.
\nWe can currently implement scroll-triggered animations using the IntersectionObserver API in JavaScript, but it’s kind of a pain. It’ll be super nice when we can use CSS for both scroll-driven and scroll-triggered animations, since they each have their own use cases.
You can learn more about scroll-triggered animations in this wonderful article by Bramus.
\n7. CSS reading-flow and reading-order
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
I’m currently working on a which involves a dynamic grid-based layout. Items are arranged very differently on desktop vs. mobile:
\n![\"A](\"https://www.joshwcomeau.com/images/interop-2027/btn-sounds-desktop.png\")
Desktop Layout
\n![\"A](\"https://www.joshwcomeau.com/images/interop-2027/btn-sounds-mobile.png\")
Mobile Layout
\nThis is one of the great things about responsive CSS, but it leads to an unfortunate side effect: tab order is always based on the DOM order, not the visual order. So, if someone uses assistive technologies to navigate between elements, that navigation order will always be the same, even as the layout changes dramatically depending on screen size.
\nOn desktop, the first visual item is that list of Redactedsounds on the left, but on mobile, the first item is that big red button. Whichever element comes first in the DOM will be the first item to receive focus, which will invariably be wrong for a percentage of our users.
\nThankfully, the new reading-flow property grants us a solution to this problem, and there’s a proposal for Interop 2027.
The basic idea is that we can specify that the tab order should follow one of several visual orders:
\n.grid {\n display: grid;\n reading-flow: grid-rows;\n}There are values for both CSS Grid and Flexbox, and if you need even more control, the reading-order property allows us to create a custom order, sorta like tabIndex in HTML.
This property has been championed by one of my personal heroes, Rachel Andrew. You can read more about it in her blog post on reading-flow.
\n8. Keyword size animations with interpolate-size and calc-size()
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
A long-standing pain point on the web has been the inability to animate between keyword values like auto. The interpolate-size property solves this problem, and there’s an Interop 2027 proposal for it, alongside the related calc-size() function.
The most common use case for this feature is to animate between height: 0 and height: auto, for creating collapsible accordion-type UIs:
Code Playground
\nCode editor:
\n<style>\n\nhtml {\n\ninterpolate-size: allow-keywords;\n\n}\n\n@supports (\n\ninterpolate-size: allow-keywords\n\n) {\n\ndetails {\n\noverflow: hidden;\n\n&::details-content {\n\nheight: 0;\n\ntransition:\n\nheight 300ms,\n\ncontent-visibility 300ms;\n\ntransition-behavior: allow-discrete;\n\n}\n\n&:open::details-content {\n\nheight: auto;\n\n}\n\n}\n\n}\n\n</style>\n\n<details>\n\n<summary>Click me to show/hide!</summary>\n\n<p>This is the hidden content which animates as it is shown/hidden. 😄</p>\n\n</details><style>\nhtml {\ninterpolate-size: allow-keywords;\n}\n@supports (\ninterpolate-size: allow-keywords\n) {\ndetails {\noverflow: hidden;\n&::details-content {\nheight: 0;\ntransition:\nheight 300ms,\ncontent-visibility 300ms;\ntransition-behavior: allow-discrete;\n}\n&:open::details-content {\nheight: auto;\n}\n}\n}\n</style>\n<details>\n<summary>Click me to show/hide!</summary>\n<p>This is the hidden content which animates as it is shown/hidden. 😄</p>\n</details>
\nResult
\nThe interpolate-size property is not yet supported in your browser. Here’s what it looks like in supported browsers:
This is admittedly kind of a complex example, requiring other niche-but-well-supported CSS like transition-behavior. But the key thing is that interpolate-size: allow-keywords makes this sort of transition possible.
This proposal has been kicking around for a while now, and it’s been implemented in Chrome since 2024, so hopefully it makes it into Interop 2027!
\nAnd even though it isn’t yet available in all browsers, we can start using it today as a progressive enhancement. Just be sure to gate the transition behind a @supports query, since otherwise a brief delay will be added to unsupported browsers.
9. CSS gap decorations
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
One of the things that makes CSS Grid layout unique is that the grid children are positioned using rows/columns defined entirely in CSS. In every other layout mode, elements are positioned using other elements! In Table layout, for example, every grid cell has an associated <td> or <th> element.
There are a lot of upsides to CSS Grid, but one of the downsides is that it’s not as easy to add borders between grid cells. If a grid cell is empty, there’s no element to slap a border: 1px solid on!
The gap decorations proposal introduces a new set of CSS properties that will allow us to use a border-like syntax on the grid itself. Check this out:
\nCode Playground
\nCode editor:
\n<style>\n\n.grid {\n\ndisplay: grid;\n\ngrid-template-columns: repeat(3, 1fr);\n\ngrid-template-rows: repeat(3, 1fr);\n\ngap: 1px;\n\nborder: 1px solid red;\n\n/* 👇 The new feature 👇 */\n\nrule: 1px solid red;\n\n}\n\n</style>\n\n<div class="grid">\n\n<div class="child">1</div>\n\n<div class="child">2</div>\n\n</div><style>\n.grid {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngrid-template-rows: repeat(3, 1fr);\ngap: 1px;\nborder: 1px solid red;\n/* 👇 The new feature 👇 */\nrule: 1px solid red;\n}\n</style>\n<div class="grid">\n<div class="child">1</div>\n<div class="child">2</div>\n</div>
\nResult
\nThe rule property is not yet supported in your browser. Here’s what it looks like in supported browsers:
![\"A](\"https://www.joshwcomeau.com/images/interop-2027/row-rule.png\")
Like border, the rule property is a shorthand property that allows us to specify the width, color, and style (dashed/dotted/solid) of the line. We can also use row-rule and column-rule if we only want to draw lines between each row or column.
Classic workaround
\nIn the meantime, while we wait for browsers to support gap decorations, how can we add lines between each grid cell?
\nI’ve been using the same workaround for many years now. Here’s what it looks like:
\nCode Playground
\nCode editor:
\n<style>\n\n.grid {\n\ndisplay: grid;\n\ngrid-template-columns: repeat(3, 1fr);\n\ngrid-template-rows: repeat(3, 1fr);\n\ngap: 1px;\n\npadding: 1px;\n\nbackground-color: red;\n\n}\n\n.empty.child {\n\nbackground-color: white;\n\n}\n\n</style>\n\n<div class="grid">\n\n<div class="child">1</div>\n\n<div class="child">2</div>\n\n<div class="empty child"></div>\n\n<div class="empty child"></div>\n\n<div class="empty child"></div>\n\n<div class="empty child"></div>\n\n<div class="empty child"></div>\n\n<div class="empty child"></div>\n\n<div class="empty child"></div>\n\n</div><style>\n.grid {\ndisplay: grid;\ngrid-template-columns: repeat(3, 1fr);\ngrid-template-rows: repeat(3, 1fr);\ngap: 1px;\npadding: 1px;\nbackground-color: red;\n}\n.empty.child {\nbackground-color: white;\n}\n</style>\n<div class="grid">\n<div class="child">1</div>\n<div class="child">2</div>\n<div class="empty child"></div>\n<div class="empty child"></div>\n<div class="empty child"></div>\n<div class="empty child"></div>\n<div class="empty child"></div>\n<div class="empty child"></div>\n<div class="empty child"></div>\n</div>
\nResult
\nThe basic idea is that the grid itself gets a background-color that matches the border we want, and we add a 1px gap so that the background peeks through between each cell.
Unfortunately, this means that we need to add a bunch of empty DOM nodes to fill each cell in the grid. It also only works if the page background is a solid color. And it’s nowhere near as flexible as the upcoming rule property is; for example, we can’t add a bit of space between the grid’s outer border and the inner grid lines.
This is just one of many techniques we explore in my comprehensive CSS course, CSS for JavaScript Developers.
\n10. Scroll state container queries
\nCurrent Browser Support
\nSupported in Chrome 155 and Edge 154
\nNot supported in Firefox 157
\nNot supported in Safari 27
\nCurrent as of October 2026.
\nMore info on caniuse
When working with position: sticky, have you ever wished there was a way to know whether the element was currently “stuck” or not? For example, maybe you’ve wanted to change the background color of a sticky header when it becomes stuck to the top of the viewport.
This proposal is for the implementation of a new type of container query, one that matches when a position: sticky element switches from its typical in-flow position to being anchored to the viewport. Check it out:
Code Playground
\nCode editor:
\n<style>\n\nheader {\n\nposition: sticky;\n\ntop: 0;\n\ncontainer-type: scroll-state;\n\n}\n\n@container scroll-state(stuck: top) {\n\n.header-content {\n\nbackground: var(--gray-300);\n\nborder-bottom:\n\n1px solid var(--gray-500);\n\n}\n\n}\n\n</style>\n\n<header>\n\n<div class="header-content">\n\nSticky header example\n\n</div>\n\n</header>\n\n<p>\n\n👇 Scroll down 👇\n\n</p><style>\nheader {\nposition: sticky;\ntop: 0;\ncontainer-type: scroll-state;\n}\n@container scroll-state(stuck: top) {\n.header-content {\nbackground: var(--gray-300);\nborder-bottom:\n1px solid var(--gray-500);\n}\n}\n</style>\n<header>\n<div class="header-content">\nSticky header example\n</div>\n</header>\n<p>\n👇 Scroll down 👇\n</p>
\nResult
\nHere’s what this looks like, if this feature isn’t yet supported in your browser.
\nInterestingly, this new API isn’t just for sticky positioning; we can use it to query all sorts of scroll-related state. For example, we can tell whether a scroll container is scrolled to the top/bottom, which can be useful for showing those scroll-indicating gradients:
\nCode Playground
\nCode editor:
\n<style>\n\n.container {\n\nheight: 100%;\n\ncontainer-type: scroll-state size;\n\noverflow: auto;\n\n&::before {\n\ntop: 0;\n\nbackground: linear-gradient(\n\nto bottom,\n\nblack,\n\ntransparent\n\n);\n\nopacity: 0;\n\n@container scroll-state(scrollable: top) {\n\nopacity: 1;\n\n}\n\n}\n\n&::after {\n\nbottom: 0;\n\nbackground: linear-gradient(\n\nto top,\n\nblack,\n\ntransparent\n\n);\n\nopacity: 0;\n\n@container scroll-state(scrollable: bottom) {\n\nopacity: 1;\n\n}\n\n}\n\n/* Shared styles */\n\n&::before, &::after {\n\ncontent: '';\n\nposition: absolute;\n\nleft: 0;\n\nright: 0;\n\nheight: 50px;\n\npointer-events: none;\n\ntransition: opacity 300ms;\n\n}\n\n}\n\n</style>\n\n<div class="container">\n\n<ul>\n\n<li>One</li>\n\n<li>Two</li>\n\n<li>Three</li>\n\n<li>Four</li>\n\n<li>Five</li>\n\n<li>Six</li>\n\n<li>Seven</li>\n\n<li>Eight</li>\n\n<li>Nine</li>\n\n<li>Ten</li>\n\n<li>Eleven</li>\n\n<li>Twelve</li>\n\n<li>Thirteen</li>\n\n<li>Fourteen</li>\n\n<li>Fifteen</li>\n\n<li>Sixteen</li>\n\n<li>Seventeen</li>\n\n<li>Eighteen</li>\n\n<li>Nineteen</li>\n\n<li>Twenty</li>\n\n<li>Twenty One</li>\n\n<li>Twenty Two</li>\n\n<li>Twenty Three</li>\n\n<li>Twenty Four</li>\n\n<li>Twenty Five</li>\n\n</ul>\n\n</div><style>\n.container {\nheight: 100%;\ncontainer-type: scroll-state size;\noverflow: auto;\n&::before {\ntop: 0;\nbackground: linear-gradient(\nto bottom,\nblack,\ntransparent\n);\nopacity: 0;\n@container scroll-state(scrollable: top) {\nopacity: 1;\n}\n}\n&::after {\nbottom: 0;\nbackground: linear-gradient(\nto top,\nblack,\ntransparent\n);\nopacity: 0;\n@container scroll-state(scrollable: bottom) {\nopacity: 1;\n}\n}\n/* Shared styles */\n&::before, &::after {\ncontent: '';\nposition: absolute;\nleft: 0;\nright: 0;\nheight: 50px;\npointer-events: none;\ntransition: opacity 300ms;\n}\n}\n</style>\n<div class="container">\n<ul>\n<li>One</li>\n<li>Two</li>\n<li>Three</li>\n<li>Four</li>\n<li>Five</li>\n<li>Six</li>\n<li>Seven</li>\n<li>Eight</li>\n<li>Nine</li>\n<li>Ten</li>\n<li>Eleven</li>\n<li>Twelve</li>\n<li>Thirteen</li>\n<li>Fourteen</li>\n<li>Fifteen</li>\n<li>Sixteen</li>\n<li>Seventeen</li>\n<li>Eighteen</li>\n<li>Nineteen</li>\n<li>Twenty</li>\n<li>Twenty One</li>\n<li>Twenty Two</li>\n<li>Twenty Three</li>\n<li>Twenty Four</li>\n<li>Twenty Five</li>\n</ul>\n</div>
\nResult
\nIf there's the ability to scroll up, scrollable: top matches, and so we reveal the pseudo-element floating over the top of the content. When scrolled all the way up, scrollable: top no longer applies, and so the gradient is hidden.
Here’s what this looks like in supported browsers:
\nConclusion
\nAs we head into Interop’s 7th year, it's undeniable that the project has been a smashing success for the web. I’m so glad they keep building on this success!
\nI know it’s kind of a weird time right now for web developers, and many of us are wondering whether we even need to care about this kind of stuff anymore. If we’re delegating all of our work to LLMs, do we still need to keep up with the latest-and-greatest CSS features?
\nPersonally, I think it’s more important than ever. We can’t expect LLMs to use modern CSS features when so much of their training data is years old. Most of the features I’ve shared in this post can be used today as a progressive enhancement, and if history is any guide, many of them will soon be widely available.
\nIf we want to build the best possible user experiences, we’ll need to guide our agents to take advantage of modern web features, which requires us to know about them! This is something I dug into in a newsletter issue earlier this year: deep technical expertise remains incredibly worthwhile in the agentic era.
\nFinally, I’d strongly encourage you to rank your own top choices! There’s a ton of great proposals in this list, including some exciting JavaScript APIs like Temporal which didn’t make sense to include in this blog post.
\nPrior art
\nThe idea for this blog post came from Declan Chidlow, who similarly released their top Interop 2027 pics. In fact, a bunch of us have shared our rankings!
","headings":[{"level":1,"text":"The Future of CSS","id":"the-future-of-css"},{"level":2,"text":"1. CSS functions","id":"1-css-functions"},{"level":2,"text":"2. Bevels and squircles with corner-shape","id":"2-bevels-and-squircles-with-corner-shape"},{"level":2,"text":"3. Infinite possibilities with border-shape","id":"3-infinite-possibilities-with-border-shape"},{"level":2,"text":"4. Anchored Container Queries","id":"4-anchored-container-queries"},{"level":2,"text":"5. CSS inherit() function","id":"5-css-inherit-function"},{"level":2,"text":"6. Scroll-triggered animations","id":"6-scroll-triggered-animations"},{"level":2,"text":"7. CSS reading-flow and reading-order","id":"7-css-reading-flow-and-reading-order"},{"level":2,"text":"8. Keyword size animations with interpolate-size and calc-size()","id":"8-keyword-size-animations-with-interpolate-size-and-calc-size"},{"level":2,"text":"9. CSS gap decorations","id":"9-css-gap-decorations"},{"level":2,"text":"10. Scroll state container queries","id":"10-scroll-state-container-queries"},{"level":2,"text":"Conclusion","id":"conclusion"}]}}