2024 সালের আগস্টে স্থিতিশীল এবং বিটা ওয়েব ব্রাউজারে আসা কিছু আকর্ষণীয় বৈশিষ্ট্য আবিষ্কার করুন।
স্থিতিশীল ব্রাউজার রিলিজ
আগস্ট 2024 এ, ফায়ারফক্স 129 এবং ক্রোম 128 স্থিতিশীল হয়ে ওঠে। এই পোস্টটি ওয়েব প্ল্যাটফর্মে যোগ করা নতুন বৈশিষ্ট্যগুলি দেখে।
রুবি বিন্যাস আপডেট
এইচটিএমএল <ruby>
উপাদানটি পাঠ্য উপস্থাপনা বাড়ানোর জন্য একটি শক্তিশালী হাতিয়ার, বিশেষ করে পূর্ব এশীয় ভাষার জন্য। এই উপাদানটি আপনাকে বেস টেক্সটের উপরে বা পাশে ফোনেটিক টীকা বা অন্যান্য সম্পূরক তথ্য প্রদর্শন করতে দেয়। ক্রোম 128 থেকে, রুবি টীকা লাইন-ব্রেকযোগ্য, এবং আপনি ruby-align
CSS প্রপার্টি দিয়ে রুবি টেক্সট স্টাইল করতে পারেন।
Line-breakable <ruby>
এবং CSS ruby-align
প্রপার্টিতে আরও জানুন।
মাল্টি-পেন ইনকিংয়ের জন্য PointerEvent.deviceProperties
এই পরিবর্তন, Chrome 128-এ শিপিং, ডিজিটাইজারের সাথে ইন্টারঅ্যাক্ট করা প্রতিটি ডিভাইসের জন্য নির্দিষ্ট রঙ বা পেনের আকার সেট করতে স্ক্রিনের সাথে ইন্টারঅ্যাক্ট করা পৃথক কলম (পয়েন্টার) সনাক্ত করার একটি নিরাপদ এবং নির্ভরযোগ্য উপায় প্রদান করে। এটি একটি নতুন বৈশিষ্ট্য, deviceProperties
অন্তর্ভুক্ত করতে PointerEvent
ইন্টারফেসকে প্রসারিত করে। এতে uniqueId
বৈশিষ্ট্য রয়েছে, যা একটি সেশন-স্থির, নথি বিচ্ছিন্ন, অনন্য শনাক্তকারীকে উপস্থাপন করে যা আপনি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করা পৃথক কলম সনাক্ত করতে নির্ভরযোগ্যভাবে ব্যবহার করতে পারেন।
Promise.try
এছাড়াও Chrome 128-এ, Promise.try
প্রতিশ্রুতি দিয়ে ত্রুটিগুলি পরিচালনা করা সহজ করে তোলে। একটি প্যাটার্ন যেখানে আপনি একটি ফাংশন আছে, f
. এই ফাংশনটি অ্যাসিঙ্ক হতে পারে এবং একটি প্রতিশ্রুতি প্রদান করতে পারে, বা এটি নাও হতে পারে। উভয় ক্ষেত্রেই ত্রুটিগুলি পরিচালনা করতে প্রতিশ্রুতি শব্দার্থবিদ্যা ব্যবহার করতে, আপনি একটি প্রতিশ্রুতিতে ফাংশনটি মোড়ানো। এটি সাধারণত new Promise(resolve => resolve(f()))
দিয়ে অর্জন করা হয়।
Promise.try
হল এটি সম্পন্ন করার একটি আরও সহজ উপায়। এটি আপনাকে একটি প্রতিশ্রুতি চেইন শুরু করতে দেয় যা সিঙ্ক্রোনাস এবং অ্যাসিঙ্ক্রোনাস ব্যতিক্রম প্রবাহ উভয়ই পরিচালনা করার পরিবর্তে .catch
হ্যান্ডলারে সমস্ত ত্রুটি ধরা দেয়।
অ্যানিমেট এন্ট্রি প্রভাব
Firefox 129-এ দুটি CSS বৈশিষ্ট্য রয়েছে যা এন্ট্রি ইফেক্ট অ্যানিমেটিং করার জন্য ব্যবহৃত হয় এবং এই বৈশিষ্ট্যগুলি এখন নতুনভাবে উপলব্ধ বেসলাইন।
@starting-style
নিয়মটি পৃষ্ঠায় রেন্ডার হওয়ার আগে একটি উপাদানের প্রাথমিক শৈলীগুলিকে সংজ্ঞায়িত করে। ডিসপ্লে থেকে অ্যানিমেট করা উপাদানগুলির জন্য এটি প্রয়োজনীয়: কোনোটিই নয়, কারণ তাদের এমন একটি অবস্থার প্রয়োজন যা থেকে অ্যানিমেট করা যায়৷
এন্ট্রি ইফেক্টের জন্য আলাদা বৈশিষ্ট্যের অ্যানিমেশনও প্রয়োজন, যেগুলি মানগুলির মধ্যে প্রসারিত করতে পারে না। এটি এখন transition-behavior: allow-discrete
বা আপনার ট্রানজিশন শর্টহ্যান্ডে allow-discrete
মান। এটি এখন Firefox 129-এও সমর্থিত।
নাও ইন বেসলাইনে আরও জানুন: অ্যানিমেটিং এন্ট্রি প্রভাব ৷
PerformanceResourceTiming
-এ সংযোজন
ফায়ারফক্স 129 PerformanceResourceTiming
ইন্টারফেসের contentType
এবং responseStatus
বৈশিষ্ট্য যোগ করে। এগুলো যথাক্রমে রিসোর্স আনার সময় ফিরে আসা রিসোর্সের বিষয়বস্তুর ধরন এবং HTTP প্রতিক্রিয়া স্ট্যাটাস কোড নির্দেশ করে।
contentType
responseStatus
toJSON()
পদ্ধতিতে ভূ-অবস্থান
এছাড়াও Firefox 129-এ রয়েছে GeolocationCoordinates.toJSON()
এবং GeolocationPosition.toJSON()
।
WebDriver BiDi
Firefox 129-এ এখন WebDriver BiDi-এর জন্য সমর্থন রয়েছে। এর মানে হল আপনি অটোমেশনের জন্য Chrome বা Firefox এর সাথে Puppeteer ব্যবহার করতে পারেন। Firefox, Chrome এবং Puppeteer-এ WebDriver BiDi উৎপাদন-প্রস্তুত এবং ফায়ারফক্সের জন্য অফিসিয়াল পাপেটিয়ার সমর্থনের ঘোষণায় আরও জানুন।
বিটা ব্রাউজার রিলিজ
বিটা ব্রাউজার সংস্করণগুলি আপনাকে সেই জিনিসগুলির একটি পূর্বরূপ দেয় যা ব্রাউজারের পরবর্তী স্থিতিশীল সংস্করণে থাকবে৷ নতুন বৈশিষ্ট্যগুলি পরীক্ষা করার জন্য এটি একটি দুর্দান্ত সময়, বা অপসারণ, যা বিশ্ব এই প্রকাশ পাওয়ার আগে আপনার সাইটকে প্রভাবিত করতে পারে৷ নতুন বিটা হল Firefox 130 এবং Chrome 129 । সাফারি 18 বিটা এখনও চলছে। এই প্রকাশগুলি প্ল্যাটফর্মে অনেক দুর্দান্ত বৈশিষ্ট্য নিয়ে আসে। সমস্ত বিবরণের জন্য রিলিজ নোটগুলি দেখুন। এখানে মাত্র কয়েকটি হাইলাইট রয়েছে।
ফায়ারফক্স 130 <details>
উপাদান গ্রুপিং <details>
উপাদানগুলির নাম বৈশিষ্ট্য সমর্থন করে, যেখানে একটি গ্রুপের মধ্যে শুধুমাত্র একটি উপাদান একবারে খোলা হতে পারে। এটি আপনাকে জাভাস্ক্রিপ্ট ব্যবহার না করেই একটি এক্সক্লুসিভ অ্যাকর্ডিয়ন তৈরি করতে দেয়।
ক্রোম 129 সিএসএস interpolate-size
প্রপার্টি এবং calc-size()
ফাংশন যোগ করে।
সিএসএস interpolate-size
বৈশিষ্ট্য একটি পৃষ্ঠাকে অ্যানিমেশন এবং সিএসএস অন্তর্নিহিত সাইজিং কীওয়ার্ড যেমন auto
, min-content
এবং fit-content
ট্রানজিশন বেছে নিতে দেয়, যে ক্ষেত্রে এই কীওয়ার্ডগুলি অ্যানিমেটেড করা যেতে পারে।
CSS calc-size()
ফাংশন হল একটি CSS ফাংশন যা calc()
এর অনুরূপ, তবে এটি ঠিক একটি সমর্থিত সাইজিং কীওয়ার্ডের অপারেশনকেও সমর্থন করে। বর্তমানে সমর্থিত সাইজিং কীওয়ার্ড হল auto
, min-content
, max-content
এবং fit-content
।
এছাড়াও Chrome 129-এ রয়েছে Intl.DurationFormat
, সময়কাল ফর্ম্যাট করার একটি পদ্ধতি প্রদান করে, উদাহরণস্বরূপ "1 ঘন্টা 40 মিনিট 30 সেকেন্ড" যা একাধিক লোকেল সমর্থন করে৷