۔ :has()
چھدم کلاس میری پسندیدہ نئی سی ایس ایس خصوصیت، ہینڈ ڈاون ہے۔ میں جانتا ہوں کہ یہ آپ میں سے بہت سے لوگوں کے لیے بھی ہے، کم از کم آپ میں سے جنہوں نے اسٹیٹ آف سی ایس ایس سروے کیا۔. سلیکٹرز کو الٹا لکھنے کی صلاحیت ہمیں مزید سپر پاور دیتی ہے جس کے بارے میں میں نے کبھی سوچا بھی نہیں تھا۔
میں "زیادہ سپر پاورز" کہتا ہوں کیونکہ بہت سارے حیرت انگیز ہوشیار خیالات پہلے ہی سپر سمارٹ لوگوں کے ایک گروپ کے ذریعہ شائع کیے گئے ہیں، جیسے:
یہ مضمون اس کے لیے قطعی رہنمائی نہیں ہے۔ :has()
. یہاں یہ بھی نہیں ہے کہ جو پہلے ہی کہا جا چکا ہے اسے دوبارہ پیش کیا جائے۔ یہ صرف میں ہوں (ہیلو 👋) ایک لمحے کے لیے بینڈ ویگن پر چھلانگ لگا رہا ہوں تاکہ ان طریقوں میں سے کچھ کا اشتراک کروں جنہیں میں استعمال کرنے کا زیادہ امکان رکھتا ہوں :has()
میرے روزمرہ کے کام میں… یعنی ایک بار فائر فاکس کی طرف سے اسے باضابطہ طور پر سپورٹ کیا جاتا ہے۔ جو قریب ہے.
جب ایسا ہوتا ہے، آپ شرط لگا سکتے ہیں کہ میں استعمال کرنا شروع کروں گا۔ :has()
سب جگہ. یہاں ان چیزوں کی کچھ حقیقی دنیا کی مثالیں ہیں جو میں نے حال ہی میں بنائی ہیں اور اپنے آپ سے سوچا، "جی، یہ ایک بار بہت اچھا ہو جائے گا :has()
کی مکمل حمایت کی جاتی ہے۔"
اپنے JavaScript جزو سے باہر پہنچنے سے گریز کریں۔
کیا آپ نے کبھی ایک انٹرایکٹو جزو بنایا ہے جو کبھی کبھی صفحہ پر کہیں اور طرز کو متاثر کرنے کی ضرورت ہے؟ مندرجہ ذیل مثال لے لو، جہاں <nav>
ہے ایک میگا مینو، اور اسے کھولنے سے کے رنگ بدل جاتے ہیں۔ <header>
اس کے اوپر مواد.
مجھے ایسا لگتا ہے کہ مجھے اس قسم کا کام کرنے کی ضرورت ہے۔ ہر وقت.
یہ خاص مثال ایک React جزو ہے جو میں نے سائٹ کے لیے بنایا تھا۔ مجھے صفحہ کے رد عمل والے حصے کے ساتھ "باہر پہنچنا" تھا۔ document.querySelector(...)
اور پر ایک کلاس ٹوگل کریں۔ <body>
, <header>
، یا کوئی اور جزو۔ یہ دنیا کا خاتمہ نہیں ہے، لیکن یہ یقینی طور پر تھوڑا سا محسوس ہوتا ہے۔ یہاں تک کہ ایک مکمل ری ایکٹ سائٹ میں (ایک 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>
اور آپ ہر "یکساں" قطار کو "سٹرائپنگ" کر رہے ہیں، آپ صرف ایک پٹی کے ساتھ ختم کر سکتے ہیں۔ یہ واقعی ایک پیٹرن کے قابل نہیں ہے اور ہوسکتا ہے کہ صارفین سوچ رہے ہوں کہ اس نمایاں قطار میں کیا خاص بات ہے۔
اس تکنیک کا استعمال کرتے ہوئے جہاں Bramus استعمال کرتا ہے :has()
بچوں کی تعداد کی بنیاد پر طرزیں لاگو کرناجب کہ تین قطاروں سے زیادہ ہوں تو ہم ٹیبل کی پٹیاں لگا سکتے ہیں:
فینسیر حاصل کرنے کے لئے کیا؟ آپ یہ فیصلہ صرف اس صورت میں کر سکتے ہیں جب ٹیبل میں کم از کم ایک مخصوص تعداد میں کالم بھی ہوں:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
ٹیمپلیٹس سے مشروط کلاس منطق کو ہٹا دیں۔
مجھے اکثر صفحہ کی ترتیب کے لحاظ سے صفحہ کی ترتیب کو تبدیل کرنے کی ضرورت ہوتی ہے۔ مندرجہ ذیل گرڈ لے آؤٹ کو لیں، جہاں مرکزی مواد کی جگہ کا تعین اس بات پر منحصر ہے کہ آیا سائڈبار موجود ہے یا نہیں۔
یہ وہ چیز ہے جو اس بات پر منحصر ہو سکتی ہے کہ آیا CMS میں بہن بھائی کے صفحات سیٹ کیے گئے ہیں۔ مشروط طور پر شامل کرنے کے لئے میں عام طور پر ٹیمپلیٹ منطق کے ساتھ ایسا کرتا ہوں۔ بی ای ایم موڈیفائر کلاسز دونوں لے آؤٹ کے حساب سے لے آؤٹ ریپر پر۔ وہ سی ایس ایس کچھ اس طرح نظر آ سکتا ہے (جوابی قواعد اور دیگر چیزیں اختصار کے لیے چھوڑ دی گئی ہیں):
/* 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 کے لحاظ سے، یہ بالکل ٹھیک ہے۔ لیکن یہ ٹیمپلیٹ کوڈ کو تھوڑا سا گندا بنا دیتا ہے۔ آپ کی ٹیمپلیٹنگ زبان پر منحصر ہے کہ یہ مشروط طور پر کلاسوں کا ایک گروپ شامل کرنا کافی بدصورت ہوسکتا ہے، خاص طور پر اگر آپ کو بہت سے بچوں کے عناصر کے ساتھ بھی ایسا کرنا پڑے۔
اس کا مقابلہ a سے کریں۔ :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 . .';
}
سچ میں، یہ سی ایس ایس کے لحاظ سے بہت بہتر نہیں ہے۔ لیکن اگر آپ مجھ سے پوچھیں تو HTML ٹیمپلیٹ سے مشروط موڈیفائر کلاسز کو ہٹانا ایک اچھی جیت ہے۔
مائیکرو ڈیزائن کے فیصلوں کے بارے میں سوچنا آسان ہے۔ :has()
- ایک کارڈ کی طرح جب اس میں تصویر ہو۔ - لیکن مجھے لگتا ہے کہ یہ میکرو لے آؤٹ تبدیلیوں کے لیے بھی واقعی کارآمد ہوگا۔
بہتر مخصوصیت کا انتظام
اگر آپ پڑھتے ہیں میرا آخری مضمون، آپ کو معلوم ہوگا کہ میں مخصوصیت کے لیے ایک اسٹیکلر ہوں۔ اگر، میری طرح، آپ نہیں چاہتے کہ شامل کرتے وقت آپ کے مخصوص اسکور ختم ہوں۔ :has()
اور :not()
اپنے تمام سٹائل میں، استعمال کرنا یقینی بنائیں :where()
.
اس کی وجہ یہ ہے۔ :has()
پر مبنی ہے اس کی دلیل کی فہرست میں سب سے مخصوص عنصر. لہذا، اگر آپ کے پاس ID جیسی کوئی چیز ہے تو، آپ کے سلیکٹر کو جھرن میں اوور رائڈ کرنا مشکل ہوگا۔
دوسری طرف، کی خصوصیت :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 سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- کی صلاحیت
- قابلیت
- ہمارے بارے میں
- اوپر
- اکاؤنٹ
- پر اثر انداز
- تمام
- پہلے ہی
- ہمیشہ
- حیرت انگیز
- اور
- ایک اور
- کا اطلاق کریں
- نقطہ نظر
- علاقوں
- دلیل
- مضمون
- کی بنیاد پر
- کیونکہ
- بیٹ
- بہتر
- کے درمیان
- بٹ
- بہاؤ
- تعمیر
- گچرچھا
- حاصل کر سکتے ہیں
- کارڈ
- جھرن
- کچھ
- تبدیل
- تبدیلیاں
- بچے
- میں سے انتخاب کریں
- طبقے
- کلاس
- سینٹی میٹر
- کوڈ
- کالم
- جزو
- پر مشتمل ہے
- مواد
- سکتا ہے
- کورس
- CSS
- فیصلے
- مستند
- منحصر ہے
- ڈیزائن
- نہیں کرتا
- کر
- ڈوم
- نہیں
- نیچے
- عناصر
- خاص طور پر
- وغیرہ
- بھی
- کبھی نہیں
- ہر کوئی
- مثال کے طور پر
- مثال کے طور پر
- تجربہ
- آنکھیں
- پسندیدہ
- نمایاں کریں
- چند
- آخر
- فائر فاکس
- کے بعد
- آگے
- سے
- مکمل طور پر
- حاصل
- فراہم کرتا ہے
- جاتا ہے
- جا
- عظیم
- گرڈ
- گرڈ ٹیمپلیٹ کے علاقے
- رہنمائی
- ہو
- ہونے
- مدد
- یہاں
- hi
- اعلی
- روشنی ڈالی گئی
- HTML
- HTTPS
- میں ہوں گے
- خیالات
- تصویر
- بہتری
- in
- انٹرایکٹو
- IT
- جاوا سکرپٹ
- صرف ایک
- رکھیں
- بچے
- جان
- زبان
- آخری
- لے آؤٹ
- امکان
- تھوڑا
- دیکھو
- تلاش
- بہت
- میکرو
- بنا
- مین
- بنا
- مینیجنگ
- بہت سے
- شاید
- لمحہ
- زیادہ
- سب سے زیادہ
- موزیلا
- ضرورت ہے
- ضروریات
- نئی
- اگلے
- Next.js
- عام طور پر
- تعداد
- سرکاری طور پر
- ایک
- کھولنے
- دیگر
- باہر
- حصہ
- خاص طور پر
- حصے
- پاٹرن
- لوگ
- کامل
- مقام
- پلاٹا
- افلاطون ڈیٹا انٹیلی جنس
- پلیٹو ڈیٹا
- ممکن
- حال (-)
- خوبصورت
- مسئلہ
- پیداوار
- شائع
- تک پہنچنے
- جواب دیں
- پڑھیں
- حقیقی دنیا
- حال ہی میں
- کو ہٹانے کے
- قبول
- ROW
- قوانین
- رن
- کہا
- اسی
- اسکین
- انتخاب
- مقرر
- سیکنڈ اور
- سائٹ
- ہوشیار
- So
- حل
- کچھ
- کچھ
- کہیں
- خصوصی
- مخصوص
- نردجیکرن
- شروع کریں
- حالت
- پٹی
- دھاریاں
- سٹائل
- سپر
- تائید
- ٹیبل
- لے لو
- TD
- سانچے
- ۔
- ریاست
- دنیا
- بات
- چیزیں
- سوچا
- تین
- بھر میں
- کرنے کے لئے
- اوپر
- بھی
- مکمل طور پر
- ٹریک
- سچ
- الٹا
- us
- استعمال کی شرائط
- صارفین
- ux
- انتظار
- طریقوں
- کیا
- چاہے
- جس
- ڈبلیو
- جیت
- سوچ
- کام
- دنیا
- قابل
- گا
- لکھنا
- تم
- اور
- زیفیرنیٹ