বেসলাইন 2023

Rachel Andrew

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

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

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

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

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

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

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

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

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

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

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

CSS এখন রঙের স্থানগুলিকে সমর্থন করে যা আপনাকে sRGB স্বরগ্রামের বাইরে রঙগুলি অ্যাক্সেস করতে দেয়। এর মানে হল আপনি HD gamuts থেকে রং ব্যবহার করে 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-এর উপর নির্ভরশীল। অফস্ক্রিন ক্যানভাস ক্যানভাস অফ-স্ক্রীন সরানোর মাধ্যমে ক্যানভাস API থেকে DOM কে ডিকপল করে।

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

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

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

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

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

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

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

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

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

যখন আপনি একটি DOM উপাদানকে inert হিসাবে চিহ্নিত করেন, তখন আপনি এটি থেকে আন্দোলন বা মিথস্ক্রিয়া সরিয়ে দেন। জড় বৈশিষ্ট্য ব্রাউজারকে উপাদানটিকে উপেক্ষা করে:

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

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

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

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

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

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

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

• সংখ্যার রেঞ্জ ফরম্যাট করার জন্য তিনটি নতুন ফাংশন: formatRange , formatRangeToParts এবং selectRange
• গ্রুপিং 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 -এ সহযোগিতামূলক কাজের মাধ্যমে আন্তঃকার্যযোগ্যতায় পৌঁছেছে। সেই প্রক্রিয়ার মাধ্যমে কীভাবে বৈশিষ্ট্যগুলি আনা যায় এবং নতুন উপলব্ধ হিসাবে বেসলাইনে অবতরণ করা যায় তা দেখতে উত্তেজনাপূর্ণ, যা তাদের ব্যাপকভাবে উপলব্ধ হওয়ার জন্য টাইমার বন্ধ করে দেয়। এটি আপনার নিজের প্রকল্পগুলিতে বৈশিষ্ট্যগুলি কখন গ্রহণ করতে হবে সে সম্পর্কে সিদ্ধান্ত নেওয়ার জন্য একটি পরিষ্কার পথ তৈরি করে।