Chrome 123-এ নতুন

আদ্রিয়ানা জারা

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

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

light-dark() CSS ফাংশন।

CSS-এ light-dark() ফাংশন আপনাকে এমন রঙ তৈরি করতে দেয় যা হালকা বা অন্ধকার মোডের জন্য ব্যবহারকারীর পছন্দের সাথে খাপ খায় । একটি একক CSS বৈশিষ্ট্যের মধ্যে দুটি ভিন্ন রঙের মান নির্দিষ্ট করতে light-dark() ফাংশন ব্যবহার করুন।

ব্রাউজার স্বয়ংক্রিয়ভাবে উপাদানের গণনা করা color-scheme মানের উপর ভিত্তি করে উপযুক্ত রঙ বেছে নেবে। উদাহরণস্বরূপ, নিম্নলিখিত CSS সহ:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • ব্যবহারকারী একটি হালকা থিম নির্বাচন করলে, উপাদানটির একটি লাইম ব্যাকগ্রাউন্ড থাকবে।
  • ব্যবহারকারী একটি অন্ধকার থিম নির্বাচন করলে, উপাদানটির একটি সবুজ পটভূমি থাকবে।

দীর্ঘ অ্যানিমেশন ফ্রেম API.

লং অ্যানিমেশন ফ্রেম এপিআই আপনাকে প্রধান-থ্রেড কনজেশনের কারণগুলি খুঁজে পেতে সহায়তা করার জন্য উপলব্ধ যা প্রায়শই খারাপ INP ( ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট )-এর কারণ হয় - একটি কোর ওয়েব অত্যাবশ্যক যা একটি ওয়েবসাইটের প্রতিক্রিয়া পরিমাপ করে৷

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

এই তথ্য সংগ্রহ করা এবং বিশ্লেষণ করা আপনাকে কর্মক্ষমতা বাধাগুলি সনাক্ত করতে এবং সমস্যা সমাধান করতে দেয়। আপনি নিম্নলিখিত কোড দিয়ে দীর্ঘ ফ্রেম ক্যাপচার করতে পারেন।

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

পরিষেবা কর্মী স্ট্যাটিক রাউটিং API।

পরিষেবা কর্মীদের ব্যবহার করে আপনি ওয়েবসাইটগুলিকে অফলাইনে কাজ করতে পারেন এবং ক্যাশিং কৌশলগুলি তৈরি করতে পারেন যা কর্মক্ষমতা বৃদ্ধি করতে পারে৷

যাইহোক, একটি কার্যক্ষমতা খরচ হতে পারে যখন একটি পৃষ্ঠা কিছু সময়ের মধ্যে প্রথমবার লোড করা হয় এবং নিয়ন্ত্রণকারী পরিষেবা কর্মী সেই মুহূর্তে চলছে না। যেহেতু সমস্ত আনয়ন পরিষেবা কর্মীর মাধ্যমে ঘটতে হবে, ব্রাউজারটিকে পরিষেবা কর্মী শুরু হওয়ার জন্য অপেক্ষা করতে হবে এবং কোন সামগ্রী লোড করতে হবে তা জানতে হবে৷

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

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

এবং আরো!

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

  • ব্যবহারকারী NavigationActivation ইন্টারফেসের মাধ্যমে কোথা থেকে নেভিগেট করেছেন তার উপর ভিত্তি করে আপনি কাস্টমাইজড পেজ অফার করতে পারেন।

  • Chrome এখন Zstandard ( zstd ) এর জন্য সমর্থন করে। এই Content-Encoding পৃষ্ঠাগুলিকে দ্রুত লোড করতে এবং কম ব্যান্ডউইথ ব্যবহার করতে এবং কম সময়, CPU এবং সার্ভারে কম্প্রেশনে শক্তি ব্যয় করতে সাহায্য করে, যার ফলে সার্ভারের খরচ কমে যায়।

  • bfcache-এর জন্য notRestoredReasons API Chrome 123 থেকে চালু হচ্ছে৷ এটি সাইটের মালিকদের কেন bfcache ব্যবহার করা যাচ্ছে না তার কারণগুলি সংগ্রহ করতে দেয়৷ সাইট মালিকরা bfcache এর ব্যবহার উন্নত করতে এটি ব্যবহার করতে পারেন যা দ্রুত ইতিহাস নেভিগেশনের অনুমতি দেয়।

  • display-mode জন্য picture-in-picture মান আপনাকে নির্দিষ্ট CSS নিয়ম লিখতে দেয় যা শুধুমাত্র তখনই প্রযোজ্য হয় যখন ওয়েব অ্যাপ পিকচার-ইন-পিকচার মোডে দেখানো হয়। যেমন: 

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

আরও পড়া

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

সদস্যতা

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

Yo soy Adriana Jara, এবং Chrome 124 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমি এখানেই থাকব!

,

আদ্রিয়ানা জারা

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

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

light-dark() CSS ফাংশন।

CSS-এ light-dark() ফাংশন আপনাকে এমন রঙ তৈরি করতে দেয় যা হালকা বা অন্ধকার মোডের জন্য ব্যবহারকারীর পছন্দের সাথে খাপ খায় । একটি একক CSS বৈশিষ্ট্যের মধ্যে দুটি ভিন্ন রঙের মান নির্দিষ্ট করতে light-dark() ফাংশন ব্যবহার করুন।

ব্রাউজার স্বয়ংক্রিয়ভাবে উপাদানের গণনা করা color-scheme মানের উপর ভিত্তি করে উপযুক্ত রঙ বেছে নেবে। উদাহরণস্বরূপ, নিম্নলিখিত CSS সহ:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • ব্যবহারকারী একটি হালকা থিম নির্বাচন করলে, উপাদানটির একটি লাইম ব্যাকগ্রাউন্ড থাকবে।
  • ব্যবহারকারী একটি অন্ধকার থিম নির্বাচন করলে, উপাদানটির একটি সবুজ পটভূমি থাকবে।

দীর্ঘ অ্যানিমেশন ফ্রেম API.

লং অ্যানিমেশন ফ্রেম এপিআই আপনাকে প্রধান-থ্রেড কনজেশনের কারণগুলি খুঁজে পেতে সহায়তা করার জন্য উপলব্ধ যা প্রায়শই খারাপ INP ( ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট )-এর কারণ হয় - একটি কোর ওয়েব অত্যাবশ্যক যা একটি ওয়েবসাইটের প্রতিক্রিয়া পরিমাপ করে৷

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

এই তথ্য সংগ্রহ করা এবং বিশ্লেষণ করা আপনাকে কর্মক্ষমতা বাধাগুলি সনাক্ত করতে এবং সমস্যা সমাধান করতে দেয়। আপনি নিম্নলিখিত কোড দিয়ে দীর্ঘ ফ্রেম ক্যাপচার করতে পারেন।

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

পরিষেবা কর্মী স্ট্যাটিক রাউটিং API।

পরিষেবা কর্মীদের ব্যবহার করে আপনি ওয়েবসাইটগুলিকে অফলাইনে কাজ করতে পারেন এবং ক্যাশিং কৌশলগুলি তৈরি করতে পারেন যা কর্মক্ষমতা বৃদ্ধি করতে পারে৷

যাইহোক, একটি কার্যক্ষমতা খরচ হতে পারে যখন একটি পৃষ্ঠা কিছু সময়ের মধ্যে প্রথমবার লোড করা হয় এবং নিয়ন্ত্রণকারী পরিষেবা কর্মী সেই মুহূর্তে চলছে না। যেহেতু সমস্ত আনয়ন পরিষেবা কর্মীর মাধ্যমে ঘটতে হবে, ব্রাউজারটিকে পরিষেবা কর্মী শুরু হওয়ার জন্য অপেক্ষা করতে হবে এবং কোন সামগ্রী লোড করতে হবে তা জানতে হবে৷

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

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

এবং আরো!

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

  • ব্যবহারকারী NavigationActivation ইন্টারফেসের মাধ্যমে কোথা থেকে নেভিগেট করেছেন তার উপর ভিত্তি করে আপনি কাস্টমাইজড পেজ অফার করতে পারেন।

  • Chrome এখন Zstandard ( zstd ) এর জন্য সমর্থন করে। এই Content-Encoding পৃষ্ঠাগুলিকে দ্রুত লোড করতে এবং কম ব্যান্ডউইথ ব্যবহার করতে এবং কম সময়, CPU এবং সার্ভারে কম্প্রেশনে শক্তি ব্যয় করতে সাহায্য করে, যার ফলে সার্ভারের খরচ কমে যায়।

  • bfcache-এর জন্য notRestoredReasons API Chrome 123 থেকে চালু হচ্ছে৷ এটি সাইটের মালিকদের কেন bfcache ব্যবহার করা যাচ্ছে না তার কারণগুলি সংগ্রহ করতে দেয়৷ সাইট মালিকরা bfcache এর ব্যবহার উন্নত করতে এটি ব্যবহার করতে পারেন যা দ্রুত ইতিহাস নেভিগেশনের অনুমতি দেয়।

  • display-mode জন্য picture-in-picture মান আপনাকে নির্দিষ্ট CSS নিয়ম লিখতে দেয় যা শুধুমাত্র তখনই প্রযোজ্য হয় যখন ওয়েব অ্যাপ পিকচার-ইন-পিকচার মোডে দেখানো হয়। যেমন: 

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

আরও পড়া

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

সদস্যতা

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

Yo soy Adriana Jara, এবং Chrome 124 রিলিজ হওয়ার সাথে সাথে, Chrome-এ নতুন কী আছে তা জানাতে আমি এখানেই থাকব!