برای بیش از دو دهه، CSS ستون فقرات طراحی وب بوده است، اما اغلب به دلیل محدودیتهای آن در مقیاسپذیری، مدیریت مشخصهها و پاسخگویی پویا مورد انتقاد قرار گرفته است. با این حال، منظره در سالهای اخیر به شدت تغییر کرده است. با ظهور مشخصات CSS سطح ۴ و پشتیبانی گسترده مرورگرها، توسعهدهندگان اکنون به ویژگیهای قدرتمندی دسترسی دارند که قبلاً فقط از طریق پیشپردازندههایی مانند SASS یا فریمورکهای سنگین جاوااسکریپت قابل دستیابی بودند. این پست سه ویژگی تحولآفرین را بررسی میکند—تودرتو بودن CSS، پرسوجوهای ظرف و کلاس شبه :has()—که نحوه ساخت رابطهای کاربری مدرن و واکنشگرا را بازتعریف میکنند.
بازگشت تودرتو بودن: خوانایی و نگهداریپذیری
یکی از درخواستیترین ویژگیها توسط توسعهدهندگان فرانتاند، تودرتو بودن بومی CSS بوده است. برای سالها، ما به پیشپردازندهها متکی بودیم تا اجازه دهند سبکها درون یکدیگر تودرتو شوند و ساختار HTML را شبیهسازی کنند. این امر از طولانی شدن انتخابگرها میکاست و خوانایی کد را بهبود میبخشید. اکنون، تودرتو بودن بومی CSS در تمام مرورگرهای اصلی به طور کامل پشتیبانی میشود.
تودرتو بودن به شما امکان میدهد سبکهای CSS خود را نزدیکتر به سلسله مراتب DOM ساختاردهی کنید، که این امر ناوبری و نگهداری سبکنامههای بزرگ را آسانتر میکند. این ویژگی همچنین به کاهش جنگهای مشخصه (specificity wars)، که یک نقطه درد رایج در معماری CSS است، کمک میکند. در زیر مثالی از نحوه سادهسازی استایلدهی به یک کامپوننت کارت پیچیده آورده شده است:
.card {
padding: 2rem;
border-radius: 8px;
background-color: #fff;
/* تودرتو بودن مستقیماً درون والد */
& .card-header {
font-size: 1.5rem;
font-weight: bold;
}
& .card-body {
p {
margin: 0;
line-height: 1.6;
}
&:hover {
color: #333;
}
}
}توجه کنید که چگونه آملند (&) به انتخابگر والد ارجاع میدهد. این امر نیاز به تکرار .card قبل از هر عنصر تودرتو را از بین میبرد و کد را DRY (تکرار نکنید) و به صورت منطقی گروهبندی شده نگه میدارد.
واکنشگرایی آگاه از زمینه با پرسوجوهای ظرف
طراحی واکنشگرا به طور سنتی بر پرسوجوهای نمایه (@media) متکی بوده است که سبکها را بر اساس اندازه پنجره مرورگر تنظیم میکند. با این حال، این رویکرد اغلب زمانی که کامپوننتها در زمینههای مختلف استفاده میشوند، شکست میخورد. یک کارت ممکن است در داخل یک نوار کناری پهن متفاوت به نظر برسد تا زمانی که در یک ناحیه محتوای اصلی با عرض کامل قرار دارد، با وجود اینکه نمایه یکسان باقی میماند.
پرسوجوهای ظرف این مشکل را با اجازه دادن به عناصر برای پاسخگویی به اندازه نزدیکترین ظرف والد خود به جای نمایه حل میکنند. برای استفاده از این ویژگی، باید ابتدا یک بلوک ظرف را با استفاده از ویژگی container-type ایجاد کنید.
/* تعریف ظرف */
.sidebar-widget {
container-type: inline-size;
container-name: sidebar;
}
/* اعمال سبکها بر اساس اندازه ظرف */
@container sidebar (min-width: 400px) {
.widget-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
}
@container sidebar (max-width: 399px) {
.widget-content {
display: flex;
flex-direction: column;
}
}این سطح از دقت تضمین میکند که کامپوننتهای رابط کاربری صرفنظر از محل قرارگیری آنها در چیدمان، یکسان و کاربردی باقی بمانند و این امر قابلیت حمل کامپوننت را به طور قابل توجهی بهبود میبخشد.
انتخابگرهای والد با :has()
شاید مهمترین تغییر در منطق CSS، معرفی کلاس شبه :has() باشد که اغلب به عنوان "انتخابگر والد" شناخته میشود. به طور تاریخی، CSS برای والدین نامناسب بود؛ شما نمیتوانستید یک عنصر والد را بر اساس وضعیت فرزندانش استایلدهی کنید. :has() این قانون را میشکند و استایلدهی شرطی قدرتمندی را امکانپذیر میسازد.
یک مورد استفاده کلاسیک، استایلدهی به یک مورد لیست زمانی است که یک چکباکس درون آن بررسی شده است، یا تغییر چیدمان یک ظرف والد اگر حاوی یک عنصر فرزند خاص باشد. برای مثال، میتوانید یک بخش فرم کامل را در صورتی که حاوی پیام خطا باشد، پنهان کنید:
/* استایلدهی به فرم والد اگر دارای فیلد ضروری نامعتبر باشد */
.form-section:has(.required-input:invalid) {
border-color: red;
box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
/* تغییر سبک دکمه اگر آخرین فرزند یک لینک باشد */
.action-bar:has(> a:last-child) {
justify-content: space-between;
}این ویژگی نیاز به هکهای جاوااسکریپت برای مدیریت وضعیتهای رابط کاربری را کاهش میدهد و منجر به کد تمیزتر و کارآمدتر میشود.
نتیجهگیری
تکامل CSS نشاندهنده بلوغ این زبان است و آن را از نظر قابلیت به ابزارهای طراحی و جریانهای کاری توسعهای که به آن عادت داریم، نزدیکتر میکند. با پذیرش تودرتو بودن بومی، پرسوجوهای ظرف و انتخابگر :has()، توسعهدهندگان فرانتاند میتوانند برنامههای کاربردی قویتر، ماژولار و واکنشگراتری ایجاد کنند. این ویژگیها نه تنها کیفیت کد و نگهداریپذیری را بهبود میبخشند، بلکه وابستگی به کتابخانههای خارجی را نیز کاهش میدهند. با ادامه تثبیت پشتیبانی مرورگرها، زمان آن رسیده است که این استانداردهای مدرن را در جریان کاری روزانه خود ادغام کنید.