آنچه باید بدانید:
- تصویر در تصویر سند کنترل بیشتری بر پنجره‌های تصویردرتصویر به شما می‌دهد.
- اعلان‌های تودرتوی CSS برخی‌از موارد حاشیه‌ای دشوار را اصلاح می‌کند.
- می‌توانید رفتار تزئینات عناصر را که در چندین خط تقسیم می‌شوند مشخص کنید.
- و بسیاری موارد دیگر.
من Pete LePage هستم. بیایید نگاهی به ویژگی‌های جدید توسعه‌دهندگان در Chrome 130 بیندازیم.
سند تصویردرتصویر
وقتی می‌خواهید ویدیویی را از زبانه مرورگر بیرون بیاورید تا بتوانید هنگام تعامل با سایت‌ها یا برنامه‌های دیگر، ویدیو را زیر نظر داشته باشید، API تصویردرتصویر عالی است. اما فقط ویدیو می‌گیرد.
«میانای برنامه‌سازی کاربردی تصویردرتصویر سند» این محدودیت را برطرف می‌کند و به شما امکان می‌دهد پنجره تصویردرتصویری ایجاد کنید که در آن بر محتوا کنترل داشته باشید. برای مواردی مثل پخش‌کننده‌های ویدیو سفارشی، کنفرانس ویدیویی، و برنامه‌های بهره‌وری عالی است. من عاشق کاری هستم که اسپاتیفای با آن در پخش‌کننده وب خود انجام داده است. پنجره‌ای با جلد آهنگ فعلی، کنترل‌های پخش، و امکان افزودن آسان آهنگ به موارد دلخواه دریافت می‌کنم.
برای استفاده از آن، پنجره تصویردرتصویر سند جدیدی درخواست کنید. promise با یک شیء جاوا اسکریپت پنجره «تصویردرتصویر» حل‌وفصل می‌شود.
سپس از آن برای افزودن محتوای خود به پنجره استفاده کنید.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
با ویژگی جدید preferInitialWindowPlacement، می‌توانید به Chrome بگویید که
همیشه پنجره تصویردرتصویر را در موقعیت و اندازه پیش‌فرض خود باز کند،
به‌جای اینکه از موقعیت یا اندازه پنجره قبلی استفاده کند.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
برای جزئیات بیشتر، پست François تصویردرتصویر برای هر عنصر را بررسی کنید!
اظهارنامه‌های تودرتوی CSS
آشیانه‌سازی CSS با آشیانه‌سازی قوانین در قوانین دیگر، امکان استفاده از گزینشگرهای کوتاه‌تر، خواندن آسان‌تر، و واحدبندی بیشتر را فراهم می‌کند. «آشیانه‌سازی CSS» به‌تازگی در «خط پایه» دردسترس قرار گرفته است، و تقریباً یک سال است که دردسترس بوده است.
چند مورد حاشیه‌ای وجود داشت که طبق انتظار کار نمی‌کردند. برای مثال، با بلوک CSS زیر، انتظار دارید رنگ پس‌زمینه سبز باشد، چون آخر از همه می‌آید، اما قرمز است!
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
برای رفع موارد حاشیه‌ای مانند این، گروه کاری CSS قانون اظهارات تودرتو را معرفی کرد که در Chrome 130 پیاده‌سازی شده است. اکنون، همان بلوک CSS منجر به پس‌زمینه‌ای سبز می‌شود، همان‌طور که انتظار می‌رفت. اگر بیانیه‌های ساده را با قوانین تودرتو درهم می‌آمیختید، باید کدتان را دوباره بررسی کنید.
برای توضیحات دقیق‌تر، مقاله Bramus را
آشیانه‌سازی CSS با CSSNestedDeclarations بهبود می‌یابد
بررسی کنید.
box-decoration-break
بااستفاده از دارایی box-decoration-break CSS می‌توانید مشخص کنید که چگونه
تکه‌های عنصر باید زمانی که در چندین خط، ستون، یا
صفحه شکسته می‌شوند پرداز شوند.
برای مثال، این عنصر زمانی عالی به‌نظر می‌رسد که همه چیز در یک خط باشد.
وقتی محتوا در چند خط تقسیم می‌شود، تزئیناتی مثل پس‌زمینه، سایه جعبه، حاشیه، و غیره برش داده می‌شوند و ظاهر نسبتاً تغییریافته‌ای ایجاد می‌کنند.
با افزودن box-decoration-break: clone، هر تکه به‌طور مستقل پرداز می‌شود و ظاهر بسیار بهتری ایجاد می‌کند.
اگرچه دقیقاً «خط پایه» نیست، در Chrome و Firefox دردسترس است و در Safari پیشوند فروشنده دارد.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
برای جزئیات بیشتر،
اسناد box-decoration-break در MDN
و پست Rachel با عنوان ویژگی box-decoration-break در Chrome 130
را بررسی کنید.
و موارد دیگر!
البته موارد بسیار بیشتری وجود دارد.
- پس‌از چند شروع ناموفق، ظرف‌های پیمایش قابل‌تمرکز صفحه‌کلید بالاخره دردسترس قرار می‌گیرند.
- WebGPU ترکیب منبع دوگانه دریافت می‌کند.
- و وب سریال یک ویژگی متصل دریافت می‌کند.
مطالعه بیشتر
این فقط برخی‌از نکات کلیدی را پوشش می‌دهد. برای تغییرات بیشتر در Chrome 130، پیوندهای زیر را بررسی کنید.
- یادداشت‌های انتشار برای Chrome 130.
- ویژگی‌های جدید در Chrome DevTools (130)
- به‌روزرسانی‌های ChromeStatus.com برای Chrome 130
- فهرست تغییرات مخزن منبع Chromium
- تقویم انتشار Chrome
مشترک شدن
برای به‌روز ماندن، در کانال YouTube «توسعه‌دهندگان Chrome» مشترک شوید، و هر زمان که ویدیو جدیدی راه‌اندازی کنیم، اعلان ایمیلی دریافت خواهید کرد.
من Pete LePage هستم و به‌محض انتشار Chrome 131، اینجا خواهیم بود تا به شما بگوییم چه چیزهای جدیدی در Chrome وجود دارد!