ترکیب CSS :has() و HTML برای یک استایل شرطی بیشتر - مجله Smashing

حتی اگر CSS :has() شبه کلاس نسبتاً جدید است، ما قبلاً چیزهای زیادی در مورد آن می دانیم، به لطف مقالات و آموزش های بسیاری که توانایی قدرتمند آن را در انتخاب شرطی عناصر بر اساس محتوای آنها نشان می دهد. همه ما نمونه های جزء کارت و هدر را دیده ایم، اما ماهیت شرطی آن :has() در واقع آن را در کار با کنترل های فرم که ماهیت بسیار مشروط دارند نیز ماهر می سازد.

بیایید به طور خاص نگاه کنیم <select> عنصر با آن، ما می توانیم از یک سری انتخاب کنیم <option>س ترکیب شده با :has()، ما قادر به دستکاری سبک ها بر اساس انتخاب شده هستیم <option>.

<select>  <option value="1" selected>Option 1</option>  <option value="2">Option 2</option>  <option value="3">Option 3</option>  <option value="4">Option 4</option>  <option value="5">Option 5</option></select>

این معیار شماست <select> استفاده، تولید یک منوی کشویی که شامل گزینه هایی برای انتخاب کاربر است. و در حالی که اجباری نیست، من آن را اضافه کردم selected نسبت دادن به اولی <option> تا آن را به عنوان گزینه انتخابی اولیه تنظیم کنید.

اعمال سبک ها بر اساس انتخاب کاربر چیز جدیدی نیست. ما سال هاست که با استفاده از هک Checkbox در جیب هایمان بوده ایم :checked شبه کلاس CSS برای استایل دادن به عنصر بر اساس گزینه انتخاب شده. در این مثال بعدی، من عنصر را تغییر می دهم color و background-color خواص بر اساس انتخاب شده <option>.

اما این محدود به سبک دادن به عنصر فعلی است، درست است؟ اگر خاص <option> است :checked، سپس به سبک آن استایل می دهیم. می توانیم انتخابگر پیچیده تری بنویسیم و عناصر فرزند را بر اساس اینکه آیا یک استایل بنویسیم <option> از زنجیره انتخاب شده است، اما این یک جاده یک طرفه است که ما نمی توانیم عناصر والد را حتی بیشتر از این زنجیره سبک کنیم.

آنجاست :has() به این دلیل وارد می شود که سبک کردن زنجیره دقیقاً همان چیزی است که برای انجام آن طراحی شده است. در واقع، به این دلیل اغلب «انتخابگر والدین» نامیده می شود (اگرچه «انتخابگر خانواده» ممکن است توصیفگر بهتری باشد).

برای مثال، اگر بخواهیم آن را تغییر دهیم background-color از <select> عنصر با توجه به مقدار انتخاب شده <option>، اگر عنصر خاصی داشته باشد، آن را انتخاب می کنیم (value) به این معنا که :checked.

این چقدر عملی است؟ یکی از راه هایی که من از آن استفاده می کنم، استایل اجباری است <select> عناصر بدون انتخاب معتبر <option>. بنابراین، به جای اعمال سبک اگر عنصر :has() آ :checked حالت، من از سبک ها استفاده می کنم اگر required عنصر انجام می دهد :not(:has(:checked)).

اما چرا در آنجا توقف کنید؟ اگر بتوانیم استفاده کنیم :has() به سبک <select> عنصر به عنوان والد an <option>، سپس می توانیم از آن برای استایل دادن به والد the نیز استفاده کنیم <select>و همچنین والد آن، علاوه بر والد، و حتی والد آن… تمام راه تا زنجیره به :root عنصر حتی می توانستیم بیاوریم :has() تمام راه را تا زنجیر و بویید که آیا وجود دارد <select> فرزند سند :root :has() یک خاص <option> به این معنا که :checked:

:root:has(select (value="foo"):checked) {  // Styles applied if <option value="foo"> is <select>-ed}

این برای تنظیم ارزش ویژگی سفارشی به صورت پویا یا اعمال مجموعه ای از سبک ها برای کل صفحه. بیایید یک انتخابگر سبک بسازیم که ایده تنظیم سبک ها را در کل صفحه نشان می دهد.

یا شاید انتخاب کننده تم:

نحوه کار آن مثال آخر این است که من یک کلاس به هر کدام اضافه کردم <select> عنصر و ارجاع به آن کلاس در داخل :has() انتخابگر به منظور جلوگیری از انتخاب های ناخواسته در صورت وجود چندگانه <select> عناصر موجود در صفحه

و، البته، ما مجبور نیستیم تمام راه را به سمت بالا برویم :root عنصر اگر با یک مؤلفه خاص کار می کنیم، می توانیم محدوده :has() به آن مؤلفه مانند نسخه نمایشی زیر از مؤلفه رتبه بندی ستاره.

آموزش ویدیویی کوتاهی را که در مورد استفاده از CSS برای ایجاد ستاره های متحرک سه بعدی ساخته ام، تماشا کنید.

نتیجه

ما انجام می دادیم :has() یک ضرر بزرگ است اگر ما آن را فقط به عنوان یک "انتخاب کننده والدین" ببینیم اپراتور شرطی بزرگ این برای اعمال سبک ها در تمام طول زنجیره است. از این طریق، بیشتر یک ارتقاء مدرن به Checkbox Hack است، زیرا سبک هایی را که قبلاً هرگز قادر به انجام آن نبوده ایم ارسال می کند.

نمونه های بی پایانی از استفاده وجود دارد :has() برای ایجاد تغییرات سبک یک جزء با توجه به محتوای آن. ما حتی دیده ایم که از آن برای انجام الگوی کارت پیوندی که زمانی پیچیده بود استفاده می شود. اما اکنون شما نمونه ای برای استفاده از آن برای ایجاد منوهای کشویی دارید که به صورت مشروط استایل ها را بر روی یک صفحه یا مؤلفه بر اساس گزینه انتخاب شده فعلی اعمال می کنند (یا نمی کنند) - بسته به اینکه تا چه حد از زنجیره ای که دامنه آن را در نظر گرفته ایم.

من از این تکنیک چند راه مختلف استفاده کرده ام - به عنوان مثال، به عنوان اعتبار سنجی فرم، انتخابگر سبک، و رتبه بندی ستاره ها - اما مطمئن هستم که راه های زیادی وجود دارد که می توانید تصور کنید چگونه از آن در کار خود استفاده کنید. و اگر استفاده می کنید :has() روی یک <select> عنصری برای چیز متفاوت یا جالب، به من اطلاع دهید زیرا دوست دارم آن را ببینم!

مطالعه بیشتر در SmashingMag

(gg, yk)