جدید در کروم 130، جدید در کروم 130

پیت لی پیج

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

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

سند تصویر در تصویر

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

پنجره تصویر در تصویر Spotify

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

برای استفاده از آن، یک پنجره تصویر در تصویر سند جدید درخواست کنید. promise بازگشتی با یک شی جاوا اسکریپت پنجره Picture-in-Picture حل می شود. سپس، از آن برای اضافه کردن محتوای خود به پنجره استفاده کنید.

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

برای جزئیات بیشتر، پست تصویر در تصویر فرانسوا را برای هر عنصری بررسی کنید!

اعلان های تو در تو CSS

تودرتوی CSS امکان انتخابگرهای کوتاه‌تر، خواندن آسان‌تر و مدولار بودن بیشتر را با قرار دادن قوانین درون دیگران فراهم می‌کند. CSS Nesting به تازگی در دسترس است و تقریباً یک سال است که در دسترس است.

چند مورد لبه وجود داشت که آنطور که انتظار می رفت کار نکردند. برای مثال، با بلوک CSS زیر، انتظار دارید رنگ پس‌زمینه سبز باشد، زیرا آخرین رنگ است، اما قرمز است!

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

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

برای توضیح عمیق تر، مقاله Bramus را بررسی کنید تودرتوی CSS با CSSNestedDeclarations بهبود می یابد .

box-decoration-break

ویژگی box-decoration-break CSS به شما این امکان را می‌دهد تا نحوه نمایش قطعات یک عنصر را در هنگام شکستن چندین خط، ستون یا صفحه مشخص کنید.

هیچ خطی قطع نمی شود

به عنوان مثال، زمانی که همه چیز در یک خط باشد، این عنصر عالی به نظر می رسد.

خط با برش ها شکسته می شود

هنگامی که محتوا در چندین خط تقسیم می شود، تزئیناتی مانند پس زمینه، سایه جعبه، حاشیه و غیره بریده می شوند و ظاهری نسبتاً شدید ایجاد می کنند.

خط با کلون می شکند

با افزودن box-decoration-break: clone ، هر قطعه به طور مستقل رندر می شود و ظاهر بسیار زیباتری ایجاد می کند.

اگرچه کاملاً پایه نیست، اما در کروم و فایرفاکس موجود است و در سافاری پیشوند فروشنده است.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

برای جزئیات بیشتر، اسناد box-decoration-break در MDN و پست Rachel را بررسی کنید. ویژگی box-decoration-break در Chrome 130 .

و بیشتر!

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

در ادامه مطلب

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

مشترک شوید

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

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