অক্টোবরে ওয়েব প্ল্যাটফর্মে নতুন

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

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

স্থিতিশীল ব্রাউজার রিলিজ

অক্টোবরে, Firefox 106 , Chrome 107 , এবং Safari 16.1 স্থিতিশীল হয়ে ওঠে। ওয়েব প্ল্যাটফর্মের জন্য এর অর্থ কী তা একবার দেখে নেওয়া যাক।

গ্রিড ট্র্যাকগুলির অ্যানিমেশন

Microsoft-এ আমাদের অবদানকারীদের কাজের জন্য ধন্যবাদ, Chrome এখন grid-template-columns এবং grid-template-rows মানগুলিকে ইন্টারপোলেট করতে সক্ষম। এর মানে হল যে গ্রিড লেআউটগুলি অ্যানিমেশন বা ট্রানজিশনের হাফওয়ে পয়েন্টে স্ন্যাপ করার পরিবর্তে রাজ্যগুলির মধ্যে মসৃণভাবে স্থানান্তর করতে পারে।

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

ব্রাউজার সমর্থন

  • 107
  • 107
  • 66
  • 16

getDisplayMedia() এ সংযোজন

এছাড়াও Chrome-এ getDisplayMedia() এর কিছু সংযোজন রয়েছে যার লক্ষ্য স্ক্রিন শেয়ার করার সময় দুর্ঘটনাজনিত ওভারশেয়ারিং প্রতিরোধ করা।

  • displaySurface বিকল্পটি নির্দেশ করতে পারে যে ওয়েব অ্যাপ একটি নির্দিষ্ট ডিসপ্লে সারফেস টাইপ (ট্যাব, উইন্ডোজ বা স্ক্রিন) অফার করতে পছন্দ করে।
  • surfaceSwitching বিকল্পটি নির্দেশ করে যে Chrome ব্যবহারকারীকে গতিশীলভাবে ভাগ করা ট্যাবগুলির মধ্যে স্যুইচ করার অনুমতি দেবে কিনা।
  • ব্যবহারকারীকে বর্তমান ট্যাব শেয়ার করা থেকে বিরত রাখতে selfBrowserSurface বিকল্পটি ব্যবহার করা যেতে পারে। এটি "হল অফ মিরর" প্রভাব এড়ায়।
  • systemAudio বিকল্পটি নিশ্চিত করে যে Chrome শুধুমাত্র ব্যবহারকারীকে প্রাসঙ্গিক অডিও-ক্যাপচার অফার করে।

Safari 16.1-এ getDisplayMedia এর জন্য সমর্থনও রয়েছে, একটি নির্দিষ্ট Safari উইন্ডো ক্যাপচার করার জন্য সমর্থন যোগ করা হয়েছে।

CSS থেকে ফন্ট প্রযুক্তি এবং বৈশিষ্ট্যগুলির সমর্থনের জন্য পরীক্ষা করা হচ্ছে

Firefox font-tech() এবং font-format() ফাংশনগুলিকে @supports সাথে বৈশিষ্ট্যযুক্ত প্রশ্নগুলির জন্য যুক্ত করেছে। COLRv1 ফন্টগুলির সমর্থনের জন্য নিম্নলিখিত উদাহরণগুলি পরীক্ষা করে।

@supports font-tech(color-COLRv1) {

}

আপনি MDN এ আরও উদাহরণ পেতে পারেন।

পাঠ্য খণ্ডে স্ক্রোল করুন

Safari 16.1-এ স্ক্রোল টু টেক্সট ফ্র্যাগমেন্টের জন্য সমর্থন রয়েছে যা নির্দিষ্ট টেক্সট ফ্র্যাগমেন্টের সাথে একটি URL-এ নেভিগেট করার জন্য সমর্থন যোগ করে।

AVIF সমর্থন

Safari 16-এ স্থির AVIF ইমেজগুলির জন্য সমর্থন অন্তর্ভুক্ত করা হয়েছে, Safari 16.1-এ macOS Ventura, iOS 16, এবং iPadOS 16-এ অ্যানিমেটেড AVIF চিত্রগুলির জন্য সমর্থন অন্তর্ভুক্ত রয়েছে।

সাফারির জন্য ওয়েব পুশ

Safari 16.1 macOS Ventura-এ Safari-এ ওয়েব পুশ সমর্থন নিয়ে আসে। এটি পুশ এপিআই এবং নোটিফিকেশন এপিআই ব্যবহার করে, আপনি মেট ওয়েব পুশ নিবন্ধে এটি সম্পর্কে আরও পড়তে পারেন। সাফারিতে ওয়েব পুশ অবতরণ মানে এটি এখন তিনটি প্রধান ইঞ্জিন জুড়ে উপলব্ধ।

বিটা ব্রাউজার রিলিজ

বিটা ব্রাউজার সংস্করণগুলি আপনাকে সেই জিনিসগুলির একটি পূর্বরূপ দেয় যা ব্রাউজারের পরবর্তী স্থিতিশীল সংস্করণে থাকবে৷ নতুন বৈশিষ্ট্যগুলি পরীক্ষা করার জন্য এটি একটি দুর্দান্ত সময়, বা অপসারণ, যা বিশ্ব এই প্রকাশ পাওয়ার আগে আপনার সাইটকে প্রভাবিত করতে পারে৷ এই মাসে নতুন বিটাগুলি হল Chrome 108 , Firefox 107 , এবং Safari 16.2 ৷

ক্রোম 108-এ CSS ফ্র্যাগমেন্টেশন বৈশিষ্ট্যগুলির avoid মানগুলির জন্য সমর্থন অন্তর্ভুক্ত রয়েছে break-before , break-after এবং প্রিন্ট করার সময় break-inside । এই মানটি ব্রাউজারকে বলে যে উপাদানটি প্রয়োগ করার আগে, পরে বা ভিতরে ভাঙা এড়াতে। উদাহরণস্বরূপ, নিম্নলিখিত CSS একটি পৃষ্ঠা বিরতিতে একটি চিত্র ভাঙ্গা এড়ায়।

figure {
    break-inside: avoid;
}

Chrome 108 প্রতিস্থাপিত উপাদানগুলিতে ওভারফ্লো যেভাবে আচরণ করে তাতে পরিবর্তন আনা শুরু করে, যা কিছু পরিস্থিতিতে দৃশ্যমান পরিবর্তন ঘটাতে পারে। আরও বিশদ বিবরণের জন্য এবং আপনি যে কোনও সমস্যার সমাধান করবেন তা দেখতে CSS-এ প্রতিস্থাপিত উপাদানগুলিতে ওভারফ্লো করার জন্য নিবন্ধটি পড়ুন।

যখন অন-স্ক্রীন কীবোর্ড দেখানো হয় তখন Android-এ Chrome-এ লেআউট ভিউপোর্ট কীভাবে আচরণ করে তাতে একটি পরিবর্তন রয়েছে। ভিউপোর্ট রিসাইজ আচরণ পরিবর্তনের জন্য প্রস্তুত পড়ুন Android-এ Chrome-এ আসছে আরও জানতে এবং আগামী মাসে এই শিপিংয়ের জন্য কীভাবে প্রস্তুত করা যায় তা খুঁজে বের করুন।

এছাড়াও Chrome-এ নতুন CSS ভিউপোর্ট ইউনিট রয়েছে। এর মধ্যে রয়েছে ছোট ( svw , svh , svi , svb , svmin , svmax ), বড় ( lvw , lvh , lvi , lvb , lvmin , lvmax ), গতিশীল ( dvw , dvh , dvi , dvb , min , dvmin , dvmax , logical) vi , vb ) একক। এই ইউনিটগুলি ইতিমধ্যে ফায়ারফক্স এবং সাফারিতে প্রয়োগ করা হয়েছে।

Firefox 107 COLRv1 ফন্ট সমর্থন সক্ষম করে, এই ফন্ট প্রযুক্তিকে সমর্থন করার জন্য Chrome-এর সাথে যোগ দেয়। এছাড়াও ফন্টগুলিতে, Chrome 108 font-tech() এবং font-format() ফাংশনগুলির জন্য @supports সাথে বৈশিষ্ট্যযুক্ত প্রশ্নগুলির জন্য সমর্থন যোগ করে।

ফায়ারফক্স এই বৈশিষ্ট্যের জন্য সমর্থন সহ দুটি ব্রাউজার তৈরি করতে ক্রোমে যোগদান করে, contain-intrinsic-size সমর্থন যোগ করে।

Safari 16.2 বিটা সাইজিং এবং স্ক্রোল স্ন্যাপ সহ একগুচ্ছ CSS ফিক্স অন্তর্ভুক্ত করে।

ওয়েব সিরিজের নতুন অংশ