Chrome 115-এ নতুন

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

  • স্ক্রল-চালিত অ্যানিমেশন তৈরি করতে ScrollTimeline এবং ViewTimeline ব্যবহার করুন যা ব্যবহারকারীর অভিজ্ঞতা বাড়ায়।
  • অপ্রয়োজনীয় প্রসঙ্গ ভাগাভাগি রোধ করার সময় প্রাসঙ্গিক বিষয়বস্তু এম্বেড করার জন্য বেড়াযুক্ত ফ্রেমগুলি অন্যান্য গোপনীয়তা স্যান্ডবক্স API-এর সাথে কাজ করে।
  • টপিক এপিআই- এর সাহায্যে ব্রাউজার গোপনীয়তা রক্ষা করার সময় ব্যবহারকারীর আগ্রহ সম্পর্কে তৃতীয় পক্ষের সাথে তথ্য শেয়ার করতে পারে।
  • এবং আরো অনেক আছে.

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

স্ক্রোল চালিত অ্যানিমেশন

স্ক্রোল-চালিত অ্যানিমেশনগুলি ওয়েবে একটি সাধারণ UX প্যাটার্ন। একটি স্ক্রোল-চালিত অ্যানিমেশন একটি স্ক্রোল কন্টেইনারের স্ক্রোল অবস্থানের সাথে সংযুক্ত থাকে। এর মানে হল যে আপনি উপরে বা নীচে স্ক্রোল করার সাথে সাথে লিঙ্ক করা অ্যানিমেশন সরাসরি প্রতিক্রিয়াতে এগিয়ে বা পিছনে যায়।

নিম্নলিখিত উদাহরণগুলি কিছু ব্যবহারের ক্ষেত্রে দেখায়। উদাহরণস্বরূপ আপনি পড়ার সূচক তৈরি করতে পারেন যা আপনার স্ক্রোল করার সাথে সাথে চলে যায়:

একটি নথির উপরে একটি পড়ার সূচক, স্ক্রোল দ্বারা চালিত।

স্ক্রোল-চালিত অ্যানিমেশনগুলি এমন উপাদানগুলিও তৈরি করতে পারে যেগুলি দেখার সাথে সাথে বিবর্ণ হয়ে যায়:

এই পৃষ্ঠার ছবিগুলি দেখার সাথে সাথে বিবর্ণ হয়ে যায়৷

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

স্ক্রোল-চালিত অ্যানিমেশন স্পেসিফিকেশন দুটি নতুন ধরনের টাইমলাইন সংজ্ঞায়িত করে যা আপনি ব্যবহার করতে পারেন:

  • স্ক্রোল প্রগ্রেস টাইমলাইন : একটি টাইমলাইন যা একটি নির্দিষ্ট অক্ষ বরাবর একটি স্ক্রোল কন্টেইনারের স্ক্রোল অবস্থানের সাথে সংযুক্ত থাকে।
  • অগ্রগতির সময়রেখা দেখুন : একটি টাইমলাইন যা তার স্ক্রোল কন্টেইনারের মধ্যে একটি নির্দিষ্ট উপাদানের আপেক্ষিক অবস্থানের সাথে সংযুক্ত।

এখানে একটি কোড নমুনা যা ভিউপোর্টের শীর্ষে স্থির একটি পড়ার অগ্রগতি সূচক তৈরি করতে একটি বেনামী স্ক্রোল অগ্রগতি টাইমলাইন ব্যবহার করে৷

<body>
  <div id="progress"></div>
  …
</body>
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

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

বেড়া ফ্রেম

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

এর অনেক প্রস্তাবের উদ্দেশ্য তৃতীয় পক্ষের কুকিজ বা অন্যান্য ট্র্যাকিং প্রক্রিয়া ছাড়াই ক্রস-সাইট ব্যবহারের ক্ষেত্রে সন্তুষ্ট করা। উদাহরণ স্বরূপ:

  • সুরক্ষিত শ্রোতা API : গোপনীয়তা-সংরক্ষণ পদ্ধতিতে আগ্রহ-ভিত্তিক বিজ্ঞাপন পরিবেশনের অনুমতি দেয়।
  • শেয়ার্ড স্টোরেজ : একটি সুরক্ষিত পরিবেশে বিভাজনবিহীন ক্রস-সাইট ডেটা অ্যাক্সেসের অনুমতি দেয়।

গোপনীয়তা রক্ষা করার জন্য এই APIগুলির মধ্যে কিছু বিষয়বস্তু এম্বেড করার একটি নতুন উপায় প্রয়োজন। সমাধান একটি বেড়া ফ্রেম বলা হয়.

বেড়াযুক্ত ফ্রেমগুলি একটি একক পৃষ্ঠার মধ্যে বিভিন্ন স্টোরেজ পার্টিশন থেকে নথি প্রদর্শন করার জন্য অন্যান্য গোপনীয়তা স্যান্ডবক্স প্রস্তাবগুলির সাথে একত্রে কাজ করে।

একটি বেড়াযুক্ত ফ্রেম হল একটি আইফ্রেমের অনুরূপ এমবেডেড সামগ্রীর জন্য একটি HTML উপাদান। আইফ্রেমের বিপরীতে, একটি বেড়াযুক্ত ফ্রেম এটির এম্বেডিং প্রসঙ্গের সাথে যোগাযোগকে সীমিত করে যাতে ফ্রেমটিকে এম্বেডিং প্রসঙ্গের সাথে ভাগ না করে ক্রস-সাইট ডেটাতে অ্যাক্সেসের অনুমতি দেয়।

একইভাবে, এম্বেডিং প্রেক্ষাপটে কোনো প্রথম-পক্ষের ডেটা বেড়াযুক্ত ফ্রেমের সাথে ভাগ করা যাবে না।

বৈশিষ্ট্য iframe fencedframe
বিষয়বস্তু এম্বেড করুন হ্যাঁ হ্যাঁ
এম্বেড করা বিষয়বস্তু এম্বেডিং প্রসঙ্গ DOM অ্যাক্সেস করতে পারে হ্যাঁ না
এম্বেডিং প্রসঙ্গ এম্বেড করা সামগ্রী DOM অ্যাক্সেস করতে পারে হ্যাঁ না
পর্যবেক্ষণযোগ্য গুণাবলী, যেমন name হ্যাঁ না
URLs ( http://example.com ) হ্যাঁ হ্যাঁ ( ব্যবহারের ক্ষেত্রে নির্ভরশীল )
ব্রাউজার-পরিচালিত অস্বচ্ছ উৎস ( urn:uuid ) না হ্যাঁ
ক্রস-সাইট ডেটাতে অ্যাক্সেস না হ্যাঁ (ব্যবহারের ক্ষেত্রে নির্ভরশীল)

উদাহরণ স্বরূপ, ধরা যাক news.example (এম্বেড করার প্রসঙ্গ) একটি বেড়াযুক্ত ফ্রেমে shoes.example থেকে একটি বিজ্ঞাপন এম্বেড করে। news.example shoes.example বিজ্ঞাপন থেকে ডেটা বের করতে পারে না এবং shoes.example news.example থেকে প্রথম পক্ষের ডেটা শিখতে পারে না।

স্টোরেজ পার্টিশনের আগে এবং পরে অবস্থার তুলনা।

ফেন্সড ফ্রেম , প্রোটেক্টেড অডিয়েন্স API , শেয়ার্ড স্টোরেজ এবং আরও অনেক কিছু সম্পর্কে ডকুমেন্টেশনের জন্য এই নিবন্ধগুলি দেখুন

বিষয় API

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

টপিকস এপিআই একটি ব্রাউজারকে গোপনীয়তা রক্ষা করার সময় ব্যবহারকারীর আগ্রহ সম্পর্কে তৃতীয় পক্ষের সাথে তথ্য ভাগ করার অনুমতি দেয়।

টপিক্স API ব্যবহারকারীর ভিজিট করা সাইট ট্র্যাক না করেই আগ্রহ-ভিত্তিক বিজ্ঞাপন (IBA) সক্ষম করে। ব্রাউজার তাদের ব্রাউজিং কার্যকলাপের উপর ভিত্তি করে ব্যবহারকারীর আগ্রহের বিষয়গুলি পর্যবেক্ষণ করে এবং রেকর্ড করে। এই তথ্য ব্যবহারকারীর ডিভাইসে রেকর্ড করা হয়.

উদাহরণ স্বরূপ, API knitting.example ওয়েবসাইট পরিদর্শনকারী ব্যবহারকারীর জন্য "Fiber & Textile Arts" বিষয়ের পরামর্শ দিতে পারে।

বিজ্ঞাপন প্রযুক্তি প্ল্যাটফর্মগুলিকে প্রাসঙ্গিক বিজ্ঞাপন নির্বাচন করতে সাহায্য করার জন্য বিষয়গুলি একটি সংকেত৷ তৃতীয় পক্ষের কুকিজের বিপরীতে, এই তথ্যটি ব্যবহারকারীর নিজের সম্পর্কে বা ব্যবহারকারীর ব্রাউজিং কার্যকলাপ সম্পর্কে আরও তথ্য প্রকাশ না করেই শেয়ার করা হয়।

টপিক ট্যাক্সোনমি এবং টপিক এপিআই ব্যবহার করে সমস্ত বিবরণের জন্য গোপনীয়তা স্যান্ডবক্স ওভারভিউ পড়ুন

এবং আরো!

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

  • প্রধান থ্রেডে একটি WebAssembly.Module এর সর্বোচ্চ আকার 8 মেগাবাইটে বেড়েছে
  • সিএসএস display প্রপার্টি এখন একাধিক কীওয়ার্ডকে একটি মান হিসেবে গ্রহণ করে, লিগ্যাসি প্রাক-কম্পোজড কীওয়ার্ড ছাড়াও।
  • কম্পিউট প্রেসার এপিআই-এর জন্য একটি অরিজিন ট্রায়াল রয়েছে, যা ডিভাইস হার্ডওয়্যারের বর্তমান অবস্থা সম্পর্কে উচ্চ-স্তরের তথ্য প্রদান করে।

আরও পড়া

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

সাবস্ক্রাইব

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

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