Chrome 110 এ নতুন

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

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

  • নতুন :picture-in-picture সিউডো ক্লাসের সাথে আপনার পিকচার-ইন-পিকচার উপাদানগুলিতে কাস্টম শৈলী যোগ করুন।
  • আপনার ম্যানিফেস্টে launch_handler দিয়ে আপনার ওয়েব অ্যাপ লঞ্চ আচরণ সেট করুন।
  • কোনো ক্রস অরিজিন এমবেডার নীতি সেট করে না এমন তৃতীয় পক্ষের সামগ্রী এম্বেড করতে iframes-এ credentialless বৈশিষ্ট্য ব্যবহার করুন
  • এবং আরো অনেক আছে.

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

:ছবিতে-ছবিতে ছদ্ম ক্লাস

Picture-in-Picture API-এর সাহায্যে ওয়েবসাইটগুলি একটি ভাসমান ভিডিও উইন্ডো তৈরি করতে পারে, সর্বদা শীর্ষে যাতে ব্যবহারকারীরা অন্যান্য সামগ্রীর সাথে ইন্টারঅ্যাক্ট করার সময় মিডিয়া ব্যবহার করা চালিয়ে যান।

এখন :picture-in-picture css pseudo-class দিয়ে আপনি অভিজ্ঞতা উন্নত করতে উপাদানগুলিতে শৈলী যোগ করতে পারেন।

নীচের স্নিপেটটি দেখায় যে কীভাবে ভিডিও কন্টেইনারে একটি বার্তা যোগ করতে পিকচার-ইন-পিকচার ক্লাস ব্যবহার করতে হয় যা ব্যবহারকারীকে মনে করিয়ে দেয় যে ভিডিওটি এখন অন্য কোথাও চলছে।

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

বার্তাটি সঠিকভাবে প্রদর্শন করতে উপাদানটিকে স্বচ্ছ করতে, ভিডিও উপাদানটিতে আবার ছদ্ম-শ্রেণী ব্যবহার করুন।

উদাহরণ দিয়ে খেলুন এবং আপনার ছবি-মধ্য-ছবি ভিডিও অভিজ্ঞতা উন্নত করুন।

launch_handler ম্যানিফেস্ট সদস্য।

লঞ্চ হ্যান্ডলার API আপনাকে নিয়ন্ত্রণ করতে দেয় কিভাবে আপনার ওয়েব অ্যাপ চালু হয় উদাহরণস্বরূপ, এটি একটি বিদ্যমান বা একটি নতুন উইন্ডো ব্যবহার করে এবং নির্বাচিত উইন্ডোটি লঞ্চ URL-এ নেভিগেট করা হয় কিনা।

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

এখন, launch_handler ম্যানিফেস্ট সদস্য ওয়েব অ্যাপ ব্যবহার করে তাদের লঞ্চ আচরণ কাস্টমাইজ করতে পারে।

উদাহরণস্বরূপ, নীচের স্নিপেটটি এই সমস্ত ওয়েব অ্যাপের লঞ্চগুলিকে একটি বিদ্যমান অ্যাপ উইন্ডোতে ফোকাস করে এবং সর্বদা একটি নতুন উইন্ডো চালু করার পরিবর্তে এটিতে (যদি এটি বিদ্যমান থাকে) নেভিগেট করে।

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless আইফ্রেম।

ক্রস অরিজিন আইসোলেশনের সাথে একটি বড় চ্যালেঞ্জ হল যে সমস্ত ক্রস-অরিজিন iframes অবশ্যই COEP এবং CORP স্থাপন করবে৷ এই শিরোনাম ছাড়া একটি iframe ব্রাউজার দ্বারা লোড করা হবে না.

credentialless বৈশিষ্ট্য তৃতীয় পক্ষের আইফ্রেমগুলি এম্বেড করতে সহায়তা করে যা এই শিরোনামগুলি সেট করে না।

credentialless , iframe একটি ভিন্ন, খালি প্রসঙ্গ থেকে লোড করা হয়৷ বিশেষ করে, এটা কুকি ছাড়া লোড করা হয়. iframe একটি খালি কুকি জার দিয়ে শুরু হয়।

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

আপনার আইফ্রেমে তৃতীয় পক্ষের সামগ্রী লোড করতে credentialless নিরাপদে ব্যবহার করতে এই নিবন্ধে আরও তথ্য খুঁজুন।

এবং আরো!

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

ওয়েব SQL এখন অ-সুরক্ষিত প্রসঙ্গে সরানো হয়েছে।

CSS initial-letter বৈশিষ্ট্য একটি প্রাথমিক-অক্ষর পাঠ্যের নিম্নলিখিত লাইনগুলিতে ডুবে থাকা লাইনের সংখ্যা সেট করার একটি উপায় প্রদান করে।

FileSystemHandle এখন একটি remove() পদ্ধতি অন্তর্ভুক্ত করে।

আরও পড়া

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

সদস্যতা

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

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