আগস্টে ওয়েব প্ল্যাটফর্মে নতুন

2024 সালের আগস্টে স্থিতিশীল এবং বিটা ওয়েব ব্রাউজারে আসা কিছু আকর্ষণীয় বৈশিষ্ট্য আবিষ্কার করুন।

আগস্ট 2024 এ, ফায়ারফক্স 129 এবং ক্রোম 128 স্থিতিশীল হয়ে ওঠে। এই পোস্টটি ওয়েব প্ল্যাটফর্মে যোগ করা নতুন বৈশিষ্ট্যগুলি দেখে।

রুবি বিন্যাস আপডেট

এইচটিএমএল <ruby> উপাদানটি পাঠ্য উপস্থাপনা বাড়ানোর জন্য একটি শক্তিশালী হাতিয়ার, বিশেষ করে পূর্ব এশীয় ভাষার জন্য। এই উপাদানটি আপনাকে বেস টেক্সটের উপরে বা পাশে ফোনেটিক টীকা বা অন্যান্য সম্পূরক তথ্য প্রদর্শন করতে দেয়। ক্রোম 128 থেকে, রুবি টীকা লাইন-ব্রেকযোগ্য, এবং আপনি ruby-align CSS প্রপার্টি দিয়ে রুবি টেক্সট স্টাইল করতে পারেন।

Line-breakable <ruby> এবং CSS ruby-align প্রপার্টিতে আরও জানুন।

Browser Support

  • ক্রোম: 128।
  • প্রান্ত: 128।
  • ফায়ারফক্স: 38.
  • সাফারি: 18.2।

Source

মাল্টি-পেন ইনকিংয়ের জন্য PointerEvent.deviceProperties

এই পরিবর্তন, Chrome 128-এ শিপিং, ডিজিটাইজারের সাথে ইন্টারঅ্যাক্ট করা প্রতিটি ডিভাইসের জন্য নির্দিষ্ট রঙ বা পেনের আকার সেট করতে স্ক্রিনের সাথে ইন্টারঅ্যাক্ট করা পৃথক কলম (পয়েন্টার) সনাক্ত করার একটি নিরাপদ এবং নির্ভরযোগ্য উপায় প্রদান করে। এটি একটি নতুন বৈশিষ্ট্য, deviceProperties অন্তর্ভুক্ত করতে PointerEvent ইন্টারফেসকে প্রসারিত করে। এতে uniqueId বৈশিষ্ট্য রয়েছে, যা একটি সেশন-স্থির, নথি বিচ্ছিন্ন, অনন্য শনাক্তকারীকে উপস্থাপন করে যা আপনি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করা পৃথক কলম সনাক্ত করতে নির্ভরযোগ্যভাবে ব্যবহার করতে পারেন।

Promise.try

এছাড়াও Chrome 128-এ, Promise.try প্রতিশ্রুতি দিয়ে ত্রুটিগুলি পরিচালনা করা সহজ করে তোলে। একটি প্যাটার্ন যেখানে আপনি একটি ফাংশন আছে, f . এই ফাংশনটি অ্যাসিঙ্ক হতে পারে এবং একটি প্রতিশ্রুতি প্রদান করতে পারে, বা এটি নাও হতে পারে। উভয় ক্ষেত্রেই ত্রুটিগুলি পরিচালনা করতে প্রতিশ্রুতি শব্দার্থবিদ্যা ব্যবহার করতে, আপনি একটি প্রতিশ্রুতিতে ফাংশনটি মোড়ানো। এটি সাধারণত new Promise(resolve => resolve(f())) দিয়ে অর্জন করা হয়।

Promise.try হল এটি সম্পন্ন করার একটি আরও সহজ উপায়। এটি আপনাকে একটি প্রতিশ্রুতি চেইন শুরু করতে দেয় যা সিঙ্ক্রোনাস এবং অ্যাসিঙ্ক্রোনাস ব্যতিক্রম প্রবাহ উভয়ই পরিচালনা করার পরিবর্তে .catch হ্যান্ডলারে সমস্ত ত্রুটি ধরা দেয়।

Browser Support

  • ক্রোম: 128।
  • প্রান্ত: 128।
  • ফায়ারফক্স: 134।
  • সাফারি: 18.2।

Source

অ্যানিমেট এন্ট্রি প্রভাব

Firefox 129-এ দুটি CSS বৈশিষ্ট্য রয়েছে যা এন্ট্রি ইফেক্ট অ্যানিমেটিং করার জন্য ব্যবহৃত হয় এবং এই বৈশিষ্ট্যগুলি এখন নতুনভাবে উপলব্ধ বেসলাইন।

@starting-style নিয়মটি পৃষ্ঠায় রেন্ডার হওয়ার আগে একটি উপাদানের প্রাথমিক শৈলীগুলিকে সংজ্ঞায়িত করে। ডিসপ্লে থেকে অ্যানিমেট করা উপাদানগুলির জন্য এটি প্রয়োজনীয়: কোনোটিই নয়, কারণ তাদের এমন একটি অবস্থার প্রয়োজন যা থেকে অ্যানিমেট করা যায়৷

Browser Support

  • ক্রোম: 117।
  • প্রান্ত: 117।
  • ফায়ারফক্স: 129।
  • সাফারি: 17.5।

Source

এন্ট্রি ইফেক্টের জন্য আলাদা বৈশিষ্ট্যের অ্যানিমেশনও প্রয়োজন, যেগুলি মানগুলির মধ্যে প্রসারিত করতে পারে না। এটি এখন transition-behavior: allow-discrete বা আপনার ট্রানজিশন শর্টহ্যান্ডে allow-discrete মান। এটি এখন Firefox 129-এও সমর্থিত।

Browser Support

  • ক্রোম: 117।
  • প্রান্ত: 117।
  • ফায়ারফক্স: 129।
  • সাফারি: 17.4.

Source

নাও ইন বেসলাইনে আরও জানুন: অ্যানিমেটিং এন্ট্রি প্রভাব

PerformanceResourceTiming -এ সংযোজন

ফায়ারফক্স 129 PerformanceResourceTiming ইন্টারফেসের contentType এবং responseStatus বৈশিষ্ট্য যোগ করে। এগুলো যথাক্রমে রিসোর্স আনার সময় ফিরে আসা রিসোর্সের বিষয়বস্তুর ধরন এবং HTTP প্রতিক্রিয়া স্ট্যাটাস কোড নির্দেশ করে।

contentType

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • প্রান্ত: সমর্থিত নয়।
  • ফায়ারফক্স: 129।
  • সাফারি: সমর্থিত নয়।

Source

responseStatus

Browser Support

  • ক্রোম: 109।
  • প্রান্ত: 109।
  • ফায়ারফক্স: 129।
  • সাফারি: সমর্থিত নয়।

Source

toJSON() পদ্ধতিতে ভূ-অবস্থান

এছাড়াও Firefox 129-এ রয়েছে GeolocationCoordinates.toJSON() এবং GeolocationPosition.toJSON()

Browser Support

  • ক্রোম: 126।
  • প্রান্ত: 126।
  • ফায়ারফক্স: 129।
  • সাফারি: 18।

Source

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 সেকেন্ড" যা একাধিক লোকেল সমর্থন করে৷