6 قطعه CSS که هر توسعه دهنده فرانت اند در سال 2023 باید بداند

CSS ارزشمند، قدرتمند و پایداری که امروزه می توانید از آن استفاده کنید.

Adam Argyle

من معتقدم هر توسعه‌دهنده فرانت‌اند باید بداند که چگونه از جستجوهای کانتینر استفاده کند، یک تجربه اسکرول اسنپ ایجاد کند، از position: absolute با شبکه اجتناب کند، به سرعت دایره‌ای را چکش کند، از لایه‌های آبشاری استفاده کند، و با ویژگی‌های منطقی به تعداد بیشتری دست یابد. در اینجا یک مرور سریع از هر یک از این انتظارات وجود دارد.

1. یک درخواست ظرف

بالاترین ویژگی CSS درخواستی برای 10 سال متوالی، اکنون در مرورگرها پایدار است و در سال 2023 برای استفاده برای جستجوهای عرض در دسترس است.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

2. اسکرول ضربه محکم و ناگهانی

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

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

درباره پتانسیل این ویژگی CSS در این مجموعه عظیم و الهام بخش Codepen از حدود 25 دمو بیشتر بدانید.

scroll-snap-type

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

3. شمع شبکه

با شبکه CSS تک سلولی از موقعیت مطلق اجتناب کنید. هنگامی که آنها روی هم انباشته شدند، از ویژگی های justify و align برای قرار دادن آنها استفاده کنید.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

• 57
• 16
• 52
• 10.1

Source

4. دایره سریع

راه های زیادی برای ایجاد دایره در CSS وجود دارد، اما این قطعا حداقل ترین است.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Browser Support

• 88
• 88
• 89
• 15

Source

5. انواع را با لایه @ کنترل کنید

لایه‌های آبشاری می‌توانند به وارد کردن انواعی که بعداً کشف یا ایجاد شده‌اند، در جای مناسب در آبشار با مجموعه انواع اصلی کمک کنند .

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

سپس، در یک فایل کاملاً متفاوت، که در زمان تصادفی دیگری بارگذاری شده است، یک نوع جدید را به لایه دکمه اضافه کنید که گویی در تمام این مدت با بقیه آنها وجود دارد.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

• 99
• 99
• 97
• 15.4

Source

6. کمتر به خاطر بسپارید و با خواص منطقی به بیشتر برسید

این یک مدل جعبه جدید را به خاطر بسپارید و دیگر نگران تغییر لایه های چپ و راست یا حاشیه برای حالت های نوشتن بین المللی و جهت های سند نباشید . استایل های خود را از ویژگی های فیزیکی به سبک های منطقی مانند padding-inline ، margin-inline ، inset-inline تنظیم کنید و اکنون مرورگر کار تنظیم را انجام می دهد.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source