In [_Boundary-Aware Styling in CSS_](https://master.dev/blog/boundary-aware-styling-in-css/), Preethi Sam explores using the CSS `view()` function to style elements according to their physical position within a container—even when nothing is actually scrolling.

> “Instead of relying on class names, item counts, or sibling positions, we can achieve this with a single CSS function.”

What I find interesting is how this replaces information we normally encode manually. We add special classes, write increasingly fragile `:nth-child()` selectors, or reach for JavaScript just to determine whether something is near an edge.

Here, the layout itself becomes the source of truth. CSS responds to where the element actually is instead of depending on markup that merely describes where we expect it to be.

It is a clever reuse of a scroll-animation feature for something broader: interfaces that understand and respond to their own geometry.

Read the full article: [_Boundary-Aware Styling in CSS_ by Preethi Sam](https://master.dev/blog/boundary-aware-styling-in-css/)

In <a href="https://master.dev/blog/boundary-aware-styling-in-css/">Boundary-Aware Styling in CSS</a>, Preethi Sam explores using the CSS <code>view()</code> function to style elements according to their physical position within a container—even when nothing is actually scrolling.
<blockquote>
“Instead of relying on class names, item counts, or sibling positions, we can achieve this with a single CSS function.”
</blockquote>
What I find interesting is how this replaces information we normally encode manually. We add special classes, write increasingly fragile <code>:nth-child()</code> selectors, or reach for JavaScript just to determine whether something is near an edge.
Here, the layout itself becomes the source of truth. CSS responds to where the element actually is instead of depending on markup that merely describes where we expect it to be.
It is a clever reuse of a scroll-animation feature for something broader: interfaces that understand and respond to their own geometry.
Read the full article: <a href="https://master.dev/blog/boundary-aware-styling-in-css/">Boundary-Aware Styling in CSS by Preethi Sam</a>

In [_Boundary-Aware Styling in CSS_](https://master.dev/blog/boundary-aware-styling-in-css/), Preethi Sam explores using the CSS `view()` function to style elements according to their physical position within a container—even when nothing is actually scrolling.

 function to style elements according to their physical position within a container—even when nothing is actually scrolling.

“Instead of relying on class names, item counts, or sibling positions, we can achieve this with a single CSS function.”

What I find interesting is how this replaces information we normally encode manually. We add special classes, write increasingly fragile `:nth-child()` selectors, or reach for JavaScript just to determine whether something is near an edge.

What I find interesting is how this replaces information we normally encode manually. We add special classes, write increasingly fragile 

 selectors, or reach for JavaScript just to determine whether something is near an edge.

Here, the layout itself becomes the source of truth. CSS responds to where the element actually is instead of depending on markup that merely describes where we expect it to be.

It is a clever reuse of a scroll-animation feature for something broader: interfaces that understand and respond to their own geometry.

Read the full article: [_Boundary-Aware Styling in CSS_ by Preethi Sam](https://master.dev/blog/boundary-aware-styling-in-css/)

_Boundary-Aware Styling in CSS_ by Preethi Sam

Layout itself can be the source of truth when CSS responds to where an element actually is on the page, not only to fixed breakpoints.