DEV Community

Cover image for 6 Exciting Updates from the Chrome 133 Beta for Web Developers
Muhammad Usman
Muhammad Usman

Posted on

1 1 1 1 1

6 Exciting Updates from the Chrome 133 Beta for Web Developers

There's too much cool stuff in here not to actually talk about. If you're wondering what that is, you probably know you clicked on it, but the Chrome 133 beta has just come out, and there's some really good stuff in here. I just wanted to share it with community. I don't think you should learn everything or know how everything works, but just be aware of what's possible. So when you need it, you know about it. Following release notes is a good way to do that.

1. Open Pseudo-Class

Let's start with this one: the open pseudo-class. It's not the most exciting thing, but it's kind of cool. We have an open pseudo-class that matches <dialog> and <details> when they're in their open state. It also matches <select> and <input> when they have a picker or other thing showing, which is really cool.

Code Example:

/* Style open dialogs/details */
:open {
 border: 2px solid blue;
}

/* Style selects with active picker */
select:open {
 background: #f0f0f0;
}
Enter fullscreen mode Exit fullscreen mode

2. Scroll-State: Stuck and Snapped

This is something that people are very excited about. The scroll-state: stuck and scroll-state: snapped properties are really exciting. We now have a stuck state. We also have a snapped state that triggers styles when an element is snapped. If you're using scroll snapping, this is perfect. Here's an example with a scroll-driven animation:

/* Define a sticky element with scroll-state container */
.sticky-element {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

/* Apply styles when the element is stuck to the top */
@container scroll-state(stuck: top) {
  .sticky-element {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}

Enter fullscreen mode Exit fullscreen mode

3. Textbox Trim

Textbox trim—this is a feature we've definitely been wanting for a while. The textbox trim and textbox edge feature allow you to cut off the extra space around text. Here's an example:

Code Example:

/* Trim text at x-height */
.text-trim {
 text-box-trim: x-height;
}

/* Trim at cap height */
.heading {
 text-box-trim: cap-height;
}

Enter fullscreen mode Exit fullscreen mode

4. Hint Value for Popovers

The popover attribute now has three values: Auto, Manual, and Hint. This feature is great for tooltips or similar UI elements.

Code Example:

<button popover="hint" popovertarget="my-tooltip">Hover me</button>
<div id="my-tooltip" popover>Tooltip content</div>

Enter fullscreen mode Exit fullscreen mode
  1. DOM State Preserving Mode This adds a DOM primitive, node.prototype.moveBefore, that lets you move elements around the DOM tree without resetting their state.
Code Example:
// Move element without losing state
const element = document.getElementById('my-iframe');
const newParent = document.getElementById('new-container');
element.moveBefore(newParent.firstChild);

Enter fullscreen mode Exit fullscreen mode

6. Advanced attr() Function

<div data-color="blue">This text will be blue</div>
<div>This text will fall back to red</div>
Enter fullscreen mode Exit fullscreen mode

The attr() function now supports fallback values like custom properties:

Code Example:

/* Use data attribute with fallback */
div {
 color: attr(data-color color, red);
}
<div data-color="blue">This text will be blue</div>
<div>This text will fall back to red</div>

Enter fullscreen mode Exit fullscreen mode

I write a lot more about this idea of keeping up with the state of CSS and web development in general. I also briefly discussed how struggling with this can sometimes lead to imposter syndrome and other challenges.

If you found this Chrome beta 133 update helpful, your support with a like and follow would mean a lot! Thank you for reading, and I look forward to sharing more with you in the future.

Connect with me on other platforms:
LinkedIn | Medium | Bluesky

Want to know more on this update? Follow the official resource below.

Official Resource

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay