CSS Wrapped 2025 یک گزارش سالانه از تیم Chrome DevRel است که به معرفی ۲۲ ویژگی جدید CSS و UI منتشرشده در سال ۲۰۲۵ می‌پردازد. این ویژگی‌ها با هدف ساخت رابط‌های کاربری پویا، تعاملی و غنی‌تر طراحی شده‌اند، بدون نیاز زیاد به جاوااسکریپت. تمرکز اصلی روی کاهش وابستگی به JS، بهبود دسترسی‌پذیری (accessibility)، عملکرد و ارگونومی CSS است.
این ویژگی‌ها در سه دسته اصلی تقسیم‌بندی شده‌اند:
قابلیت‌های قابل سفارشی‌سازی کامپوننت‌ها (مانند کنترل declarative برای popover و dialog، استایل‌دهی کامل به <select>، و ابزارهای native برای carousel).
تعاملات نسل بعدی (مانند انیمیشن‌های پیشرفته، queryهای مبتنی بر اسکرول، و transitionهای پیچیده).
بهینه‌سازی ارگونومی (مانند توابع شرطی if()، توابع سفارشی، و کنترل دقیق‌تر شکل و اندازه‌ها).
بسیاری از این ویژگی‌ها بخشی از پروژه Interop 2025 هستند و حالا در همه مرورگرهای اصلی (baseline) پشتیبانی می‌شوند، مانند Container Queries، Popover API، Anchor Positioning و View Transitions. این گزارش نشان‌دهنده پیشرفت چشمگیر CSS به سمت یک زبان قدرتمندتر و declarative است.
در ادامه، هر ویژگی را به صورت دسته‌بندی‌شده توضیح می‌دهم، همراه با مثال ساده کد و کاربرد آن. بیشتر این ویژگی‌ها از Chrome ۱۳۳ به بعد پشتیبانی می‌شوند.
-Invoker Commands (Chrome ۱۳۵)
اجازه می‌دهد عملیات را به صورت declarative انجام دهید، بدون JS.
مثال:
```html
<button commandfor="my-dialog" command="show-modal">باز کردن دیالوگ</button>
<dialog id="my-dialog">محتوا</dialog>
```
فرمان‌های built-in: show-modal, close, show-popover و غیره. فرمان‌های سفارشی با پیشوند --.
-Dialog Light Dismiss (Chrome ۱۳۴)
بستن دیالوگ با کلیک بیرون یا ESC، شبیه popover.
```html
<dialog closedby="any">...</dialog>
```
-popover=hint
popoverهای موقت برای tooltip و hover card که لایه‌ای هستند و یکدیگر را نمی‌بندند.
با interestfor برای hover/focus کار می‌کند.
-Customizable Select
حالا می‌توانید <select> را کاملاً استایل کنید!
```css
select::picker(select) { background: pink; }
```
داخل <option> می‌توانید HTML بگذارید (مثل تصویر).
-::scroll-marker/button()
ابزار native برای carousel: دکمه‌های اسکرول و دات‌های ناوبری.
```css
::scroll-button(inline-end) { /* استایل دکمه راست */ }
```
-scroll-target-group
لینک‌های anchor را به scroll marker تبدیل می‌کند (مثل table of contents فعال).
-Anchored Container Queries
query بر اساس موقعیت anchor (مثل flip شدن tooltip).
```css
@container anchored(fallback: flip-block) { /* استایل وقتی موقعیت عوض شد */ }
```
-Interest Invokers
hover/focus declarative با interestfor و تأخیر قابل تنظیم.
-Scroll-state Queries (Chrome ۱۳۳)
استایل بر اساس وضعیت اسکرول (snapped, stuck).
```css
@container scroll-state(snapped: x) { opacity: 0.5; }
```
-Tree Counting Functions
sibling-index() و sibling-count() برای انیمیشن‌های پویا.
مثال: staggered animation
```css
transition-delay: calc(0.1s * sibling-index());
```
-scrollIntoView() container
اسکرول فقط در نزدیک‌ترین container.
-Nested View Transition Groups
transitionهای پیچیده‌تر با nesting برای افکت‌های ۳D.
-DOM State-Preserving Move (Chrome ۱۳۳)
جابه‌جایی عنصر بدون ری‌لود (مثل ویدیو در حال پخش).
-Advanced attr()
حالا typed و برای هر پراپرتی کار می‌کند.
```css
color: attr(data-color type(<color>), blue);
```
-text-box-trim و text-box-edge
تراز دقیق متن عمودی (بر اساس cap height و غیره).
-shape() Function
clip-pathهای پیچیده و responsive.
مثال: شکل پرچم منحنی.
-if() Statements
شرطی مستقیم در CSS!
```css
flex-direction: if(media(orientation: landscape): row; else: column);
```
-Custom Functions
تعریف تابع سفارشی:
```css
@function --negate(--val) { result: calc(-1 * --val); }
```
-Expanded Range Syntax (Chrome ۱۴۲)
مقایسه >, < در style queries.
-Stretch Sizing Keyword
height: stretch; برای پر کردن فضا با احترام به margin.
-corner-shape
شکل‌های گوشه سفارشی: bevel, scoop, squircle و غیره.
این ویژگی‌ها CSS را به سطح جدیدی می‌برند و بسیاری از کارهای سابقاً JSمحور را native می‌کنند. برای تست، از کروم جدید استفاده کنید و به دموهای موجود در صفحه اصلی مراجعه کنید. 🚀
