Chrome 120-এ লুকহেড নেস্টিং সক্ষম করা হয়েছে।
এই বছরের শুরুর দিকে ক্রোম 112 সালে CSS নেস্টিং পাঠিয়েছে এবং এটি এখন প্রতিটি প্রধান ব্রাউজারে রয়েছে।
যাইহোক, সিনট্যাক্সের জন্য একটি কঠোর এবং সম্ভাব্য অপ্রত্যাশিত প্রয়োজনীয়তা ছিল, যা অবৈধ নেস্টিং উদাহরণগুলির প্রথম নিবন্ধে তালিকাভুক্ত করা হয়েছে। এই ফলো-আপ নিবন্ধটি স্পেসে এবং Chrome 120 থেকে কী পরিবর্তন হয়েছে তা কভার করবে।
নেস্টিং এলিমেন্ট ট্যাগের নাম
CSS নেস্টিং সিনট্যাক্সের প্রথম প্রকাশের সবচেয়ে আশ্চর্যজনক সীমাবদ্ধতাগুলির মধ্যে একটি হল বেয়ার এলিমেন্ট ট্যাগ নামগুলি নেস্ট করতে অক্ষমতা। নিম্নলিখিত সিএসএস নেস্টিং বৈধ করে এই অক্ষমতা সরিয়ে দেওয়া হয়েছে:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
এটি সত্যিই মিষ্টি হয়ে ওঠে যখন নেস্টিং অর্ডার করা, ক্রমবিহীন বা সংজ্ঞা তালিকা করা হয়:
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
এই বাসা বাঁধার অনুমতি দেওয়ার জন্য কী পরিবর্তন হয়েছে?
এটি মূলত সম্প্রদায় এবং CSS ওয়ার্কিং গ্রুপের ইচ্ছার সাথে মিলিত ক্রোম ইঞ্জিনিয়ারদের কিছু অন্বেষণ এবং প্রোটোটাইপিংয়ের জন্য ধন্যবাদ।
একটি শালীন পরিমাণ সন্দেহ ছিল যে CSS পার্সারকে একটি ট্যাগ নাম ( div ) এবং একটি সম্পত্তির নাম ( visibility ) এর মধ্যে পার্থক্য করতে শেখানো যেতে পারে কারণ পার্সারের বর্তমানে সামনে দেখার কোন ধারণা নেই৷ টোকেনটি একটি সম্পত্তি তা বোঝার জন্য, ব্রাউজারটিকে সামনের দিকে তাকাতে হবে এবং দেখতে হবে যে একটি : অজানা টোকেন অনুসরণ করে কিনা। তাই, মূল স্পেকে, & চিহ্নটি ব্রাউজারকে নির্দেশ করতে ব্যবহার করা হয়েছিল যে নিম্নলিখিতটি নেস্ট করা হয়েছে, এবং একটি নিয়মিত CSS সম্পত্তি এবং মান নয়।
সৌভাগ্যবশত, একজন প্রকৌশলী আবিষ্কার করেছেন যে যখন পার্সার স্বাভাবিক খরচের পাস অনুযায়ী একটি সম্পত্তি হিসাবে নেস্টেড নির্বাচককে পার্স করতে ব্যর্থ হয়, তখন এটি এমন একটি মোডে পুনরায় চালু করা যেতে পারে যা একটি সম্পত্তির পরিবর্তে একটি নির্বাচককে ধরে নেয়। পার্সিং রিজিউম, নির্বাচক নেস্টিং হিসাবে নেস্টিং স্বীকার করে। এটি যথেষ্ট দ্রুত এবং যথেষ্ট নির্ভরযোগ্য যে এটি সিনট্যাক্স প্রকাশ করার জন্য যথেষ্ট পরিমাণে নির্ধারিত হয়েছিল।