গত বছরের শেষে ইন্টারপ 2023 সমাপ্ত হয়। ব্রাউজার বিক্রেতা এবং অন্যান্য পক্ষের এই প্রচেষ্টার লক্ষ্য হল একটি আরও ইন্টারঅপারেবল ওয়েব তৈরি করা, যেখানে ব্রাউজারগুলির মধ্যে কম পার্থক্য আপনাকে নিয়ে যেতে পারে৷ এই পোস্টটি চূড়ান্ত ফলাফল এবং ক্রোম টিমের কিছু প্রিয় বৈশিষ্ট্য শেয়ার করে৷
চূড়ান্ত স্কোর
এত সবুজ দেখতে খুব ভালো লাগছে, 2023 সালের শুরুর স্কোরের সাথে এটির তুলনা করুন, এবং আমরা অনেক দূর এগিয়েছি, প্রতিটি ব্রাউজারে স্কোর ব্যাপক বৃদ্ধি পেয়েছে।
আমরা কি সম্পর্কে উত্তেজিত?
ইন্টারপ 2023 ড্যাশবোর্ডে 2023 এর জন্য ফোকাস এলাকার সম্পূর্ণ তালিকা খুঁজুন। কিছু ফোকাস ক্ষেত্র—যেমন :has() , কন্টেইনার কোয়েরি, এবং inert বৈশিষ্ট্য, একটি সম্পূর্ণ বৈশিষ্ট্যকে কভার করে। অন্যরা, উদাহরণস্বরূপ ফ্লেক্সবক্সের কাজ, একটি বিদ্যমান ক্রস-ব্রাউজার বৈশিষ্ট্যে কিছু সূক্ষ্ম পরীক্ষা ব্যর্থতার সাথে মোকাবিলা করেছে।
: আছে()
"অবশেষে CSS-এর জন্য একজন অভিভাবক নির্বাচক! এটি প্রায় প্রথম দিন থেকেই অনুরোধ করা হয়েছে, এবং অবশেষে এটি সমস্ত ব্রাউজারে থাকা দুর্দান্ত এবং এর অর্থ হল এই নির্বাচককে অনুকরণ করার জন্য বিকাশকারীদের কম জাভাস্ক্রিপ্ট চালাতে হবে।"— থমাস স্টেইনার, ক্রোমের বিকাশকারী সম্পর্ক প্রকৌশলী ।
কার্যকরী ছদ্ম-শ্রেণি :has() সম্পর্কে প্রচুর উত্তেজনা দেখা দিয়েছে, কারণ এটি ডেভেলপারদের কাছ থেকে একটি মূল অনুরোধ প্ল্যাটফর্মে নিয়ে এসেছে। এটি আপনাকে একটি অভিভাবক নির্বাচক দেয়- আপনি এটির ভিতরে থাকা জিনিসগুলির উপর ভিত্তি করে একটি উপাদান নির্বাচন করতে পারেন। তবে, এটি আরও অনেক কিছুর জন্য ব্যবহার করা যেতে পারে। CSS wrapped এ যেমন ব্যাখ্যা করা হয়েছে, আপনি প্যারেন্ট এলিমেন্টের চেয়ে অনেক বেশি কিছু নির্বাচন করতে পারেন, এবং এমনকি সাইডওয়ে সিলেকশনও করতে পারেন।
:has() ডেমো: ডকউনা ক্র্যাভেটস , ক্রোম টিমের একজন বিকাশকারী সম্পর্ক প্রকৌশলী ব্যাখ্যা করেছেন:
":has() নির্বাচক হল সবচেয়ে নমনীয় এবং শক্তিশালী নতুন উপলব্ধ CSS বৈশিষ্ট্যগুলির মধ্যে একটি৷ এটির সাহায্যে, আপনি উপস্থিতি, রাজ্য বা এমনকি সংখ্যার উপর ভিত্তি করে যে কোনও অভিভাবককে স্টাইল করতে পারেন৷ তবে আরও কী আপনি একত্রিত করতে পারেন এটি অন্যান্য কম্বিনেটরদের সাথে ভাইবোনদের স্টাইল করতে এবং সত্যিই আপনার UI এর উপর একটি নতুন স্তরের শৈলী নিয়ন্ত্রণ অর্জন করুন৷ এটি এমন একটি নমনীয় বৈশিষ্ট্য! আমি ইতিমধ্যে প্রচুর দুর্দান্ত ডেমো দেখেছি যা অতিরিক্ত স্ক্রিপ্টিংয়ের উপর নির্ভর করার প্রয়োজনীয়তা হ্রাস করে এর ক্ষমতা :has()।"
ক্রোমের একজন সফ্টওয়্যার প্রকৌশলী Philip Jägenstedt আমাকে মনে করিয়ে দিয়েছিলেন, :has() হল শীর্ষ বৈশিষ্ট্য যা 2023 সালে স্টেট অফ CSS সমীক্ষায় জিজ্ঞাসা করা হলে সমর্থনের অভাবের কারণে বিকাশকারীরা লড়াই করেছিলেন। সুতরাং আমরাই একমাত্র ব্যক্তি নই যে এটি উপলব্ধ থাকার জন্য উত্তেজিত।
আপনি অ্যাডাম আর্গিলের সাথে উনা শুনতে পারেন, CSS পডকাস্টে has() সম্পর্কে কথা বলতে পারেন , তারপরে ওয়েব সম্প্রদায়ের এই পোস্টগুলি থেকে :has() সম্পর্কে আরও শিখতে পারেন।
- উদাহরণ দিয়ে CSS
:has()নির্বাচক শিখুন -
:has()দিয়ে স্ক্রোল লক করা - CSS এর জন্য একটি ব্যবহার-কেস
:has()
ধারক প্রশ্ন
2023 একবার অসম্ভব বলে মনে করা জিনিসগুলির জন্য একটি দুর্দান্ত বছর হিসাবে পরিণত হয়েছিল। :has() ছাড়াও, ওয়েব প্ল্যাটফর্ম অবশেষে কন্টেইনার প্রশ্নের জন্য ক্রস-ব্রাউজার সমর্থন লাভ করেছে। আপনি 2011 সাল থেকে কন্টেইনার (বা উপাদান) প্রশ্নের জন্য জিজ্ঞাসা করছেন, প্রতিক্রিয়াশীল ডিজাইনের ধারণাটি চালু হওয়ার মাত্র এক বছর পরে। এখন, এটি এখানে, এবং সমস্ত প্রধান ব্রাউজার ইঞ্জিনে উপলব্ধ ৷
উনা এবং অ্যাডাম সিএসএস পডকাস্টে কন্টেইনার প্রশ্ন নিয়ে আলোচনা করেছেন এবং উনা ব্রাউজারে ডিজাইনিং এর একটি পর্বে তাদের পরিচয় করিয়ে দিয়েছেন । সম্প্রদায়টি প্রচুর টিপস এবং ধারনাও ভাগ করেছে।
সাবগ্রিড
সাবগ্রিড হল ইন্টারপ 2023-এ আমার প্রিয় অন্তর্ভুক্তি। এটি আপনাকে একটি প্যারেন্ট এলিমেন্টে একটি গ্রিড সংজ্ঞায়িত করতে দেয় এবং তারপর সেই মূল গ্রিডের ভিতরে থাকা গ্রিডগুলিতে সেই প্যারেন্টে সংজ্ঞায়িত ট্র্যাক মাপগুলি ব্যবহার করতে দেয়৷ Microsoft Edge-এর ওয়েব প্ল্যাটফর্ম ইঞ্জিনিয়ারদের কাজের জন্য ধন্যবাদ, 2023 সালের মধ্যে সমস্ত প্রধান ব্রাউজার ইঞ্জিনে সাবগ্রিড উপলব্ধ হয়েছে , Chrome-এর স্কোর বাড়াতে এবং এই উত্তেজনাপূর্ণ বৈশিষ্ট্যটি সবার কাছে নিয়ে আসতে।
ক্রোম ডেভেলপার রিলেশন ইঞ্জিনিয়ার আড্রিয়ানা জারা আমাকে বলেছেন কিভাবে গ্রিড এবং সাবগ্রিড একটি দুর্দান্ত UI তৈরি করা সহজ করে তোলে,
"আমি ভিজ্যুয়াল, লেআউট, একটি সামঞ্জস্যপূর্ণ চেহারা রাখা এবং স্ক্রিনের সাথে মানিয়ে নেওয়ার ক্ষেত্রে ভয়ঙ্কর। কিন্তু গ্রিড এবং সাবগ্রিডের সাহায্যে কোনওভাবে এমন একটি নকশা তৈরি করা যা একাধিক স্ক্রীন আকার জুড়ে কাজ করে এবং বিষয়বস্তুর সাথে স্বয়ংক্রিয়ভাবে খাপ খাইয়ে নেয়! এটি আমার প্রিয় কারণ এটি একটি মৌলিক বিষয়কে মোকাবেলা করে৷ এমন একটি ওয়েবসাইট তৈরি করতে হবে যা ব্যবহারকারীদের এক টন দক্ষতা ছাড়াই একটি শালীন অভিজ্ঞতা দেয়।"
আমি 12 দিনের ওয়েবের জন্য একটি নিবন্ধে সাবগ্রিডের জন্য কিছু ব্যবহারের কেস লিখেছি এবং এই পোস্টের অন্যান্য বৈশিষ্ট্যগুলির মতো, আপনি এটি সম্পর্কে একটি CSS পডকাস্ট পর্ব শুনতে পারেন। এছাড়াও ওয়েব থেকে অনেক সম্পদ আছে.
- সিএসএস সাবগ্রিড শিখুন
- ভিডিও: সাবগ্রিড সহ সহজ এবং আরও সামঞ্জস্যপূর্ণ লেআউট
- CSS গ্রিড এবং সাবগ্রিডের সাথে বিষয়বস্তু তৈরি করা
রঙের স্থান এবং ফাংশন
এতে অবাক হওয়ার কিছু নেই যে ক্রোম সিএসএস বিকাশকারী অ্যাডাম আর্গিল আমাকে বলেছিলেন যে রঙের স্থান এবং ফাংশনগুলি তার প্রিয় বৈশিষ্ট্য ছিল,
"গুডবাই বিশ্রী HSL চ্যানেল মান পরিবর্তনশীল গণিত; হ্যালো জাস্ট-ইন-টাইম রঙের বৈকল্পিক ওয়ান-লাইনার। নতুন রঙের স্থান এবং ফাংশনগুলি শুধুমাত্র রঙের কর্মপ্রবাহের সমস্যাগুলি সমাধান করে না, তারা আরও উন্নত, নির্ভরযোগ্য এবং প্রাণবন্ত রঙ এবং গ্রেডিয়েন্টগুলিতে অ্যাক্সেস নিয়ে আসে একই সাথে আপনার জীবনকে আরও সহজ করার সাথে সাথে কিছু ক্ষমতা আনলক করার বিষয়ে কী ভাল লাগবে না। সেই ইন্টারপ প্রচেষ্টায় সিজনিং ছিটিয়ে দিন, এবং এই খাবারটি রঙিন আনন্দদায়ক।"
অ্যাডাম আপনাকে এই নতুন বৈশিষ্ট্যগুলি বুঝতে সাহায্য করার জন্য কিছু আশ্চর্যজনক সামগ্রী তৈরি করেছে, যেমন হাই ডেফিনিশন CSS কালার গাইড এবং gradient.style , এবং CSS পডকাস্টে রঙ ফাংশন সম্পর্কে কথা বলা।
সমস্ত প্রধান ব্রাউজার ইঞ্জিনে এই বৈশিষ্ট্যগুলি উপলব্ধ থাকা উত্তেজনাপূর্ণ৷ এই মহান নিবন্ধে আরো খুঁজুন.
ইন্টারপ 2024-এর জন্য উন্মুখ
বৈশিষ্ট্যগুলি আন্তঃপ্রক্রিয়াযোগ্য হয়ে গেলে, সেগুলি বেসলাইনের অংশ হয়ে যায় — নতুন উপলব্ধ৷ ইন্টারপ 2023-এর সাথে জড়িত প্রত্যেকের কাজের কারণে 2023 সালে এই গোষ্ঠীতে কতগুলি নতুন বৈশিষ্ট্য প্রবেশ করেছে তা দেখতে খুব উত্তেজনাপূর্ণ। খুব শীঘ্রই 2024-এর জন্য নির্বাচিত ফোকাস এলাকা ঘোষণা করার সময় হবে এই বছর ওয়েব প্ল্যাটফর্মটি কতটা উন্নত হতে পারে তা দেখার জন্য সবাই উন্মুখ।