جدید در کروم 104

پیت لی پیج

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

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

یک منطقه محصول را با ثبت منطقه مشخص کنید

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

با Region Capture، یک برنامه وب می تواند ناحیه خاصی از صفحه را که می خواهد به اشتراک بگذارد، تعریف کند. به عنوان مثال، Google Slides می تواند به شما اجازه دهد در نمای ویرایش استاندارد بمانید و اسلاید فعلی را به اشتراک بگذارید.

تصویری از پنجره مرورگر که دارای یک برنامه وب است که قسمت محتوای اصلی را برجسته می‌کند و یک iframe با منبع متقاطع.
قسمت محتوای اصلی به رنگ آبی و iframe متقاطع به رنگ قرمز است.

برای استفاده از آن، عنصر مورد نظر را برای اشتراک گذاری انتخاب کنید، سپس یک CropTarget جدید بر اساس آن عنصر ایجاد کنید. در مرحله بعد، اشتراک‌گذاری صفحه را با فراخوانی getDisplayMedia() شروع کنید. این از کاربر می خواهد که اجازه اشتراک صفحه نمایش خود را بگیرد. سپس، track.cropTo() را فراخوانی کنید و cropTarget را که قبلا ایجاد شده بود ارسال کنید.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

برای جزئیات بیشتر به اشتراک گذاری برگه بهتر با Region Capture را بررسی کنید.

پرسش های رسانه ای آسان تر با نحو و ارزیابی سطح 4

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

Chrome 104 پشتیبانی از Media Queries - Level 4 - Syntax and Evaluation را اضافه می‌کند و به شما امکان می‌دهد با استفاده از عملگرهای مقایسه ریاضی معمولی، درخواست‌های رسانه را بنویسید.

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

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

می توان اینگونه نوشت:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

علاوه بر اینکه پرس‌و‌جوهای رسانه‌ای را کم‌تر می‌کند، نحو جدید می‌تواند دقیق‌تر باشد. پرس و جوهای min- و max- شامل هستند، برای مثال: min-width: 400px برای عرض 400px یا بیشتر تست می کند. نحو جدید به شما این امکان را می دهد که منظورتان را واضح تر بیان کنید.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

قبلاً در فایرفاکس پشتیبانی می‌شود، و یک پلاگین PostCSS وجود دارد که سینتکس جدید را به نحو قدیمی بازنویسی می‌کند و از سازگاری مرورگر اطمینان می‌دهد!

برای جزئیات بیشتر، مقاله Rachel را بررسی کنید نحو جدید برای پرسش‌های رسانه‌ای محدوده در Chrome 104 .

Shared Element Transitions آزمایش اولیه جدیدی را آغاز می کند

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

Shared Element Transitions، شروع آزمایشی مبدأ جدید در Chrome 104، به شما امکان می‌دهد تا انتقال‌ها را بدون در نظر گرفتن اسناد متقاطع (مثلاً در یک برنامه چند صفحه‌ای)، یا درون سند (مثلاً در یک سند واحد) ارائه دهید. برنامه صفحه).

در اینجا یک مثال تقریبی از نحوه عملکرد ترانزیشن ها برای یک برنامه تک صفحه ای آورده شده است. در تابع پیمایش، محتوای صفحه جدید را دریافت کنید، سپس بررسی کنید که آیا انتقال ها پشتیبانی می شوند یا خیر، اگر نه، صفحه را بدون انتقال به روز کنید. اگر چنین هستند، یک transition() ایجاد کنید و start() را روی آن فراخوانی کنید و به API اجازه دهید از تکمیل تغییر DOM مطلع شود.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

در زیر هود، Shared Element Transitions از انیمیشن‌های CSS استفاده می‌کند، بنابراین می‌توانید از حالت محو شدن، به اسلاید در داخل یا هر چیزی که می‌خواهید تغییر دهید.

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

و بیشتر!

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

  • وقتی کوکی‌ها با ویژگی صریح Expires یا Max-Age تنظیم می‌شوند، اکنون مقدار آن به بیش از 400 روز محدود می‌شود.
  • پیشرفت هایی در API قرار دادن پنجره چند صفحه ای وجود دارد.
  • و ویژگی overflow-clip-margin CSS مشخص می‌کند که محتوای یک عنصر تا چه حد مجاز است قبل از بریده شدن نقاشی شود.

در ادامه مطلب

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

مشترک شوید

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

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