বেসলাইন 2023

রাচেল অ্যান্ড্রু

বেসলাইন caniuse.com আসছে! এই পোস্টে ইন্টিগ্রেশন সম্পর্কে জানুন এবং 2023 সালে বেসলাইনের অংশ হয়ে যাওয়া কিছু বৈশিষ্ট্যও আবিষ্কার করুন।

বেসলাইনের নতুন সংজ্ঞার সাথে, একটি বৈশিষ্ট্যের জীবনচক্রের দুটি পর্যায় রয়েছে৷ প্রথমত, যখন এটি নতুনভাবে উপলব্ধ হয়, এবং তারপর যখন এটি 30 মাস পরে ব্যাপকভাবে উপলব্ধ হয়। একটি বৈশিষ্ট্য নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে ওঠে যখন এটি নিম্নলিখিত ব্রাউজারগুলিতে ইন্টারঅপারেবল হয়ে ওঠে:

• Safari (macOS এবং iOS)
• ফায়ারফক্স (ডেস্কটপ এবং অ্যান্ড্রয়েড)
• ক্রোম (ডেস্কটপ এবং অ্যান্ড্রয়েড)
• প্রান্ত (ডেস্কটপ)

বেসলাইন ল্যান্ড আমি কি ব্যবহার করতে পারি

বৈশিষ্ট্যের প্রাপ্যতা স্পষ্ট করার পরবর্তী ধাপ হিসেবে, আজ থেকে আমি কি ব্যবহার করতে পারি-তে বেসলাইন ল্যান্ড করতে শুরু করেছে। আমি কি ব্যবহার করতে পারি-তে কিছু পৃষ্ঠা পরিদর্শন করার সময়, আপনি একটি ব্যাজ দেখতে পাবেন যা আপনাকে বলে যে বৈশিষ্ট্যটি বেসলাইনে ব্যাপকভাবে উপলব্ধ কিনা।

নতুনভাবে উপলব্ধ বেসলাইনে থাকা বৈশিষ্ট্যগুলিও একটি ব্যাজ দেখাবে, যে বছর তারা উপলব্ধ হয়েছিল। সুতরাং, এই বছর মূল ব্রাউজার সেট জুড়ে যে কোনও কিছু আন্তঃপ্রক্রিয়াযোগ্য হয়ে উঠেছে তা হল বেসলাইন 2023- এর অংশ৷

এই পোস্টের বাকি অংশে, 2023 সালে এই মাইলফলকটি আঘাতকারী বৈশিষ্ট্যগুলি সম্পর্কে জানুন৷ এই সমস্ত বৈশিষ্ট্যগুলি হল বেসলাইন 2023 — নতুনভাবে উপলব্ধ৷

আকার কন্টেইনার ক্যোয়ারী এবং কন্টেইনার কোয়েরি ইউনিট

সাইজ কন্টেইনার ক্যোয়ারী আপনাকে একটি এলিমেন্টের সাইজ কোয়েরি করতে দেয়, যেভাবে মিডিয়া কোয়েরি আপনাকে ভিউপোর্টের সাইজ কোয়েরি করতে দেয়। তারা পুনঃব্যবহারযোগ্য উপাদানগুলি তৈরি করা আরও সহজ করে তোলে, কারণ আপনি এমন উপাদানগুলি তৈরি করতে পারেন যা তারা যে অঞ্চলে স্থাপন করা হয়েছে তার আকারের সাথে প্রতিক্রিয়া দেখায়।

কম্পোনেন্টের প্রস্থের উপর নির্ভর করে নিম্নলিখিত কার্ডের ডিজাইন পরিবর্তিত হয়। স্থিতিশীল ব্রাউজারে কন্টেইনার প্রশ্নে আরও জানুন।

নতুন রঙের স্থান এবং ফাংশন

CSS এখন রঙের স্থানগুলিকে সমর্থন করে যা আপনাকে sRGB স্বরগ্রামের বাইরের রঙগুলি অ্যাক্সেস করতে দেয়। এর মানে হল যে আপনি HD (হাই ডেফিনিশন) ডিসপ্লে সমর্থন করতে পারেন, HD গামুট থেকে রং ব্যবহার করে।

নতুন রঙের মডেল

এখন বেসলাইনে, রঙ ফাংশন lch() , lab() , oklch() , এবং oklab() LCH, Lab, OKLCH, এবং OKLab রঙের মডেলগুলিতে অ্যাক্সেস দেয়।

color-mix() ফাংশন

এছাড়াও, নতুন রঙ ফাংশন বেসলাইনের অংশ হয়ে উঠেছে। color-mix() ফাংশন যেকোনও রঙের স্পেসে এক রঙের সাথে অন্য রঙের মিশ্রণকে সক্ষম করে। নিম্নলিখিত CSS-এ, srgb রঙের জায়গায়, 25% নীল সাদাতে মিশ্রিত হয়।

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

color-mix() সম্পর্কে আরও জানুন ।

color() ফাংশন

color() ফাংশনটি যেকোন রঙের স্থানের জন্য ব্যবহার করা যেতে পারে যা R, G এবং B চ্যানেলের সাথে রঙ নির্দিষ্ট করে। color() প্রথমে একটি কালার স্পেস প্যারামিটার নেয়, তারপর আরজিবি এবং ঐচ্ছিকভাবে কিছু আলফার জন্য চ্যানেল মানগুলির একটি সিরিজ। আপনি যেকোনও ব্যবহার করতে পারেন: srgb , srgb-linear , display-p3 , a98-rgb , prophoto-rgb , rec2020 , xyz , xyz-d50 , এবং xyz-d65 । উদাহরণ স্বরূপ:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS হাই ডেফিনিশন কালার গাইড আপনাকে নতুন কালার স্পেস এবং ফাংশনের আরও অনেক উদাহরণ দেয়, সেই সাথে কোনটি কখন ব্যবহার করতে হবে সে সম্পর্কে তথ্য।

কম্প্রেশন স্ট্রীম

কম্প্রেশন স্ট্রীমস এপিআই হল একটি জাভাস্ক্রিপ্ট এপিআই যা ডেটার স্ট্রীমকে সংকুচিত এবং ডিকম্প্রেস করার জন্য। এই অন্তর্নির্মিত কম্প্রেশন ব্যবহার করে, অ্যাপ্লিকেশনগুলির আর একটি কম্প্রেশন লাইব্রেরি অন্তর্ভুক্ত করার প্রয়োজন নেই।

কম্প্রেশন স্ট্রীমে আরও জানুন এখন সব ব্রাউজারে সমর্থিত ।

অফস্ক্রিন ক্যানভাস

অফস্ক্রিন ক্যানভাসের আগে, ক্যানভাসের অঙ্কন ক্ষমতাগুলিকে <canvas> উপাদানের সাথে সংযুক্ত করা হয়েছিল, যার অর্থ এটি সরাসরি DOM-এর উপর নির্ভর করে। অফস্ক্রিন ক্যানভাস, নাম থেকে বোঝা যায়, ডিওম এবং ক্যানভাস এপিআইকে অফ-স্ক্রীনে সরিয়ে নিয়ে ডিকপল করে।

এই ডিকপলিংয়ের জন্য ধন্যবাদ, অফস্ক্রিন ক্যানভাসের রেন্ডারিং সম্পূর্ণভাবে DOM থেকে বিচ্ছিন্ন এবং তাই নিয়মিত ক্যানভাসের তুলনায় কিছু গতির উন্নতির প্রস্তাব দেয় কারণ দুটির মধ্যে কোনো সমন্বয় নেই। আরও কি, যদিও, এটি একটি ওয়েব ওয়ার্কারে রেন্ডারিং কাজ সরানোর জন্য ব্যবহার করা যেতে পারে, যদিও কোনও DOM উপলব্ধ নেই, মূল থ্রেডটি মুক্ত করে এবং অ্যাপ্লিকেশনটিকে আরও প্রতিক্রিয়াশীল করে তোলে।

অফস্ক্রিন ক্যানভাসে আরও জানুন—একজন ওয়েব কর্মীর সাথে আপনার ক্যানভাস ক্রিয়াকলাপের গতি বাড়ান

মডিউল প্রিলোড

প্রিলোডিং মডিউল ডাউনলোড এবং প্রক্রিয়াকরণের সময় কমাতে পারে। একটি জাভাস্ক্রিপ্ট মডিউল উল্লেখ করে লিঙ্ক এলিমেন্টে rel="modulepreload" যোগ করুন, এবং ব্রাউজার মডিউলটি পায়, পার্স করে এবং কম্পাইল করে এবং ফলাফলগুলি চালানোর জন্য প্রস্তুত মডিউল মানচিত্রে রাখে।

প্রিলোড মডিউল নিবন্ধে আরও জানুন।

CSS-এ ত্রিকোণমিতিক ফাংশন

2023 সালে CSS মান এবং ইউনিট লেভেল 4 স্পেসিফিকেশন থেকে ত্রিকোণমিতিক ফাংশন ইন্টারঅপারেবল হয়ে ওঠে। এর মানে হল যে ফাংশন sin() , cos() , tan() , asin() , acos() , atan() , এবং atan2() বেসলাইন 2023 এর অংশ।

এই ফাংশনগুলি কীভাবে ব্যবহার করবেন তা শিখুন এবং CSS-এর ত্রিকোণমিতিক ফাংশনে কিছু ব্যবহারের ক্ষেত্রে আবিষ্কার করুন।

জড় বৈশিষ্ট্য

জড় মানে নড়াচড়া করার ক্ষমতার অভাব, তাই আপনি যখন জড় কিছু চিহ্নিত করেন, তখন আপনি সেই DOM উপাদানগুলি থেকে আন্দোলন বা মিথস্ক্রিয়া সরিয়ে দেন। জড় বৈশিষ্ট্য ব্রাউজার উপাদানটিকে উপেক্ষা করে।

• একজন ব্যবহারকারী উপাদানটিতে ক্লিক করলে click ইভেন্টটি চালু হয় না।
• উপাদান ফোকাস লাভ করবে না.
• উপাদান এবং এর বিষয়বস্তু অ্যাক্সেসিবিলিটি ট্রি থেকে বাদ দেওয়া হয়েছে।

অফস্ক্রিন বা অন্যথায় লুকানো উপাদানগুলিতে এই বৈশিষ্ট্যটি যোগ করা উচিত। আপনি inert অ্যাট্রিবিউটে আরও শিখতে পারেন।

CSS গ্রিড লেআউটে সাবগ্রিড

grid-template-columns এবং grid-template-rows জন্য subgrid মান আপনাকে নেস্টেড গ্রিডে, প্যারেন্ট গ্রিডে সংজ্ঞায়িত ট্র্যাকগুলি ব্যবহার করতে দেয়। এর মানে হল যে আপনি একে অপরের সাথে এই নেস্টেড গ্রিডগুলির ভিতরে উপাদানগুলি সারিবদ্ধ করতে পারেন।

CSS সাবগ্রিড নিবন্ধে আপনি কিছু উদাহরণ এবং অন্যান্য অনেক পোস্টের লিঙ্ক এবং সাবগ্রিড ব্যবহারের ক্ষেত্রে হাইলাইট করার উদাহরণ পাবেন।

নম্বর ফরম্যাট V3

Intl.NumberFormat V3 হল Intl.NumberFormat-এর জন্য নতুন বৈশিষ্ট্যের একটি সেট, যা 2023-এ বেসলাইনের অংশ হয়ে উঠেছে। অতিরিক্ত বৈশিষ্ট্যগুলি হল:

• সংখ্যার রেঞ্জ ফরম্যাট করার জন্য তিনটি নতুন ফাংশন: ফরম্যাটরেঞ্জ, ফরম্যাটরেঞ্জ টু পার্টস এবং সিলেক্ট রেঞ্জ।
• গ্রুপিং enum
• নতুন রাউন্ডিং এবং নির্ভুলতা বিকল্প
• বৃত্তাকার অগ্রাধিকার
• দশমিক হিসাবে স্ট্রিং ব্যাখ্যা
• রাউন্ডিং মোড
• সাইন ডিসপ্লে নেতিবাচক

NumberFormat V3-এর প্রস্তাবে প্রতিটি নতুন বৈশিষ্ট্যের বিবরণ দেওয়া হয়েছে।

ফুলস্ক্রিন API

ফুলস্ক্রিন এপিআই আপনাকে requestFullscreen() পদ্ধতিতে কল করে একটি উপাদান যেমন <video> ফুলস্ক্রিন মোডে রাখতে দেয়। এটি একটি উপাদান পূর্ণস্ক্রীন মোডে আছে কিনা তা সনাক্ত করার পদ্ধতিও প্রদান করে এবং নথিটি এমন অবস্থায় আছে কিনা যা আপনাকে ফুলস্ক্রিন মোডের অনুরোধ করতে দেবে।

MDN-এ ফুলস্ক্রিন API-এর এই গাইডে আরও জানুন।

CSS :has() নির্বাচক

শুধু বেসলাইন 2023 তৈরি করা হল :has() নির্বাচক, যেটি 19 ডিসেম্বর Firefox 121-এ অবতরণ করবে। অন্যান্য ব্যবহারের মধ্যে, এই নির্বাচক একটি অভিভাবক নির্বাচক হিসাবে কাজ করে, যা আপনাকে এটির ভিতরে থাকা জিনিসগুলির উপর ভিত্তি করে একটি উপাদান নির্বাচন করতে দেয়। উদাহরণস্বরূপ, একটি উপাদানের ভিতরে একটি চিত্র আছে কি না তার উপর নির্ভর করে আপনি বিভিন্ন CSS প্রয়োগ করতে পারেন।

আরও জানুন :has(): পারিবারিক নির্বাচক ।

এই বছর বেসলাইনে যোগদানকারী আরও বৈশিষ্ট্য

এই পোস্টটি এই বছর বেসলাইনের অংশ হয়ে উঠেছে এমন কিছু মূল বৈশিষ্ট্য ভাগ করেছে, তবে আরও কিছু আছে।

• নির্মাণযোগ্য স্টাইলশীট
• CSS-এ জটিল nth-শিশু নির্বাচক
• মিডিয়া ক্যোয়ারীগুলির জন্য ব্যাপ্তি সিনট্যাক্স
• মানচিত্র আমদানি করুন
• CSS প্রদর্শনের জন্য একাধিক মান
• @কাউন্টার-স্টাইল
• counter-set সিএসএস সম্পত্তি
• linear() ইজিং ফাংশন
• অরিজিন প্রাইভেট ফাইল সিস্টেম (OPFS)
• CSS নেস্টিং , পরিবর্তন সহ যা রিলাক্স পার্সিং যোগ করে ।
• CSS :dir() সিউডো-ক্লাস নির্বাচক
• CSS cap দৈর্ঘ্য ইউনিট
• CSS মাস্কিং
• এইচটিএমএল ভিডিও <source> উপাদানগুলির জন্য মিডিয়া ক্যোয়ারী সমর্থন
• HTML <search> উপাদান
• <iframe> উপাদানগুলির অলস লোডিং (19 ডিসেম্বর ফায়ারফক্স 121-এ অবতরণ)
• lh এবং rlh CSS লাইন-উচ্চতা একক

এই বৈশিষ্ট্যগুলির মধ্যে অনেকগুলি ইন্টারপ 2023- এ সহযোগিতামূলক কাজের মাধ্যমে আন্তঃকার্যযোগ্যতায় পৌঁছেছে। সেই প্রক্রিয়ার মাধ্যমে কীভাবে বৈশিষ্ট্যগুলি আনা যায় তা দেখতে উত্তেজনাপূর্ণ, এবং নতুন উপলব্ধ হিসাবে বেসলাইনে অবতরণ করা যায়, যা তাদের ব্যাপকভাবে উপলব্ধ হওয়ার জন্য টাইমার সেট করে। এটি আপনার নিজের প্রকল্পগুলিতে বৈশিষ্ট্যগুলি কখন গ্রহণ করতে হবে সে সম্পর্কে সিদ্ধান্ত নেওয়ার জন্য একটি পরিষ্কার পথ তৈরি করে।