10 ویژگی جدید و جذاب CSS در 2025 برای طراحی وب مدرن

کوئری‌های کانتینر (container@)

.card {
   container-type: inline-size;
}

@container (min-width: 400px) {
   .card {
       flex-direction: row;
   }
}

در قطعه کد بالا اگر عرض کانتینر والد بزرگتر از 400px شود آیتم ها به صورت افقی در کنار هم قرار می‌گیرند.

سلکتور ()has:

سلکتور ()has: می‌تواند براساس انواع مختلف انتخاب‌کننده‌ها عمل کند، از جمله کلاس‌ها، آی‌دی‌ها، تگ‌ها، یا ترکیب آن‌ها. این انعطاف‌پذیری باعث می‌شود انتخاب دقیق‌تر و دینامیک‌تری داشته باشید.

به هر عنصر div که شامل فرزندی با کلاس my-class باشد رنگ پس‌زمینه آبی روشن اعمال می‌کند.//
div:has(.my-class) {
   background-color: lightblue;
}
به هر عنصر section که شامل فرزندی با آی‌دی my-id باشد یک کادر قرمز خط‌چین اضافه می‌کند.//
section:has(#my-id) {
   border: 3px dashed red;
}
به هر article که شامل حداقل یک تگ p باشد استایل می‌دهد.//
article:has(p) {
   font-style: italic;
}
این کد به هر ul که شامل li با کلاس active باشد متن رنگ سبز می‌دهد.//
ul:has(li.active) {
   color: green;
}

📌 توجه کنید که اگر شرط has برقرار باشد، استایل به کل تگی که توسط سلکتور انتخاب شده اعمال می‌شود.

انیمیشن‌هایی مبتنی بر اسکرول (animation-timeline)

با استفاده از این ویژگی، می‌توانید تعیین کنید که یک انیمیشن چگونه به یک تایملاین خاص متصل شود. این تایملاین می‌تواند از نوع ساده باشد یا تایملاین‌های پیچیده‌تر که به اسکرول وابسته اند.

با استفاده از ویژگی scroll-timeline در CSS می‌توانید انیمیشن‌های خود را کاملاً به حرکات اسکرول وابسته کنید، بدون اینکه نیاز به جاوااسکریپت یا API‌هایی مثل IntersectionObserver داشته باشید.

• ()scroll : با اسکرول کاربر انیمیشن به طور روان اجرا می‌شود
• ()view : تعیین می‌کند که انیمیشن یک عنصر فقط زمانی اجرا شود که آن عنصر در محدوده دید صفحه قرار بگیرد یا از آن خارج شود.

.animation-timeline{
   animation: fadeIn-40 linear;
   animation-timeline: view();
}

@keyframes fadeIn-40{
  0%{
    opacity: 0;
  }40%{
    opacity: 1;
  }
}

این کد باعث می‌شود عنصری که کلاس animation-timeline دارد هنگام اسکرول صفحه به آرامی ظاهر شود. در ابتدا نامرئی است و وقتی حدود ۴۰٪ از آن در صفحه نمایش دیده شد، کاملاً قابل مشاهده می‌شود. برخلاف انیمیشن‌های معمولی که با زمان کار می‌کنند، این انیمیشن با حرکت اسکرول شما کنترل می‌شود - هرچه بیشتر پایین بیایید، المان بیشتر خودش را نشان می‌دهد.

subgrid

.grid {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr; /* سه ستون با اندازه‌های مختلف */
   gap: 10px;
}

.subgrid {
   display: grid;
   grid-template-columns: subgrid; /* از ستون‌های گرید اصلی استفاده می‌کند */
   gap: 5px;
}

@media (max-width: 768px) {
   .grid {
       grid-template-columns: 1fr; /* تغییر چیدمان گرید اصلی */
   }
   /* نیازی به تنظیم دوباره برای .subgrid نیست، خودش هماهنگ می‌شود */
}

()color-mix

این تابع جدید به طراحان اجازه می‌دهد که رنگ‌ها را ترکیب کنند و جلوه‌های بصری جذاب‌تری ایجاد کنند.

:root {
    --main-color: #3498db;
    --light: color-mix(in srgb, var(--main-color) 70%, white 30%);
    --dark: color-mix(in srgb, var(--main-color) 70%, black 30%);
}

:root {
   --main-color: #3498db;
   --light: (in srgb, var(--main-color) 70%, white 30%);
   --dark: (in srgb, var(--main-color) 70%, black 30%);
}
@media (prefers-color-scheme: dark) {
    :root { --main-color: #FF0000; }
}

accent-color

input[type="checkbox"] {
    accent-color: red; /* رنگ چک‌باکس قرمز */
}

input[type="radio"] {
    accent-color: blue; /* رنگ دکمه رادیویی آبی */
}

این ویژگی برای بهبود تجربه کاربری و هماهنگی بصری در طراحی سایت بسیار مفید است. به عنوان مثال، اگر سایت شما دارای تم خاصی باشد، می‌توانید رنگ کنترل‌ها را با آن تم هماهنگ کنید.

پراپرتی scope@

@scope (.section1) {
    h1 {
       color: blue;
    }
    p {
       font-style: italic;
    }
}

@scope (.section2) {
    h1 {
       color: red;
    }
    p {
       font-style: normal;
    }
}

استایل‌های تعریف‌شده در محدوده هر scope فقط بر عناصر مرتبط با کلاس یا انتخابگر ورودی همان scope اعمال می‌شوند.

📌 استایل‌های تحت @scope هیچ تاثیری روی عناصر خارج از محدوده تعیین‌شده ندارند.

ویژگی balanced text

ویژگی balance در CSS برای بهبود خوانایی متن به کار می‌رود، به‌ویژه زمانی که متن شامل خطوط طولانی یا چند سطر باشد. این ویژگی تلاش می‌کند تا متن را به‌طور یکنواخت بین سطرها تقسیم کند، به‌گونه‌ای که تعادل بصری بیشتری ایجاد شود.

به زبان ساده : فرض کنید شما یک عنوان دارید که در دو خط شکسته می‌شود. معمولاً مرورگر ممکن است خط اول طولانی‌تر و خط دوم کوتاه‌تر باشد. اما با استفاده از balance مرورگر سعی می‌کند طول دو خط را یکنواخت کند.

.balanced-text {
    text-wrap: balance;
}

overscroll-behavior

ویژگی overscroll-behavior در CSS به شما اجازه می‌دهد که رفتار اسکرول را در هنگام رسیدن به انتهای یک اسکرول‌کانتینر کنترل کنید. این ویژگی معمولاً برای جلوگیری از رفتارهای پیش‌فرض مرورگر، مثل کشیدن صفحه، بازگشت به صفحه قبلی یا رفرش کردن با کشیدن که در دستگاه‌های لمسی، استفاده می‌شود.

مزیت اصلی : جلوگیری از رفرش شدن سایت های تک صفحه‌ای (Single Page Application).

.overscroll{
    overscroll-behavior: contain; /* جلوگیری از اسکرول کل صفحه */
}

Content Visibility

این ویژگی به مرورگر اجازه می‌دهد که رندر محتوای خارج از دید کاربر را به تأخیر بیندازد، که می‌تواند باعث بهبود عملکرد صفحه شود.

.lazy-content {
    content-visibility: auto; /* رندر فقط در هنگام نیاز */
}

جدول پشتیبانی مرورگرها