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

پشتیبانی مرورگر

• 105
• 105
• 110
• 16

منبع

container

پشتیبانی مرورگر

• 105
• 105
• 110
• 16

منبع

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

پشتیبانی مرورگر

• 69
• 79
• 99
• 11

منبع

scroll-snap-align

پشتیبانی مرورگر

• 69
• 79
• 68
• 11

منبع

scroll-snap-stop

پشتیبانی مرورگر

• 75
• 79
• 103
• 15

منبع

overscroll-behavior

پشتیبانی مرورگر

• 63
• 18
• 59
• 16

منبع

3. شمع شبکه

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

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

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

grid

پشتیبانی مرورگر

• 57
• 16
• 52
• 10.1

منبع

4. دایره سریع

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

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

aspect-ratio

پشتیبانی مرورگر

• 88
• 88
• 89
• 15

منبع

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

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

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

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

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

@layer

پشتیبانی مرورگر

• 99
• 99
• 97
• 15.4

منبع

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

پشتیبانی مرورگر

• 87
• 87
• 66
• 14.1

منبع

margin-block

پشتیبانی مرورگر

• 87
• 87
• 66
• 14.1

منبع

inset-inline

پشتیبانی مرورگر

• 87
• 87
• 63
• 14.1

منبع