Chrome 93 এ নতুন

পিট লেপেজ

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

আমি Pete LePage , কাজ করছি, এবং বাড়ি থেকে শুটিং করছি, আসুন আমরা ডুব দিয়ে দেখি এবং Chrome 93-এ ​​ডেভেলপারদের জন্য নতুন কী আছে।

CSS মডিউল স্ক্রিপ্ট

আপনি এখন জাভাস্ক্রিপ্ট মডিউলের মতো import বিবৃতি সহ CSS স্টাইল শীট লোড করতে পারেন। স্টাইল শীটগুলি তারপরে নথিতে বা শ্যাডো রুটে গঠনযোগ্য স্টাইলশীটের মতো একই পদ্ধতিতে প্রয়োগ করা যেতে পারে।

নতুন CSS মডিউল স্ক্রিপ্ট বৈশিষ্ট্যটি কাস্টম উপাদানগুলির জন্য দুর্দান্ত৷ এবং জাভাস্ক্রিপ্ট থেকে সিএসএস প্রয়োগ করার অন্যান্য উপায়ের বিপরীতে, সিএসএস পাঠ্যের জাভাস্ক্রিপ্ট স্ট্রিংগুলির সাথে উপাদান তৈরি করার বা বিশৃঙ্খলা করার প্রয়োজন নেই।

এটি ব্যবহার করতে, assert {type: 'css'} সহ স্টাইল শীট আমদানি করুন, তারপর এটিকে document বা shadowRoot এ প্রয়োগ করুন adoptedStyleSheets কল করে।

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

কিন্তু সাবধান, আপনি যদি assert ছেড়ে দেন - ফাইলটিকে জাভাস্ক্রিপ্ট হিসাবে গণ্য করা হবে, এবং কাজ করবে না!

সম্পূর্ণ বিবরণের জন্য web.dev-এ স্টাইলশীট আমদানি করতে CSS মডিউল স্ক্রিপ্ট ব্যবহার করে দেখুন।

মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API

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

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

ডিভাইসের সাথে একাধিক স্ক্রিন সংযুক্ত আছে কিনা তা আপনি দ্রুত পরীক্ষা করতে পারেন:

const isExtended = window.screen.isExtended;
// returns true/false

কিন্তু, মূল কার্যকারিতা window.getScreens() এ রয়েছে, যা সংযুক্ত ডিসপ্লে সম্পর্কে সমস্ত বিবরণ প্রদান করে।

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

উদাহরণস্বরূপ, আপনি প্রাথমিক স্ক্রীন নির্ধারণ করতে পারেন, তারপর সেই স্ক্রিনে একটি উপাদান প্রদর্শন করতে requestFullscreen() ব্যবহার করুন।

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

এবং এটি পরিবর্তনের জন্য শোনার একটি উপায় প্রদান করে, উদাহরণস্বরূপ যদি একটি নতুন ডিসপ্লে প্লাগ ইন করা হয় বা সরানো হয়।

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

একটি গভীর ডুবের জন্য web.dev-এ মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API-এর সাহায্যে একাধিক ডিসপ্লে পরিচালনা করা টমের নিবন্ধটি দেখুন।

সংক্ষিপ্ত রিলিজ চক্র

মার্চ মাসে, আমরা প্রকাশের চক্রকে ছোট করার এবং প্রতি চার সপ্তাহে Chrome এর একটি নতুন সংস্করণ পাঠানোর আমাদের পরিকল্পনা ঘোষণা করেছি৷

সেই সময় এসে গেছে, এবং আমরা 21শে সেপ্টেম্বর Chrome 94 পাঠাব। আপনি Chrome ক্যালেন্ডারে প্রতিটি সংস্করণের জন্য পরিকল্পিত প্রকাশের তারিখগুলি খুঁজে পেতে পারেন৷

নতুন PWA বৈশিষ্ট্য

আপনি যদি একটি প্রগ্রেসিভ ওয়েব অ্যাপ তৈরি করছেন, তাহলে চেক আউট করার মতো দুটি নতুন অরিজিন ট্রায়াল আছে।

PWA এর জন্য URL হ্যান্ডলার

আপনার যদি একটি PWA ইনস্টল করা থাকে এবং আপনি সেই PWA-এর একটি লিঙ্কে ক্লিক করেন, আপনি সম্ভবত এটি PWA-তে খুলতে চান, ব্রাউজার ট্যাবে নয় ।

আপনার ওয়েব অ্যাপ ম্যানিফেস্টে url_handlers উল্লেখ করে এবং আপনার .well-known/ ডিরেক্টরিতে একটি web-app-origin-association ফাইল যোগ করে, আপনি ব্রাউজারকে বলতে পারেন যে যদি কোনো ব্যবহারকারী আপনার পিডব্লিউএ-তে কোনো লিঙ্কে ক্লিক করে, তাহলে সেটির মধ্যে খুলতে হবে। ইনস্টল করা PWA।

manifest.json ফাইলে url_handlers উদাহরণ:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association ফাইলের উদাহরণ:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

এবং একটু অতিরিক্ত যাচাইকরণের সাথে, আপনি এমনকি আপনার মালিকানাধীন অন্যান্য উত্স থেকে আপনার PWA হ্যান্ডেল লিঙ্কগুলিও পেতে পারেন৷

মূল বিচারের সমস্ত বিবরণ web.dev-এ URL হ্যান্ডলার হিসাবে PWA- তে রয়েছে।

উইন্ডো নিয়ন্ত্রণ ওভারলে

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

আপনার ইনস্টল করা PWA দেখতে অন্যান্য ইনস্টল করা অ্যাপের মতো দেখতে আপনি এই বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

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

পিডব্লিউএ সামিট

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

মহান আলোচনা এবং বিষয়বস্তু একটি টন আছে. আপনি আরও জানতে এবং PWASummit.org এ নিবন্ধন করতে পারেন।

এবং আরো!

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

  • ফ্লেক্সবক্স এবং ফ্লেক্সবক্স আইটেমগুলি সারিবদ্ধকরণ কীওয়ার্ডগুলির জন্য সমর্থন যোগ করেছে: start , end , self-start , self-end , left এবং right ।
  • async ক্লিপবোর্ড API এখন SVG ফাইল সমর্থন করে।
  • এবং, meta theme-color সেট করার সময় media অ্যাট্রিবিউট সম্মানিত হবে, যাতে আপনি হালকা এবং গাঢ় মোডের জন্য বিভিন্ন থিমের রঙ নির্দিষ্ট করতে পারেন। 
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

আরও পড়া

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

সদস্যতা

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

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