UI Components출처: CSS-Tricks조회수 1
What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More
By Daniel Schwarz2026년 3월 17일
**What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More**
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, customizable <select>, :open, scroll-triggered animations, <toolbar>, and somehow, more. Understanding random() and random-item() Alvaro Montoro explains how the random() and random-item() CSS functions work. As it turns out, they’re actually quite complex: width: random(--w element-shared, 1rem, 2rem); color: random-item(--c, red, orange, yellow, darkkhaki); Creating folded corners using clip-path My first solution to folded corners involved actual images. Not a great solution, but that was the way to do it in the noughties...
---
**[devsupporter 해설]**
이 기사는 CSS-Tricks에서 제공하는 최신 개발 동향입니다. 관련 도구나 기술에 대해 더 알아보시려면 원본 링크를 참고하세요.
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, customizable <select>, :open, scroll-triggered animations, <toolbar>, and somehow, more. Understanding random() and random-item() Alvaro Montoro explains how the random() and random-item() CSS functions work. As it turns out, they’re actually quite complex: width: random(--w element-shared, 1rem, 2rem); color: random-item(--c, red, orange, yellow, darkkhaki); Creating folded corners using clip-path My first solution to folded corners involved actual images. Not a great solution, but that was the way to do it in the noughties...
---
**[devsupporter 해설]**
이 기사는 CSS-Tricks에서 제공하는 최신 개발 동향입니다. 관련 도구나 기술에 대해 더 알아보시려면 원본 링크를 참고하세요.