خلاصه CSS Wrapped 2025

 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 است.

 آموزش کامل ویژگی‌های جدید CSS در سال ۲۰۲۵

در ادامه، هر ویژگی را به صورت دسته‌بندی‌شده توضیح می‌دهم، همراه با مثال ساده کد و کاربرد آن. بیشتر این ویژگی‌ها از Chrome ۱۳۳ به بعد پشتیبانی می‌شوند.

 ۱. کامپوننت‌های قابل سفارشی‌سازی (Customizable Components)

-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 و تأخیر قابل تنظیم.

 ۲. تعاملات نسل بعدی (Next-gen Interactions)

-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 ۱۳۳)  

  جابه‌جایی عنصر بدون ری‌لود (مثل ویدیو در حال پخش).

 ۳. بهینه‌سازی ارگونومی (Optimized Ergonomics)

-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 می‌کنند. برای تست، از کروم جدید استفاده کنید و به دموهای موجود در صفحه اصلی مراجعه کنید. 🚀