Chrome 129-এ নতুন

পিট লেপেজ

আপনার যা জানা দরকার তা এখানে:

আমি পিট লেপেজ। চলুন ডুব দিয়ে দেখি Chrome 129-এ ডেভেলপারদের জন্য নতুন কী আছে।

scheduler.yield() দিয়ে দীর্ঘ টাস্ক ব্রেক আপ করুন

দীর্ঘ কাজগুলি ব্যবহারকারীর ইনপুটে প্রতিক্রিয়া জানাতে ব্রাউজারের ক্ষমতাকে বিলম্বিত করে, একটি ধারণা তৈরি করে যে একটি সাইট ধীরগতির, এবং INP-এর মতো সমালোচনামূলক কর্মক্ষমতা মেট্রিক্সকে প্রভাবিত করে৷ scheduler.yield() এর সাহায্যে, আপনি দীর্ঘ কাজগুলিকে ছোট ছোট অংশে বিভক্ত করতে পারেন, স্পষ্টভাবে মূল থ্রেডে ফিরে এসে প্রতিক্রিয়াশীলতা উন্নত করতে পারেন।

এটি আপনাকে ব্রাউজারকে বলতে দেয়:

"আরে! আমি যে কাজটি করতে যাচ্ছি তা একটু সময় নিতে পারে, যদি আপনার একটি ফ্রেম আঁকতে, ব্যবহারকারীর ইনপুটে প্রতিক্রিয়া জানাতে বা অন্যান্য গুরুত্বপূর্ণ কাজগুলির প্রয়োজন হয়, তাহলে ঠিক আছে, আমি অপেক্ষা করতে পারি"

কিভাবে একটি টাস্ক ব্রেক আপ একটি ব্যবহারকারীর মিথস্ক্রিয়া সহজতর করতে পারে একটি চিত্রণ. শীর্ষে, একটি দীর্ঘ টাস্ক একটি ইভেন্ট হ্যান্ডলারকে কাজটি শেষ না হওয়া পর্যন্ত চালানো থেকে ব্লক করে। নীচে, খণ্ডিত টাস্ক ইভেন্ট হ্যান্ডলারকে এটির চেয়ে তাড়াতাড়ি চালানোর অনুমতি দেয় অন্যথায়।

ব্রাউজারকে শ্বাস নেওয়ার জায়গা দিতে এবং INP সমস্যাগুলি এড়াতে আপনার জাভাস্ক্রিপ্ট কোডে ঘন ঘন নিম্নলিখিত লাইনটি যোগ করুন।

await scheduler.yield();

গুরুত্বপূর্ণভাবে, এটি আপনার কোডের ধারাবাহিকতাকে অগ্রাধিকার দেওয়ার অনুমতি দেয় যাতে আপনি ফলন দিয়ে হারাবেন না। আমরা যেকোন বৃহত্তর কাজের মধ্যে ফাংশনগুলিতে scheduler.yield() এর উদার ব্যবহার করার পরামর্শ দিই।

আরো বিস্তারিত জানার জন্য দীর্ঘ টাস্ক অপটিমাইজ দেখুন.

অন্তর্নিহিত আকার সহ অ্যানিমেশন

CSS অ্যানিমেশনগুলি বেশ মিষ্টি, কিন্তু তাদের সাধারণত স্পষ্ট আকারের প্রয়োজন হয়, আপনি auto , min-content , বা fit-content মতো অন্তর্নিহিত আকারের কীওয়ার্ডগুলি ব্যবহার করতে পারবেন না ৷

CSS প্রপার্টি interpolate-size অ্যানিমেশনের একটি নতুন সেট উন্মুক্ত করে যা অন্তর্নিহিত সাইজিং কীওয়ার্ড ব্যবহার করার সময় সম্ভব ছিল না।

interpolate-size ছাড়া, নিম্নলিখিত ভিডিওর বোতামগুলির কোন রূপান্তর নেই৷

interpolate-size: allow-keywords যোগ করার পরে, ভিডিওর বোতামগুলি একটি সুন্দর ট্রানজিশন অ্যানিমেশন প্রভাব পায়৷

ইন্টারপোলেট-সাইজ নির্দিষ্ট করা: root এলিমেন্টের interpolate-size: allow-keywords পুরো পৃষ্ঠার জন্য নতুন আচরণ সেট করে। যখনই সামঞ্জস্যতা কোন সমস্যা না হয় তখনই আমরা এটি করার পরামর্শ দিই।

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

সূক্ষ্ম নিয়ন্ত্রণের জন্য, CSS calc-size() ফাংশন, calc() এর অনুরূপ, সমর্থিত অন্তর্নিহিত সাইজিং কীওয়ার্ডগুলির ঠিক একটিতেও ক্রিয়াকলাপ সমর্থন করে। লেআউট গণনা সম্পাদন করার সময়, size কীওয়ার্ডটি calc-size-basis আসল আকারে মূল্যায়ন করে।

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

অ্যানিমেট থেকে উচ্চতা দেখুন: স্বয়ংক্রিয়; (এবং অন্যান্য অন্তর্নিহিত সাইজিং কীওয়ার্ড) সম্পূর্ণ বিবরণের জন্য CSS-এ ।

CSS অ্যাঙ্কর পজিশনিং পরিবর্তন

CSS অ্যাঙ্কর পজিশনিং Chrome 125-এ অবতরণ করেছে, কিন্তু CSS ওয়ার্কিং গ্রুপের মধ্যে কিছু অতিরিক্ত আলোচনার পরে, বিশেষত্ব এবং বাস্তবায়নে কিছু পরিবর্তন রয়েছে। আপনি যদি ইতিমধ্যেই CSS অ্যাঙ্কর পজিশন ব্যবহার করে থাকেন, তাহলে আপনাকে যত তাড়াতাড়ি সম্ভব আপনার কোড আপডেট করতে হবে।

প্রথমত, inset-area নাম পরিবর্তন করে position-area রাখা হয়েছে। এটি পছন্দ করা হয়েছে কারণ বাক্যাংশের position- আপনাকে মনে রাখতে সাহায্য করে যে এই বৈশিষ্ট্যটি অবস্থানকৃত উপাদানে প্রয়োগ করা হয়েছে, অ্যাঙ্কর উপাদান নয়।

দ্বিতীয়ত, position-try-options নাম পরিবর্তন করে position-try-fallbacks । এটি আপনাকে মনে রাখতে সাহায্য করে যে এগুলি প্রাথমিক অবস্থানে শুধুমাত্র ফলব্যাক, যা ভিত্তি শৈলী দ্বারা নির্ধারিত হয়।

অবশেষে, inset-area() ফাংশনাল সিনট্যাক্স position-try থেকে সরানো হচ্ছে। তাই position-try-fallbacks: top এর পরিবর্তে position-try-fallbacks: inset-area(top) ।

এবং আরো!

অবশ্যই আরো অনেক আছে.

একাধিক লোকেলের জন্য সমর্থন সহ, সময়কাল বিন্যাস করার জন্য একটি নতুন Intl পদ্ধতি রয়েছে।

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

ওয়েব GPU ক্যানভাস এখন HDR ছবির জন্য ডিসপ্লের সম্পূর্ণ পরিসর ব্যবহার করতে পারে।

এবং কিছু অবচয় এবং অপসারণ রয়েছে যা কিছু বিকাশকারীদের প্রভাবিত করতে পারে৷

সম্পূর্ণ রিলিজ নোট পড়ুন .

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 129-এ অতিরিক্ত পরিবর্তনের জন্য নিম্নলিখিত লিঙ্কগুলি দেখুন।

সদস্যতা

আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

অ্যাড্রিয়ানার জন্য পূরণ করছি, আমি পিট লেপেজ, এবং Chrome 130 রিলিজ হওয়ার সাথে সাথে, আমরা আপনাকে Chrome-এ নতুন কী আছে তা জানাতে এখানে থাকব!