CSS ارزشمند، قدرتمند و پایداری که امروزه می توانید از آن استفاده کنید.
من معتقدم هر توسعه‌دهنده فرانت‌اند باید بداند که چگونه از جستجوهای کانتینر استفاده کند، یک تجربه اسکرول اسنپ ایجاد کند، position: absolute با شبکه اجتناب کند، به سرعت دایره‌ای را چکش کند، از لایه‌های آبشاری استفاده کند، و با ویژگی‌های منطقی به تعداد بیشتری دست یابد. در اینجا یک مرور سریع از هر یک از این انتظارات وجود دارد.
1. یک درخواست ظرف
بالاترین ویژگی CSS درخواستی برای 10 سال متوالی، اکنون در مرورگرها پایدار است و در سال 2023 برای استفاده برای جستجوهای عرض در دسترس است.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
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-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. شمع شبکه
با شبکه CSS تک سلولی از موقعیت مطلق اجتناب کنید. هنگامی که آنها روی هم انباشته شدند، از ویژگی های justify و align برای قرار دادن آنها استفاده کنید.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. دایره سریع
راه های زیادی برای ایجاد دایره در CSS وجود دارد، اما این قطعا حداقل ترین است.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. انواع را با لایه @ کنترل کنید
لایه‌های آبشاری می‌توانند به وارد کردن انواعی که بعداً کشف یا ایجاد شده‌اند، در جای مناسب در آبشار با مجموعه انواع اصلی کمک کنند .
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
سپس، در یک فایل کاملاً متفاوت، که در زمان تصادفی دیگری بارگذاری شده است، یک نوع جدید را به لایه دکمه اضافه کنید که گویی در تمام این مدت با بقیه آنها وجود دارد.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. کمتر به خاطر بسپارید و با خواص منطقی به بیشتر برسید
این یک مدل جعبه جدید را به خاطر بسپارید و دیگر نگران تغییر لایه های چپ و راست یا حاشیه برای حالت های نوشتن بین المللی و جهت های سند نباشید . استایل های خود را از ویژگی های فیزیکی به سبک های منطقی مانند 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;
}