সার্জারির :has()
ছদ্ম শ্রেণী হ্যান্ডস-ডাউন, আমার প্রিয় নতুন CSS বৈশিষ্ট্য। আমি জানি এটা আপনার অনেকের জন্যও, অন্তত আপনারা যারা স্টেট অফ সিএসএস সার্ভে করেছেন. নির্বাচকদের উল্টাপাল্টা লেখার ক্ষমতা আমাদের আরও পরাশক্তি দেয় যা আমি কখনই ভাবিনি।
আমি বলি "আরো পরাশক্তি" কারণ ইতিমধ্যেই একগুচ্ছ সুপার স্মার্ট ব্যক্তিদের দ্বারা প্রকাশিত অনেক আশ্চর্যজনক চতুর ধারণা রয়েছে, যেমন:
এই নিবন্ধটি একটি নির্দিষ্ট নির্দেশিকা নয় :has()
. ইতিমধ্যে যা বলা হয়েছে তা পুনর্গঠন করার জন্যও এখানে নয়। এটা শুধু আমি (হাই 👋) কিছু উপায় শেয়ার করার জন্য কিছুক্ষণের জন্য ব্যান্ডওয়াগনের উপর ঝাঁপিয়ে পড়ছি যা আমি ব্যবহার করতে পারি :has()
আমার প্রতিদিনের কাজে… অর্থাৎ, একবার এটি ফায়ারফক্স দ্বারা আনুষ্ঠানিকভাবে সমর্থিত হয় যা আসন্ন.
যখন এটি ঘটবে, আপনি বাজি ধরতে পারেন আমি ব্যবহার শুরু করব :has()
সব জায়গায় বেশি. এখানে এমন কিছু বাস্তব-বিশ্বের উদাহরণ রয়েছে যা আমি সম্প্রতি তৈরি করেছি এবং মনে মনে ভাবলাম, "হ্যাঁ, এটি একবারে অনেক সুন্দর হবে :has()
সম্পূর্ণরূপে সমর্থিত।"
আপনার জাভাস্ক্রিপ্ট উপাদানের বাইরে পৌঁছানো এড়িয়ে চলুন
আপনি কি কখনও একটি ইন্টারেক্টিভ উপাদান তৈরি করেছেন যা কখনও কখনও পৃষ্ঠার অন্য কোথাও শৈলীগুলিকে প্রভাবিত করতে হয়? নিম্নলিখিত উদাহরণ নিন, যেখানে <nav>
ইহা একটি মেগা মেনু, এবং এটি খোলার রং পরিবর্তন <header>
এর উপরে বিষয়বস্তু।
আমি মনে করি আমি এই ধরনের জিনিস করতে হবে সব সময়.
এই বিশেষ উদাহরণ হল একটি প্রতিক্রিয়া উপাদান যা আমি একটি সাইটের জন্য তৈরি করেছি। আমাকে পৃষ্ঠার প্রতিক্রিয়া অংশের সাথে "বাইরে পৌঁছাতে" হয়েছিল document.querySelector(...)
এবং একটি ক্লাস টগল করুন <body>
, <header>
, বা অন্য উপাদান। এটি বিশ্বের শেষ নয়, তবে এটি অবশ্যই কিছুটা অস্বস্তিকর মনে হচ্ছে। এমনকি একটি সম্পূর্ণ প্রতিক্রিয়া সাইটে (একটি Next.js সাইট, বলুন), আমাকে একটি পরিচালনার মধ্যে বেছে নিতে হবে menuIsOpen
স্টেট ওয়ে কম্পোনেন্ট ট্রি পর্যন্ত উপরে রাখুন, অথবা একই DOM এলিমেন্ট নির্বাচন করুন — যা খুব একটা রিঅ্যাক্ট-ই নয়।
সঙ্গে :has()
, সমস্যা চলে যায়:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
আমার জাভাস্ক্রিপ্ট উপাদানগুলিতে DOM-এর অন্যান্য অংশগুলির সাথে আর কোন বাজে কথা নয়!
ভাল টেবিল স্ট্রাইপিং UX
আপনার টেবিলে বিকল্প সারি "স্ট্রাইপ" যোগ করা একটি চমৎকার UX উন্নতি হতে পারে। আপনি টেবিল স্ক্যান করার সময় আপনি কোন সারিতে আছেন তা ট্র্যাক রাখতে তারা আপনার চোখকে সাহায্য করে।
কিন্তু আমার অভিজ্ঞতায়, এটি মাত্র দুই বা তিনটি সারি দিয়ে টেবিলে দুর্দান্ত কাজ করে না। আপনার যদি থাকে, উদাহরণস্বরূপ, তিনটি সারি সহ একটি টেবিল <tbody>
এবং আপনি প্রতি "জোড়" সারি "স্ট্রিপিং" করছেন, আপনি শুধুমাত্র একটি স্ট্রাইপ দিয়ে শেষ করতে পারেন। এটি সত্যিই একটি প্যাটার্নের মূল্য নয় এবং ব্যবহারকারীরা ভাবছেন যে একটি হাইলাইট করা সারিটি সম্পর্কে এত বিশেষ কী আছে৷
যেখানে এই কৌশল ব্যবহার করে ব্রামাস ব্যবহার করে :has()
শিশুদের সংখ্যার উপর ভিত্তি করে শৈলী প্রয়োগ করতে, আমরা টেবিল স্ট্রাইপ প্রয়োগ করতে পারি যখন তিনটি সারি থেকে বেশি থাকে:
কি অভিনব পেতে? আপনি যদি টেবিলে কমপক্ষে একটি নির্দিষ্ট সংখ্যক কলাম থাকে তবেই এটি করার সিদ্ধান্ত নিতে পারেন:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
টেমপ্লেট থেকে শর্তাধীন ক্লাস লজিক সরান
পৃষ্ঠায় যা আছে তার উপর নির্ভর করে আমাকে প্রায়ই একটি পৃষ্ঠার বিন্যাস পরিবর্তন করতে হবে। নিম্নলিখিত গ্রিড লেআউটটি নিন, যেখানে একটি সাইডবার উপস্থিত আছে কিনা তার উপর নির্ভর করে প্রধান বিষয়বস্তুর বসানো গ্রিড এলাকা পরিবর্তন করে।
এটি এমন কিছু যা সিএমএসে ভাইবোন পৃষ্ঠাগুলি সেট করা আছে কিনা তার উপর নির্ভর করতে পারে৷ শর্তসাপেক্ষে যোগ করার জন্য আমি সাধারণত টেমপ্লেট যুক্তি দিয়ে এটি করব BEM মডিফায়ার ক্লাস উভয় লেআউটের জন্য অ্যাকাউন্টের জন্য লেআউট র্যাপারে। সেই 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 . .';
}
সিএসএস-ভিত্তিক, এটি অবশ্যই সম্পূর্ণ জরিমানা। কিন্তু এটি টেমপ্লেট কোডটিকে একটু অগোছালো করে তোলে। আপনার টেমপ্লেটিং ভাষার উপর নির্ভর করে শর্তসাপেক্ষে একগুচ্ছ ক্লাস যোগ করা বেশ কুৎসিত হতে পারে, বিশেষ করে যদি আপনাকে অনেক শিশু উপাদানের সাথেও এটি করতে হয়।
একটি সঙ্গে যে বৈসাদৃশ্য :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 . .';
}
সত্যই, এটি সিএসএস-ভিত্তিক একটি সম্পূর্ণ অনেক ভাল নয়। কিন্তু এইচটিএমএল টেমপ্লেট থেকে শর্তসাপেক্ষ মডিফায়ার ক্লাস অপসারণ করা একটি চমৎকার জয় যদি আপনি আমাকে জিজ্ঞাসা করেন।
মাইক্রো ডিজাইনের সিদ্ধান্ত নিয়ে ভাবা সহজ :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 */
}
ভবিষ্যৎ উজ্জ্বল
এগুলি কেবলমাত্র কয়েকটি জিনিস যা আমি উত্পাদনে ব্যবহার করতে সক্ষম হওয়ার জন্য অপেক্ষা করতে পারি না। সিএসএস-ট্রিকস অ্যালম্যানাক-এরও একগুচ্ছ উদাহরণ রয়েছে। আপনি কি সঙ্গে করতে উন্মুখ :has()
? কিছু বাস্তব-বিশ্বের উদাহরণ কি ধরনের আপনি যেখানে চালানো হয়েছে :has()
নিখুঁত সমাধান হবে?
- এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
- প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
- উত্স: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- ক্ষমতা
- সক্ষম
- সম্পর্কে
- উপরে
- হিসাব
- প্রভাবিত
- সব
- ইতিমধ্যে
- সর্বদা
- আশ্চর্যজনক
- এবং
- অন্য
- প্রয়োগ করা
- অভিগমন
- এলাকার
- যুক্তি
- প্রবন্ধ
- ভিত্তি
- কারণ
- বাজি
- উত্তম
- মধ্যে
- বিট
- ফুঁ
- নির্মিত
- গুচ্ছ
- পেতে পারি
- কার্ড
- নির্ঝর
- কিছু
- পরিবর্তন
- পরিবর্তন
- শিশু
- বেছে নিন
- শ্রেণী
- ক্লাস
- সেমি
- কোড
- কলাম
- উপাদান
- ধারণ
- বিষয়বস্তু
- পারা
- পথ
- সিএসএস
- সিদ্ধান্ত
- চূড়ান্ত
- নির্ভর করে
- নকশা
- না
- করছেন
- করে DOM
- Dont
- নিচে
- উপাদান
- বিশেষত
- ইত্যাদি
- এমন কি
- কখনো
- প্রতি
- উদাহরণ
- উদাহরণ
- অভিজ্ঞতা
- চোখ
- প্রিয়
- বৈশিষ্ট্য
- কয়েক
- জরিমানা
- ফায়ারফক্স
- অনুসরণ
- অগ্রবর্তী
- থেকে
- সম্পূর্ণরূপে
- পাওয়া
- দেয়
- Goes
- চালু
- মহান
- গ্রিড
- গ্রিড-টেমপ্লেট-এরিয়া
- কৌশল
- ঘটা
- জমিদারি
- সাহায্য
- এখানে
- hi
- ঊর্ধ্বতন
- হাইলাইট করা
- এইচটিএমএল
- HTTPS দ্বারা
- আমি আছি
- ধারনা
- ভাবমূর্তি
- উন্নতি
- in
- ইন্টারেক্টিভ
- IT
- জাভাস্ক্রিপ্ট
- শুধু একটি
- রাখা
- রকম
- জানা
- ভাষা
- গত
- বিন্যাস
- সম্ভবত
- সামান্য
- দেখুন
- খুঁজছি
- অনেক
- ম্যাক্রো
- প্রণীত
- প্রধান
- করা
- পরিচালক
- অনেক
- হতে পারে
- মুহূর্ত
- অধিক
- সেতু
- মোজিলা
- প্রয়োজন
- চাহিদা
- নতুন
- পরবর্তী
- পরবর্তী.js
- স্বাভাবিকভাবে
- সংখ্যা
- সরকারী ভাবে
- ONE
- উদ্বোধন
- অন্যান্য
- বাহিরে
- অংশ
- বিশেষ
- যন্ত্রাংশ
- প্যাটার্ন
- সম্প্রদায়
- নির্ভুল
- জায়গা
- Plato
- প্লেটো ডেটা ইন্টেলিজেন্স
- প্লেটোডাটা
- সম্ভব
- বর্তমান
- চমত্কার
- সমস্যা
- উত্পাদনের
- প্রকাশিত
- নাগাল
- প্রতিক্রিয়া
- পড়া
- বাস্তব জগতে
- সম্প্রতি
- সরানোর
- প্রতিক্রিয়াশীল
- সারিটি
- নিয়ম
- চালান
- বলেছেন
- একই
- স্ক্যান
- নির্বাচন
- সেট
- শেয়ার
- সাইট
- স্মার্ট
- So
- সমাধান
- কিছু
- কিছু
- কোথাও
- প্রশিক্ষণ
- নির্দিষ্ট
- নির্দিষ্টতা
- শুরু
- রাষ্ট্র
- ডোরা
- ফিতে
- শৈলী
- সুপার
- সমর্থিত
- টেবিল
- গ্রহণ করা
- TD
- টেমপ্লেট
- সার্জারির
- রাষ্ট্র
- বিশ্ব
- জিনিস
- কিছু
- চিন্তা
- তিন
- সর্বত্র
- থেকে
- স্বন
- অত্যধিক
- সম্পূর্ণ
- পথ
- সত্য
- ওলট
- us
- ব্যবহার
- ব্যবহারকারী
- ux
- অপেক্ষা করুন
- উপায়
- কি
- কিনা
- যে
- হু
- জয়
- ভাবছি
- হয়া যাই ?
- বিশ্ব
- মূল্য
- would
- লেখা
- আপনি
- আপনার
- zephyrnet