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

ترکیب 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>.

به قلم (نسخه نمایشی 01 – استفاده از انتخابگر :has در منوی کشویی) (https://codepen.io/smashingmag/pen/oNOwded) توسط آمیت شین مراجعه کنید.

نسخه ی نمایشی Pen 01 را ببینید – با استفاده از انتخابگر :has در منوی کشویی توسط Amit Sheen.

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

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

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

به قلم (نسخه نمایشی 02 – استفاده از انتخابگر :has در منوی کشویی) (https://codepen.io/smashingmag/pen/eYoRopZ) توسط آمیت شین مراجعه کنید.

نسخه ی نمایشی Pen 02 را ببینید – با استفاده از انتخابگر :has در منوی کشویی توسط Amit Sheen.

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

به قلم (نسخه نمایشی 02.1 – استفاده از انتخابگر :has در منوی کشویی) (https://codepen.io/smashingmag/pen/jORLoVM) توسط آمیت شین مراجعه کنید.

نسخه ی نمایشی Pen 02.1 را ببینید – با استفاده از انتخابگر :has در منوی کشویی توسط Amit Sheen.

اما چرا در آنجا توقف کنید؟ اگر بتوانیم استفاده کنیم :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
}

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

به قلم (نسخه نمایشی 03 – استفاده از انتخابگر :has در منوی کشویی) (https://codepen.io/smashingmag/pen/yLrXroO) توسط آمیت شین مراجعه کنید.

نسخه ی نمایشی Pen 03 را ببینید – با استفاده از انتخابگر :has در منوی کشویی توسط Amit Sheen.

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

به قلم (نسخه نمایشی 04 – استفاده از انتخابگر :has در منوی کشویی) (https://codepen.io/smashingmag/pen/OJGgjaJ) توسط آمیت شین مراجعه کنید.

نسخه ی نمایشی Pen 04 را ببینید – با استفاده از انتخابگر :has در منوی کشویی توسط Amit Sheen.

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

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

به قلم (نمایش 05 – استفاده از انتخابگر :has در منوی کشویی) (https://codepen.io/smashingmag/pen/rNbwvqz) توسط آمیت شین مراجعه کنید.

نسخه نمایشی Pen 05 را ببینید – با استفاده از انتخابگر :has در منوی کشویی توسط Amit Sheen.

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

نتیجه

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

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

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

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

سرمقاله Smashing
(gg, yk)

]
منبع: https://smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/