CSS مدرن در سال 2024: 10 ویژگی برتر که طراحی وب را تغییر می دهد

مقدمه

CSS در طول سال‌ها به سرعت تکامل یافته است و سال 2024 ویژگی‌هایی را معرفی می‌کند که به طور چشمگیری نحوه ساخت برنامه‌های کاربردی وب مدرن را بهبود می‌بخشد. این پیشرفت‌ها CSS را قدرتمندتر، منعطف‌تر و در دسترس‌تر می‌سازد و ابزارهایی را در اختیار توسعه‌دهندگان قرار می‌دهد که برای ایجاد تجربه‌های وب زیبا و کارآمد نیاز دارند. در این مقاله، 10 مورد از تاثیرگذارترین ویژگی های CSS را که هر توسعه دهنده ای باید بداند، بررسی می کنیم.

1. پرس و جو کانتینر

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

مثال:

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

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

2. CSS Nesting

CSS Nesting سازماندهی کد را با اجازه دادن به ساختار سلسله مراتبی سبک ها، کاهش افزونگی و بهبود خوانایی ساده می کند. این به ویژه در توسعه مبتنی بر مؤلفه مفید است.

مثال:

.card {
  color: black;

  &-header {
    font-size: 1.5rem;
  }

  &-body {
    padding: 1rem;
  }
}

3. انتخابگر :has().

را :has() شبه کلاس انتخاب عناصر والد را بر اساس عناصر فرزندشان امکان پذیر می کند و نیاز به جاوا اسکریپت برای این وظایف را از بین می برد.

مثال:

form:has(input:invalid) {
  border-color: red;
}

4. انیمیشن های اسکرول محور

انیمیشن های اسکرول محور با ایجاد جلوه هایی که توسط پیمایش کاربر ایجاد می شوند، وب سایت ها را زنده می کنند و سطح جدیدی از تعامل را ارائه می دهند.

مثال:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scroll-element {
  animation: fadeIn 1s scroll-timeline(scroll);
}

5. بهبود متغیرهای CSS

را @property قانون متغیرهای CSS را با معرفی نوع چک کردن، پیش‌فرض‌ها و وراثت افزایش می‌دهد. این بهبود ویژگی های سفارشی را قابل اعتمادتر و قدرتمندتر می کند.

مثال:

@property --main-color {
  syntax: '';
  initial-value: blue;
  inherits: false;
}

button {
  color: var(--main-color);
}

6. زیرشبکه

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

مثال:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.item {
  display: subgrid;
  grid-column: span 2;
}

7. فونت های متغیر

فونت‌های متغیر چندین سبک فونت را در یک فایل ادغام می‌کنند و انعطاف‌پذیری طراحی را ارائه می‌کنند و عملکرد بارگذاری صفحه را بهبود می‌بخشند.

مثال:

h1 {
  font-variation-settings: 'wght' 700, 'ital' 1;
}

8. لایه های آبشاری

لایه های آبشاری (@layer) با تعریف لایه‌ها برای سبک‌ها، کاهش جنگ‌های اختصاصی، کنترل آبشار CSS را به توسعه‌دهندگان می‌دهد.

مثال:

@layer base {
  body {
    font-family: Arial, sans-serif;
  }
}

@layer theme {
  body {
    color: darkblue;
  }
}

9. توابع رنگ جدید

CSS دستکاری رنگ پویا را با توابعی مانند معرفی می کند color-mix()، ایجاد طرح های رنگی سازگار را آسان تر می کند.

مثال:

button {
  background-color: color-mix(in srgb, red 50%, blue);
}

10. شبه کلاس:focus-visible

را :focus-visible کلاس شبه تنها زمانی که کاربران از طریق صفحه‌کلید یا دستگاه‌های کمکی پیمایش می‌کنند، با طراحی عناصر، دسترسی را بهبود می‌بخشد.

مثال:

button:focus-visible {
  outline: 2px solid blue;
}

نتیجه گیری

ویژگی‌های مدرن CSS در سال 2024 طراحی وب را تغییر می‌دهند و ابزارهای بیشتری را برای ایجاد وب‌سایت‌های واکنش‌گرا، در دسترس و از نظر بصری خیره‌کننده به توسعه‌دهندگان ارائه می‌دهند. با پذیرش این پیشرفت‌ها، می‌توانید گردش کار خود را بهبود ببخشید، پایگاه کد خود را ساده کنید و تجربیات کاربری بهتری ارائه دهید.

برچسب ها:

توضیحات متا:

10 ویژگی برتر CSS در سال 2024 را کشف کنید، از جمله Container Queries، CSS Nesting، :has()، Subgrid، و موارد دیگر. وب سایت های سریع تر، هوشمندتر و واکنش گراتر بسازید.

TLDR – نکات برجسته برای اسکیمرها:

• سوالات کانتینر: عناصر سبک بر اساس اندازه والدین.
• CSS Nesting: سبک های تمیزتر و منظم تر.
• :has() انتخابگر: استایل والدین بر اساس شرایط کودک.
• انیمیشن های اسکرول محور: انیمیشن های تعاملی که توسط اسکرول ایجاد می شوند.
• بهبود متغیرهای CSS: قوی تر، متغیرهای تایپ شده با @property.
• زیرشبکه: شبکه های فرزند را با مسیرهای شبکه والد تراز کنید.
• فونت های متغیر: فونت های انعطاف پذیر در یک فایل
• لایه های آبشاری: مدیریت آبشار با @layer.
• توابع رنگ جدید: دستکاری رنگ پویا با color-mix().
• :focus-visible: سبک های مبتنی بر دسترسی برای کاربران صفحه کلید.

برای امتحان کردن کدام ویژگی بیشتر هیجان زده هستید؟ نظرات خود را در نظرات به اشتراک بگذارید!