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;
}
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);
}
}
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;
}
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>
- 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);
6. Advanced attr() Function
<div data-color="blue">This text will be blue</div>
<div>This text will fall back to red</div>
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>
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.
Top comments (0)