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

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

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

بالاترین ویژگی 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.

منبع