جدید در کروم 115

آدریانا خارا

در اینجا چیزی است که شما باید بدانید:

  • از ScrollTimeline و ViewTimeline برای ایجاد انیمیشن های پیمایشی که تجربه کاربر را بهبود می بخشد، استفاده کنید.
  • قاب‌های حصاردار در کنار سایر APIهای Privacy Sandbox کار می‌کنند تا محتوای مرتبط را جاسازی کنند و از اشتراک‌گذاری غیرضروری زمینه جلوگیری کنند.
  • با استفاده از Topics API، مرورگر می تواند با حفظ حریم خصوصی، اطلاعات مربوط به علایق کاربر را با اشخاص ثالث به اشتراک بگذارد.
  • و چیزهای بیشتری وجود دارد.

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 115 جدید است.

انیمیشن های اسکرول محور

انیمیشن های اسکرول محور یک الگوی UX رایج در وب هستند. یک انیمیشن اسکرول محور به موقعیت اسکرول یک ظرف اسکرول مرتبط است. این بدان معنی است که با اسکرول کردن به بالا یا پایین، انیمیشن پیوند شده در پاسخ مستقیم به جلو یا عقب می رود.

مثال‌های زیر برخی از موارد استفاده را نشان می‌دهند. به عنوان مثال، می توانید نشانگرهای خواندن ایجاد کنید که در حین حرکت حرکت می کنند:

یک نشانگر خواندن در بالای یک سند که با اسکرول هدایت می شود.

انیمیشن‌های اسکرول‌مدار همچنین می‌توانند عناصری را ایجاد کنند که به محض مشاهده، محو می‌شوند:

تصاویر این صفحه با مشاهده محو می شوند.

به طور پیش فرض، یک انیمیشن متصل به یک عنصر در جدول زمانی سند اجرا می شود. زمان مبدأ آن هنگام بارگیری صفحه از 0 شروع می شود و با پیشروی زمان ساعت شروع به تیک زدن به جلو می کند. این جدول زمانی پیش‌فرض انیمیشن است و تاکنون تنها خط زمانی انیمیشنی بود که به آن دسترسی داشتید.

مشخصات انیمیشن های اسکرول محور دو نوع جدید از جدول زمانی را تعریف می کند که می توانید از آنها استفاده کنید:

  • Scroll Progress Timeline : خط زمانی است که به موقعیت اسکرول ظرف پیمایش در امتداد یک محور خاص مرتبط است.
  • نمایش جدول زمانی پیشرفت : خط زمانی که به موقعیت نسبی یک عنصر خاص در ظرف اسکرول آن مرتبط است.

در اینجا یک نمونه کد وجود دارد که از یک جدول زمانی پیشرفت پیمایش ناشناس برای ایجاد یک نشانگر پیشرفت خواندن ثابت در بالای پنجره نمایش استفاده می کند.

<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();
}

انیمیشن های اسکرول درایو را برای همه جزئیات و نمونه های بیشتر بخوانید.

قاب های نرده دار

Privacy Sandbox ابتکاری است که هدف آن ایجاد فناوری هایی است که هم از حریم خصوصی افراد به صورت آنلاین محافظت می کند و هم ابزارهایی را به توسعه دهندگان برای ایجاد مشاغل دیجیتالی پر رونق می دهد.

هدف بسیاری از پیشنهادات آن برآوردن موارد استفاده متقابل سایت بدون کوکی های شخص ثالث یا مکانیسم های ردیابی دیگر است. به عنوان مثال:

  • API مخاطب محافظت شده : امکان ارائه تبلیغات مبتنی بر علاقه را به شیوه ای حفظ حریم خصوصی می دهد.
  • ذخیره سازی مشترک : امکان دسترسی به داده های بین سایتی بدون پارتیشن در یک محیط امن را فراهم می کند.

برای حفظ حریم خصوصی، برخی از این APIها به روش جدیدی برای جاسازی محتوا نیاز دارند. راه حل را قاب حصاردار می نامند.

قاب های حصاردار در ترکیب با سایر پیشنهادات جعبه ایمنی حریم خصوصی برای نمایش اسناد از پارتیشن های ذخیره سازی مختلف در یک صفحه کار می کنند.

یک قاب حصاردار یک عنصر HTML برای محتوای جاسازی شده است، شبیه به iframe. برخلاف iframes، یک قاب حصاردار ارتباط با زمینه تعبیه شده خود را محدود می کند تا به قاب اجازه دسترسی به داده های متقاطع سایت را بدون اشتراک گذاری آن با زمینه جاسازی کند.

به طور مشابه، هر داده شخص اول در زمینه جاسازی نمی تواند با قاب حصاردار به اشتراک گذاشته شود.

ویژگی iframe fencedframe
جاسازی محتوا بله بله
محتوای جاسازی شده می تواند به DOM زمینه جاسازی دسترسی داشته باشد بله خیر
زمینه جاسازی می تواند به DOM محتوای جاسازی شده دسترسی داشته باشد بله خیر
ویژگی های قابل مشاهده، مانند name بله خیر
نشانی‌های اینترنتی ( http://example.com ) بله بله ( بسته به مورد استفاده )
منبع غیر شفاف مدیریت شده توسط مرورگر ( urn:uuid ) خیر بله
دسترسی به داده های بین سایتی خیر بله (بسته به مورد استفاده)

برای مثال، فرض کنید news.example (زمینه جاسازی) تبلیغی را از shoes.example در یک قاب حصاردار جاسازی می کند. news.example نمی تواند داده ها را از تبلیغات shoes.example استخراج کند و shoes.example نمی تواند داده های شخص اول را از news.example بیاموزد.

مقایسه وضعیت قبل و بعد از پارتیشن بندی ذخیره سازی

برای مستندات مربوط به قاب‌های حصاردار ، API مخاطبان محافظت‌شده ، فضای ذخیره‌سازی مشترک و موارد دیگر، این مقالات را بررسی کنید.

موضوعات API

در گذشته، کوکی‌های شخص ثالث و مکانیسم‌های دیگر برای ردیابی رفتار مرور کاربر در سایت‌ها برای استنباط موضوعات مورد علاقه استفاده می‌شدند. این مکانیسم ها به عنوان بخشی از طرح Privacy Sandbox در حال حذف شدن هستند.

Topics API به مرورگر اجازه می‌دهد تا اطلاعات مربوط به علایق کاربر را با اشخاص ثالث به اشتراک بگذارد و در عین حال حریم خصوصی را حفظ کند.

Topics API تبلیغات مبتنی بر علاقه (IBA) را بدون ردیابی سایت هایی که کاربر بازدید می کند فعال می کند. مرورگر موضوعاتی را که به نظر می رسد برای کاربر جالب است را بر اساس فعالیت مرور آنها مشاهده و ثبت می کند. این اطلاعات در دستگاه کاربر ثبت می شود.

به عنوان مثال، API ممکن است موضوع "Fiber & Textile Arts" را برای کاربری که از وب‌سایت knitting.example بازدید می‌کند، پیشنهاد کند.

موضوعات سیگنالی برای کمک به پلتفرم های فناوری تبلیغات در انتخاب تبلیغات مرتبط هستند. برخلاف کوکی‌های شخص ثالث، این اطلاعات بدون افشای اطلاعات بیشتر در مورد خود کاربر یا فعالیت مرور کاربر به اشتراک گذاشته می‌شود.

برای همه جزئیات در مورد طبقه بندی موضوعات و استفاده از Topics API، نمای کلی Privacy Sandbox را بخوانید.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

  • حداکثر اندازه یک WebAssembly.Module در موضوع اصلی به 8 مگابایت افزایش یافت.
  • ویژگی display CSS اکنون چندین کلمه کلیدی را به عنوان یک مقدار می پذیرد، علاوه بر کلمات کلیدی از پیش ساخته شده قدیمی.
  • یک آزمایش اولیه برای Compute Pressure API وجود دارد که اطلاعات سطح بالایی در مورد وضعیت فعلی سخت افزار دستگاه ارائه می دهد.

در ادامه مطلب

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 115 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

Yo soy Adriana Jara، و به محض اینکه Chrome 116 منتشر شد، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!