কিছু আধুনিক CSS ম্যাজিক সহ ডেভ রুপার্ট যেটি সেই ক্লাসিক ধাঁধাগুলির মধ্যে একটিকে মোকাবেলা করে: কম্পোনেন্টের জন্য সিএসএস যখন আমরা এতে নিক্ষেপ করা বিষয়বস্তু পরিচালনা করতে অক্ষম হয় তখন কী হবে?
নির্দিষ্ট পরিস্থিতি হল যখন একটি লেআউট গ্রিড একটি জোড় সংখ্যার আইটেম আশা করে, কিন্তু পরিবর্তে একটি বিজোড় সংখ্যা দিয়ে সরবরাহ করা হয়। আমরা শেষের দিকে একটি "ঝুলন্ত" উপাদান রেখেছি যা লেআউটটি ফেলে দেয়। মনে হচ্ছে কি প্রয়োজন কিছু আছে প্রতিরক্ষামূলক CSS এবং ডেভ এটা সম্পন্ন.
তিনি জন্য পৌঁছান :has() একটি নিফটি নির্বাচক লিখতে যা একটি গ্রিডের শেষ আইটেমটি স্নিফ করে যাতে বিজোড় সংখ্যক আইটেম রয়েছে:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }এটি ভেঙে দেওয়া:
- আমরা একটি অভিভাবক ধারক আছে
.items. - যদি পাত্রে
:has()an.itemশিশু যে তার প্রকারের শেষ, - …এবং সেটা
.itemএকটি বিজোড়-সংখ্যার উদাহরণ হতে পারে, - …তারপর প্রথমটি নির্বাচন করুন
.itemযে ধরনের উপাদান এবং এটি শৈলী!
এই ক্ষেত্রে, যে শেষ .item লেআউটে গর্ত প্রতিরোধ করতে পূর্ণ-প্রস্থে যেতে সেট করা যেতে পারে।
যদি... তাহলে... CSS-এর শর্তসাপেক্ষ লজিক ক্ষমতা আছে! আমরা এই মুহুর্তে শুধুমাত্র Safari TP এবং Edge/Chrome Canary-এর জন্য সমর্থন সম্পর্কে কথা বলছি, তবে এটি বেশ দুর্দান্ত।
সুযোগ হিসাবে, তেমানি আফিফ সম্প্রতি তিনি শেখা কৌশলগুলি শেয়ার করেছেন অন্তর্নিহিত গ্রিড নিয়ে পরীক্ষা করা হচ্ছে. সিএসএস গ্রিডের অটো-প্লেসমেন্ট অ্যালগরিদমের সুবিধা গ্রহণ করে, আমাদের গ্রিডের জন্য একটি নির্দিষ্ট সংখ্যক কলাম এবং সারি স্পষ্টভাবে ঘোষণা করতে হবে না — প্রয়োজন হলে CSS আমাদের জন্য সেগুলি তৈরি করবে!
না, তেমানির কৌশলগুলি ডেভের "ড্যাংলার" দ্বিধা-দ্বন্দ্বের বিকল্প সমাধান নয়। কিন্তু ডেভের প্রতিরক্ষামূলক CSS ব্যবহারের সাথে পুনরাবৃত্তিযোগ্য গ্রিড লেআউট প্যাটার্নগুলির সাথে তেমানির পদ্ধতির সমন্বয় :has(), আমরা একটি ভারসাম্যপূর্ণ, পুনরাবৃত্তিযোগ্য প্যাটার্ন বজায় রেখে হালকা ওজনের এবং যেকোন সংখ্যক আইটেম পরিচালনা করতে সক্ষম একটি বেশ শক্তিশালী এবং জটিল চেহারার গ্রিড পাই।
