La :has()
شبه طبقه دست به پایین، ویژگی جدید CSS مورد علاقه من است. می دانم که حداقل برای بسیاری از شما هم همینطور است کسانی از شما که در نظرسنجی وضعیت CSS شرکت کردید. توانایی وارونه نوشتن انتخابگرها به ما ابرقدرت های بیشتری می دهد که هرگز فکرش را نمی کردم.
من می گویم "ابرقدرت های بیشتر" زیرا قبلاً تعداد زیادی ایده هوشمندانه واقعاً شگفت انگیز توسط گروهی از افراد فوق العاده باهوش منتشر شده است ، مانند:
این مقاله راهنمای قطعی نیست :has()
. همچنین اینجا نیست که آنچه قبلاً گفته شده را بازگردانیم. فقط من هستم (سلام :has()
در کارهای روزمره من... یعنی زمانی که به طور رسمی توسط فایرفاکس پشتیبانی شود که قریب الوقوع است.
وقتی این اتفاق افتاد، می توانید شرط ببندید که من شروع به استفاده خواهم کرد :has()
همه جا در اینجا چند نمونه واقعی از چیزهایی وجود دارد که اخیراً ساختهام و با خودم فکر میکنم: «آرام، یک بار خیلی زیباتر میشود. :has()
به طور کامل پشتیبانی می شود.»
از دسترسی به خارج از مؤلفه جاوا اسکریپت خودداری کنید
آیا تا به حال یک مؤلفه تعاملی ساخته اید که گاهی اوقات نیاز به تأثیرگذاری بر سبک ها در جای دیگری از صفحه دارد؟ به مثال زیر توجه کنید، جایی که <nav>
هست یک مگا منوو باز کردن آن باعث تغییر رنگ آن می شود <header>
محتوای بالای آن
احساس می کنم باید این جور کارها را انجام دهم همیشه.
این مثال خاص یک جزء React است که من برای یک سایت ساخته ام. من مجبور شدم با بخش React صفحه "به بیرون برسم". document.querySelector(...)
و یک کلاس را روی آن تغییر دهید <body>
, <header>
، یا جزء دیگر این پایان دنیا نیست، اما مطمئناً کمی بد به نظر می رسد. حتی در یک سایت کاملاً React (مثلاً یک سایت Next.js)، باید بین مدیریت یک سایت یکی را انتخاب کنم. menuIsOpen
در بالای درخت کامپوننت قرار دهید، یا همان انتخاب عنصر DOM را انجام دهید - که خیلی React-y نیست.
با :has()
، مشکل برطرف می شود:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
دیگر در اجزای جاوا اسکریپت با سایر بخشهای DOM سر و کار ندارم!
UX خط کشی بهتر جدول
افزودن خطوط جایگزین ردیف به جداول شما می تواند یک بهبود UX خوب باشد. آنها به چشمان شما کمک میکنند تا هنگام اسکن جدول، ردیفی را که در آن قرار دارید، ردیابی کنند.
اما در تجربه من، این روی میزهایی که فقط دو یا سه ردیف دارند، عالی کار نمی کند. برای مثال، اگر یک جدول با سه ردیف در جدول دارید <tbody>
و شما در حال "راهاندازی" هر ردیف "هموار" هستید، میتوانید تنها با یک خط پایان دهید. این واقعاً ارزش یک الگو را ندارد و ممکن است کاربران تعجب کنند که چه چیزی در مورد آن ردیف برجسته شده بسیار خاص است.
با استفاده از این تکنیک که در آن براموس استفاده می کند :has()
برای اعمال سبک ها بر اساس تعداد فرزندان، ما می توانیم نوارهای tble را زمانی اعمال کنیم که مثلاً بیش از سه ردیف وجود داشته باشد:
چه چیزی را شیک تر کنیم؟ همچنین می توانید تصمیم بگیرید که این کار را فقط در صورتی انجام دهید که جدول حداقل تعداد مشخصی ستون نیز داشته باشد:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
منطق کلاس شرطی را از قالب ها حذف کنید
من اغلب نیاز به تغییر طرح بندی صفحه بسته به آنچه در صفحه است دارم. طرحبندی Grid زیر را در نظر بگیرید، جایی که قرار دادن محتوای اصلی بسته به وجود نوار کناری، مناطق شبکه را تغییر میدهد.
این چیزی است که ممکن است به وجود صفحات خواهر و برادر در CMS بستگی داشته باشد. من معمولاً این کار را با منطق الگو برای اضافه کردن مشروط انجام می دهم کلاس های اصلاح کننده BEM به لفاف layout برای در نظر گرفتن هر دو طرح. این CSS ممکن است چیزی شبیه به این باشد (قوانین پاسخگو و موارد دیگر برای اختصار حذف شده اند):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
از نظر CSS، البته این کاملاً خوب است. اما کد قالب را کمی کثیف می کند. بسته به زبان الگوی شما، افزودن مشروط دستهای از کلاسها میتواند بسیار زشت باشد، بهخصوص اگر مجبور باشید این کار را با عناصر فرزند زیادی نیز انجام دهید.
آن را با الف مقایسه کنید :has()
رویکرد مبتنی بر:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
راستش را بخواهید، از نظر CSS خیلی بهتر نیست. اما اگر از من بپرسید، حذف کلاسهای اصلاحکننده شرطی از قالب HTML یک پیروزی خوب است.
فکر کردن به تصمیمات طراحی میکرو برای آن آسان است :has()
- مثل یک کارت وقتی تصویری در آن باشد - اما من فکر می کنم برای این تغییرات طرح ماکرو نیز بسیار مفید خواهد بود.
مدیریت ویژگی بهتر
اگر بخوانید آخرین مقاله من, شما می دانید که من یک گیره برای مشخص بودن هستم. اگر مانند من، نمی خواهید امتیازهای اختصاصی شما هنگام اضافه کردن از بین برود :has()
و :not()
در تمام سبک های خود، حتما استفاده کنید :where()
.
این به دلیل ویژگی است :has()
بر اساس خاص ترین عنصر در لیست آرگومان آن است. بنابراین، اگر چیزی شبیه شناسه در آنجا دارید، نادیده گرفتن انتخابگر شما در آبشار دشوار خواهد بود.
از سوی دیگر، خاص بودن :where()
همیشه صفر است، هرگز به امتیاز ویژگی اضافه نمی شود.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
آینده روشن است
اینها فقط چند چیز هستند که من نمی توانم صبر کنم تا بتوانم از آنها در تولید استفاده کنم. CSS-Tricks Almanac نیز چندین نمونه دارد. منتظر چه کاری هستید؟ :has()
? در کجا با چه نمونه هایی از دنیای واقعی برخورد کرده اید :has()
آیا راه حل عالی بود؟
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- توانایی
- قادر
- درباره ما
- بالاتر
- حساب
- اثر
- معرفی
- قبلا
- همیشه
- شگفت انگیز
- و
- دیگر
- درخواست
- روش
- مناطق
- استدلال
- مقاله
- مستقر
- زیرا
- شرط
- بهتر
- میان
- بیت
- دمیدن
- ساخته
- دسته
- می توانید دریافت کنید
- کارت
- ابشاری
- معین
- تغییر دادن
- تبادل
- کودک
- را انتخاب کنید
- کلاس
- کلاس ها
- اس ام اس
- رمز
- ستون ها
- جزء
- شامل
- محتوا
- میتوانست
- دوره
- CSS
- تصمیم گیری
- قطعی
- بستگی دارد
- طرح
- نمی کند
- عمل
- DOM
- آیا
- پایین
- عناصر
- به خصوص
- و غیره
- حتی
- تا کنون
- هر
- مثال
- مثال ها
- تجربه
- چشم ها
- محبوب
- ویژگی
- کمی از
- پایان
- فایرفاکس
- پیروی
- به جلو
- از جانب
- کاملا
- دریافت کنید
- می دهد
- می رود
- رفتن
- بزرگ
- توری
- شبکه-الگو-مناطق
- راهنمایی
- رخ دادن
- داشتن
- کمک
- اینجا کلیک نمایید
- hi
- بالاتر
- برجسته
- HTML
- HTTPS
- من می خواهم
- ایده ها
- تصویر
- بهبود
- in
- تعاملی
- IT
- جاوا اسکریپت
- فقط یکی
- نگاه داشتن
- نوع
- دانستن
- زبان
- نام
- طرح
- احتمالا
- کوچک
- نگاه کنيد
- به دنبال
- خیلی
- درشت دستور
- ساخته
- اصلی
- ساخت
- مدیریت
- بسیاری
- قدرت
- لحظه
- بیش
- اکثر
- موزیلا
- نیاز
- نیازهای
- جدید
- بعد
- Next.js
- به طور معمول
- عدد
- رسما
- ONE
- افتتاح
- دیگر
- خارج از
- بخش
- ویژه
- بخش
- الگو
- مردم
- کامل
- محل
- افلاطون
- هوش داده افلاطون
- PlatoData
- ممکن
- در حال حاضر
- زیبا
- مشکل
- تولید
- منتشر شده
- رسیدن به
- واکنش نشان می دهند
- خواندن
- دنیای واقعی
- تازه
- از بین بردن
- پاسخگو
- ROW
- قوانین
- دویدن
- سعید
- همان
- اسکن
- انتخاب
- تنظیم
- اشتراک گذاری
- سایت
- هوشمند
- So
- راه حل
- برخی از
- چیزی
- یک جایی
- ویژه
- خاص
- اختصاصی
- شروع
- دولت
- پارچه راه راه
- راه راه
- سبک
- فوق العاده
- پشتیبانی
- جدول
- گرفتن
- TD
- قالب
- La
- دولت
- جهان
- چیز
- اشیاء
- فکر
- سه
- سراسر
- به
- تن
- هم
- کاملا
- مسیر
- درست
- بالا
- us
- استفاده کنید
- کاربران
- ux
- صبر کنيد
- راه
- چی
- چه
- که
- WHO
- پیروزی
- تعجب کردم
- مهاجرت کاری
- جهان
- با ارزش
- خواهد بود
- نوشتن
- شما
- شما
- زفیرنت