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

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

آدام آرگایل

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

۱. یک پرس‌وجوی کانتینر

این ویژگی CSS که به مدت ۱۰ سال متوالی بیشترین درخواست را داشته، اکنون در مرورگرها پایدار است و در سال ۲۰۲۳ برای استفاده در کوئری‌های عرض در دسترس شما قرار خواهد گرفت.

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

.card {
  padding: 1rem;
}

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

Browser Support

  • کروم: ۱۰۵.
  • لبه: ۱۰۵.
  • فایرفاکس: ۱۱۰.
  • سافاری: ۱۶.

Source

container

Browser Support

  • کروم: ۱۰۵.
  • لبه: ۱۰۵.
  • فایرفاکس: ۱۱۰.
  • سافاری: ۱۶.

Source

۲. اسکرول اسنپ

تجربه‌های اسکرول خوب تنظیم‌شده، تجربه شما را از بقیه متمایز می‌کند و اسکرول اسنپ (scroll snap) راهی عالی برای تطبیق تجربه کاربری اسکرول سیستم است و در عین حال نقاط توقف معناداری را فراهم می‌کند.

.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 شامل حدود ۲۵ نسخه آزمایشی مراجعه کنید.

scroll-snap-type

Browser Support

  • کروم: ۶۹.
  • لبه: ۷۹.
  • فایرفاکس: ۹۹.
  • سافاری: ۱۱.

Source

scroll-snap-align

Browser Support

  • کروم: ۶۹.
  • لبه: ۷۹.
  • فایرفاکس: ۶۸.
  • سافاری: ۱۱.

Source

scroll-snap-stop

Browser Support

  • کروم: ۷۵.
  • لبه: ۷۹.
  • فایرفاکس: ۱۰۳.
  • سافاری: ۱۵.

Source

overscroll-behavior

Browser Support

  • کروم: ۱۴۴.
  • لبه: ۱۸.
  • فایرفاکس: ۱۵۰.
  • سافاری: ۱۶.

Source

۳. شمع شبکه‌ای

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

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

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

Browser Support

  • کروم: ۵۷.
  • لبه: ۱۶.
  • فایرفاکس: ۵۲.
  • سافاری: ۱۰.۱.

Source

۴. دایره سریع

روش‌های زیادی برای ایجاد دایره در CSS وجود دارد، اما این قطعاً ساده‌ترین روش است.

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

Browser Support

  • کروم: ۸۸.
  • لبه: ۸۸.
  • فایرفاکس: ۸۹.
  • سافاری: ۱۵.

Source

۵. کنترل انواع مختلف با @layer

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

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

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

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

Browser Support

  • کروم: ۹۹.
  • لبه: ۹۹.
  • فایرفاکس: ۹۷.
  • سافاری: ۱۵.۴.

Source

۶. کمتر حفظ کنید و با ویژگی‌های منطقی به چیزهای بیشتری برسید

این مدل جعبه‌ای جدید را به خاطر بسپارید و دیگر هرگز نگران تغییر padding چپ و راست یا حاشیه برای حالت‌های نوشتاری بین‌المللی و جهت‌های سند نباشید. سبک‌های خود را از ویژگی‌های فیزیکی به ویژگی‌های منطقی مانند 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

  • کروم: ۸۷.
  • لبه: ۸۷.
  • فایرفاکس: ۶۶.
  • سافاری: ۱۴.۱.

Source

margin-block

Browser Support

  • کروم: ۸۷.
  • لبه: ۸۷.
  • فایرفاکس: ۶۶.
  • سافاری: ۱۴.۱.

Source

inset-inline

Browser Support

  • کروم: ۸۷.
  • لبه: ۸۷.
  • فایرفاکس: ۶۳.
  • سافاری: ۱۴.۱.

Source