جدید در کروم 69

پیت لی پیج

ده سال از اولین عرضه کروم می گذرد. از آن زمان تاکنون چیزهای زیادی تغییر کرده است، اما هدف ما برای ایجاد یک پایه محکم برای برنامه های کاربردی وب مدرن، تغییر نکرده است!

در Chrome 69، ما پشتیبانی از موارد زیر را اضافه کرده‌ایم:

  • CSS Scroll Snap به شما این امکان را می‌دهد تا تجربه‌های روان، نرم و پیمایشی ایجاد کنید.
  • برش‌های نمایشگر به شما امکان می‌دهند از فضای کامل صفحه، از جمله هر فضایی در پشت بریدگی نمایشگر، که گاهی اوقات بریدگی نامیده می‌شود، استفاده کنید.
  • Web Locks API به شما این امکان را می دهد که به طور ناهمزمان یک قفل را بدست آورید، آن را در حین انجام کار نگه دارید و سپس آن را آزاد کنید.

و خیلی چیزهای دیگر وجود دارد!

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیزی برای توسعه دهندگان در Chrome 69 جدید است!

لیست کامل تغییرات را می خواهید؟ فهرست تغییرات مخزن منبع Chromium را بررسی کنید.

CSS Scroll Snap

نمایش دمو | منبع

CSS Scroll Snap به شما این امکان را می‌دهد تا با اعلام موقعیت‌های اسکرول اسکرول که به مرورگر می‌گوید پس از هر عملیات پیمایش کجا متوقف شود، تجربه‌های اسکرول صاف، نرم و روان ایجاد کنید. این برای چرخ فلک‌های تصویر یا بخش‌های صفحه‌بندی شده که می‌خواهید کاربر به یک نقطه خاص پیمایش کند، بسیار مفید است.

برای چرخ فلک تصویر، scroll-snap-type: x mandatory; به محفظه اسکرول، و scroll-snap-align: center; به هر تصویر سپس، همانطور که کاربر از طریق چرخ فلک پیمایش می کند، هر تصویر به آرامی در موقعیت عالی اسکرول می شود.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS Scroll Snapping به خوبی کار می‌کند، حتی زمانی که اهداف ضربه‌ای اندازه‌های متفاوتی داشته باشند یا بزرگ‌تر از اسکرول باشند! برای اطلاعات بیشتر و نمونه هایی که می توانید امتحان کنید، پست پیمایش خوب کنترل شده با اسکرول CSS را بررسی کنید!

برش های نمایشگر (معروف به بریدگی)

تلفن همراه با بریدگی نمایشگر
مرورگرها برای جلوگیری از پوشاندن محتوا توسط بریدگی، مقداری حاشیه اضافی روی دستگاه تلفن همراه با بریدگی نمایش اضافه می کنند.

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

اما اگر بخواهید از آن فضا استفاده کنید چه؟

با متغیرهای محیط CSS و متا تگ viewport-fit ، اکنون می توانید. به عنوان مثال، برای اینکه به مرورگر بگویید تا در ناحیه برش نمایشگر گسترش یابد، ویژگی viewport-fit را در متا تگ viewport روی cover قرار دهید.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

سپس می توانید از متغیرهای محیط safe-area-inset-* CSS برای چیدمان محتوای خود استفاده کنید.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

یک پست عالی در وبلاگ WebKit در مورد طراحی وب سایت برای iPhone X وجود دارد، یا برای جزئیات بیشتر توضیح دهنده را بررسی کنید.

Web Locks API

Web Locks API به شما این امکان را می دهد که به طور ناهمزمان یک قفل را بدست آورید، آن را در حین انجام کار نگه دارید و سپس آن را آزاد کنید. در حالی که قفل نگه داشته می شود، هیچ اسکریپت دیگری در مبدا نمی تواند همان قفل را بدست آورد و به هماهنگی استفاده از منابع مشترک کمک کند.

برای مثال، اگر یک برنامه وب در حال اجرا در چندین برگه بخواهد اطمینان حاصل کند که فقط یک برگه با شبکه همگام‌سازی می‌شود، کد همگام‌سازی سعی می‌کند قفلی به نام network_sync_lock به دست آورد.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

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

MDN دارای یک پرایمر Web Locks عالی است و شامل توضیحات عمیق تر و مثال های زیادی است. یا عمیق تر شیرجه بزنید و مشخصات را بررسی کنید.

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 69 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

گرادیان مخروطی

  • از مشخصات CSS4، اکنون می توانید با استفاده از گرادیان های مخروطی ، انتقال رنگ را در اطراف محیط دایره ایجاد کنید. Lea Verou یک CSS conic-gradient() polyfill دارد که می‌توانید از آن استفاده کنید، و این صفحه شامل یک دسته کامل از نمونه‌های بسیار جالب ارسال شده توسط جامعه است.
  • یک متد toggleAttribute() جدید بر روی عناصر وجود دارد که وجود یک ویژگی را تغییر می دهد، شبیه به classList.toggle() .
  • آرایه های جاوا اسکریپت دو روش جدید دریافت می کنند: flat() و flatMap() . آنها یک آرایه جدید را با تمام عناصر زیر آرایه که در آن قرار گرفته اند، برمی گردانند.
  • و OffscreenCanvas کار را از موضوع اصلی به یک کارگر منتقل می کند و به رفع تنگناهای عملکرد کمک می کند.

تخم مرغ عید پاک

آیا تمام تخم مرغ های عید پاک را در ویدیو پیدا کردید؟

یک تشکر ویژه از همه افرادی که در ساخت 28 قسمت New in Chrome کمک کردند. تک تک این افراد عالی هستند!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

آیا می خواهید ببینید که New in Chrome از اولین قسمت ما تا چه حد پیشرفت کرده است؟ این ویدیوی جالب 30 ثانیه پیشرفت را که تاریخچه ما را از اولین ویدیوی ما تا امروز نمودار می کند، ببینید!

و البته، از تماشای شما و ارائه نظرات و بازخورد خود متشکرم ! من همه آنها را خواندم و به پیشنهادات شما توجه کردم. این ویدیوها به خاطر شما بهتر شده اند!

ممنون از ملاحظه تان!

جدید در Chrome Bloopers

ما یک قرقره بلوپر کوچک سرگرم کننده را برای شما آماده کرده ایم تا از آن لذت ببرید! بعد از تماشای آن، چند چیز یاد گرفتم:

  • وقتی به حرف هایم دست می زنم، صداهای عجیب و غریبی از من بیرون می آید.
  • قیافه می کنم و زبانم را بیرون می آورم.
  • تکان می خورم، خیلی

اشتراک در

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

من Pete LePage هستم، و به محض اینکه Chrome 70 منتشر شد، اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!