Chrome 85-এ নতুন

পিট লেপেজ

Chrome 85 এখন স্থিতিশীল হতে শুরু করছে।

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

আমি পিট লেপেজ , বাড়ি থেকে কাজ করছি এবং শুটিং করছি, চলুন ডুব দিয়ে দেখি Chrome 85-এ ডেভেলপারদের জন্য নতুন কী!

বিষয়বস্তুর দৃশ্যমানতা

ব্রাউজার রেন্ডারিং প্রক্রিয়া

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

content-visibility: auto , ব্রাউজারকে বলে যে এটি সেই উপাদানটির জন্য রেন্ডারিং কাজটি এড়িয়ে যেতে পারে যতক্ষণ না এটি ভিউপোর্টে স্ক্রোল করে, একটি দ্রুত প্রাথমিক রেন্ডার প্রদান করে।


.my-class {
  content-visibility: auto;
}

content-visibility থেকে সর্বাধিক প্রভাব পেতে, এটিকে আরও জটিল লেআউট অ্যালগরিদম সহ অভিভাবক বিভাগে প্রয়োগ করুন, যেমন flexbox , এবং grid , অথবা যেগুলির নিজস্ব লেআউট রয়েছে এমন শিশুদের রয়েছে৷

বিষয়বস্তু খণ্ড করে এবং content-visibility: auto; , এই পৃষ্ঠাটি 232ms এর রেন্ডারিং সময় থেকে মাত্র 30ms হয়েছে৷

আপনার রেন্ডারিং কর্মক্ষমতা উন্নত করতে আপনি কীভাবে এটি ব্যবহার করতে পারেন তা দেখতে সামগ্রীর দৃশ্যমানতা পরীক্ষা করে দেখুন৷

@property এবং CSS ভেরিয়েবল

CSS ভেরিয়েবল, যাকে প্রযুক্তিগতভাবে কাস্টম বৈশিষ্ট্য বলা হয়, অসাধারণ। Houdini CSS বৈশিষ্ট্য এবং মান API এর সাথে, আপনি আপনার কাস্টম বৈশিষ্ট্যগুলির জন্য একটি প্রকার এবং ডিফল্ট ফলব্যাক মান নির্ধারণ করতে পারেন। আমি পূর্বে সেগুলিকে Chrome 78-এ New এ কভার করেছি, যখন আমরা জাভাস্ক্রিপ্টে তাদের সংজ্ঞায়িত করার জন্য সমর্থন যোগ করেছি।

Chrome 85 থেকে শুরু করে, আপনি সরাসরি আপনার CSS-এ CSS বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত এবং সেট করতে পারেন। আমি CSS প্রোপার্টি সম্পর্কে যা পছন্দ করি - তা হল এটি সম্পত্তির শব্দার্থিক অর্থ, ফলব্যাক মান এবং এমনকি CSS পরীক্ষা সক্ষম করে।

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

উনার একটি দুর্দান্ত পোস্ট রয়েছে @property : CSS ভেরিয়েবলকে সুপার পাওয়ার দেওয়া যা আপনাকে দেখায় কিভাবে আপনি সেগুলি ব্যবহার করতে পারেন।

সম্পর্কিত অ্যাপ ইনস্টল করুন

getInstalledRelatedApps() API আপনার অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করা সম্ভব করে তোলে, তারপরে, ব্যবহারকারীর অভিজ্ঞতা কাস্টমাইজ করুন।

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

যখন এটি প্রথমবার Chrome 80 এ পাঠানো হয়, তখন এটি শুধুমাত্র Android অ্যাপের জন্য কাজ করে। এখন, অ্যান্ড্রয়েডে, এটি আপনার PWA ইনস্টল করা আছে কিনা তাও পরীক্ষা করতে পারে। এবং উইন্ডোজে, এটি আপনার উইন্ডোজ UWP অ্যাপ ইনস্টল করা আছে কিনা তা পরীক্ষা করতে পারে।

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

আমার নিবন্ধ দেখুন আপনার অ্যাপ ইনস্টল করা হয়? getInstalledRelatedApps() আপনাকে বলবে! web.dev-এ দেখুন এটি কীভাবে কাজ করে এবং কীভাবে আপনার অ্যাপগুলিকে আপনার বলে প্রমাণ করতে সাইন ইন করবেন।

অ্যাপ আইকন শর্টকাট

উইন্ডোজে অ্যাপ আইকন শর্টকাট

Chrome 84-এ, আমরা অ্যাপ আইকন শর্টকাটের জন্য সমর্থন যোগ করেছি। আমি ঘটনাক্রমে বলেছিলাম যে তারা সর্বত্র উপলব্ধ, কিন্তু তারা শুধুমাত্র Android এ উপলব্ধ ছিল। এখন, Chrome 85-এ, এগুলি Android এবং Windows এবং Chrome এবং Edge উভয় ক্ষেত্রেই উপলব্ধ৷


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

সম্পূর্ণ বিশদ বিবরণের জন্য web.dev-এ অ্যাপ আইকন শর্টকাট নিবন্ধটি দেখুন এবং আমি যে বিভ্রান্তির কারণ হয়েছি তার জন্য আমি দুঃখিত।

অরিজিন ট্রায়াল: fetch() সহ স্ট্রিমিং অনুরোধ

Chrome 85 থেকে শুরু করে, একটি অরিজিন ট্রায়াল হিসেবে fetch আপলোড স্ট্রিমিং উপলব্ধ। অনুরোধের অংশ প্রস্তুত হওয়ার আগে এটি আপনাকে একটি আনা শুরু করতে দেয়। পূর্বে, আপনি শুধুমাত্র একটি অনুরোধ শুরু করতে পারতেন একবার আপনার পুরো শরীরটি যাওয়ার জন্য প্রস্তুত। কিন্তু এখন, আপনি কন্টেন্ট পাঠানো শুরু করতে পারেন, এমনকি আপনি যখন এটি তৈরি করছেন তখনও।

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

উদাহরণস্বরূপ, সার্ভার গরম করতে এটি ব্যবহার করুন বা মাইক্রোফোন বা ক্যামেরা থেকে ধারণ করা অডিও বা ভিডিও স্ট্রিম করুন৷

web.dev-এ ফেচ এপিআই সহ স্ট্রিমিং অনুরোধগুলিতে জেকের একটি গভীরতা রয়েছে এবং এটি সর্বশেষ HTTP203-তে ভিডিও আনার সাথে স্ট্রিমিং অনুরোধগুলিও কভার করেছে৷

এবং আরো

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

Promise.any একটি প্রতিশ্রুতি ফেরত দেয় যা পূর্ণ বা প্রত্যাখ্যান করার প্রথম প্রদত্ত প্রতিশ্রুতি দ্বারা পরিপূর্ণ হয়।

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll() দিয়ে একটি স্ট্রিং-এ সমস্ত দৃষ্টান্ত প্রতিস্থাপন করা সহজ, আর রেগুলার এক্সপ্রেশন নয়!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 AVIF- এর জন্য ডিকোড সমর্থন যোগ করে, একটি ইমেজ ফরম্যাট যা AV1-এর সাথে এনকোড করা হয়েছে এবং অ্যালায়েন্স ফর ওপেন মিডিয়া দ্বারা প্রমিত। AVIF JPEG এবং WebP বনাম উল্লেখযোগ্য কম্প্রেশন লাভ অফার করে, একটি সাম্প্রতিক Netflix সমীক্ষার সাথে 4:4:4 বিষয়বস্তুতে 50% সঞ্চয় বনাম স্ট্যান্ডার্ড JPEG এবং > 60% সঞ্চয় দেখায়।

এবং AppCache অপসারণ শুরু হয়েছে ।

আরও পড়া

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

সাবস্ক্রাইব

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

আমি পিট লেপেজ, এবং অবশেষে আমি একটি চুল কাটা পেয়েছি !

Chrome 86 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব -- Chrome এ নতুন কি!