الجديد في Chrome 104

Pete LePage

في ما يلي ما تحتاج إلى معرفته:

اسمي بيت ليبيه. لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 104 من Chrome.

تحديد منطقة اقتصاص باستخدام ميزة "التقاط منطقة"

يتيح لك الرمز getDisplayMedia() إنشاء بث فيديو من علامة التبويب الحالية. ولكن، أحيانًا لا تريد علامة التبويب بالكامل، بل جزء صغير منها فقط. حتى الآن، كانت الطريقة الوحيدة لإجراء ذلك هي اقتصاص كل إطار فيديو يدويًا.

باستخدام ميزة "التقاط منطقة"، يمكن لتطبيق الويب تحديد المنطقة المحدّدة من الشاشة التي يريد مشاركتها. على سبيل المثال، يمكن أن تسمح لك "العروض التقديمية من Google" بالبقاء في عرض التعديل العادي ومشاركة الشريحة الحالية.

لقطة شاشة لنوافذ متصفّح تعرض تطبيق ويب يُبرز منطقة المحتوى الرئيسي وإطار 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);

اطّلِع على مشاركة علامات التبويب بشكل أفضل باستخدام ميزة "التقاط منطقة" لمزيد من التفاصيل.

طلبات بحث أسهل عن الوسائط باستخدام بنية الجملة والتقييم من المستوى 4

طلبات البحث عن الوسائط مهمة للتصميم السريع الاستجابة، فهي تتيح لك تحديد أنماط محدّدة لأحجام مساحات العرض المختلفة. ولكن، ما لم تستخدمها كل يوم، فقد تكون بناء الجملة مربكًا بعض الشيء.

يتيح Chrome 104 استخدام طلبات البحث عن الوسائط - المستوى 4 - البنية والتقييم، مما يتيح لك كتابة استعلامات عن الوسائط باستخدام عوامل تشغيل المقارنة الرياضية العادية.

بدلاً من استخدام الرمز التالي للإشارة إلى مساحة عرض بين 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 بعرض 400 بكسل أو أكثر. تتيح لك البنية الجديدة التعبير بوضوح أكبر عن ما تعنيه.

@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. */
}

وهي متاحة حاليًا في Firefox، وهناك مكوّن إضافي PostCSS الذي سيقوم بإعادة كتابة البنية الجديدة إلى البنية القديمة، ما يضمن توافق المتصفّح.

يمكنك الاطّلاع على مقالة "راشيل" بعنوان بنية جديدة لطلبات البحث عن الوسائط ضمن النطاق في الإصدار 104 من Chrome للحصول على مزيد من التفاصيل.

تبدأ "عمليات النقل بين العناصر المشترَكة" فترة تجريبية جديدة للمصدر

عادةً ما تتضمن التطبيقات المخصّصة للمنصة انتقالات سلسة بين طرق العرض المختلفة، ويبدو شكلها جميلًا، وتحافظ على سياق المستخدم، وتساعد في تحسين أداء تجربته. في حين أن التنقل الكامل على الويب قد يكون قاسيًا، ويعني أحيانًا شاشة فارغة لحظية. بالنسبة إلى التطبيقات المكوّنة من صفحة واحدة، قد يكون ذلك أفضل، ولكن لا تزال عمليات النقل صعبة.

تتيح لك "عمليات النقل بين العناصر المشترَكة"، التي تبدأ مرحلة تجربة وتقييم جديدة في Chrome 104، توفير عمليات نقل سلسة، بغض النظر عمّا إذا كانت عمليات النقل بين المستندات (على سبيل المثال، في تطبيق مكوّن من صفحات متعددة) أو داخل المستند (على سبيل المثال، في تطبيق مكوّن من صفحة واحدة).

في ما يلي مثال تقريبي على آلية عمل الانتقالات في تطبيق مكوّن من صفحة واحدة. في الدالة navigate، احصل على محتوى الصفحة الجديدة، ثم تحقّق ممّا إذا كانت الانتقالات متوافقة، وإذا لم تكن كذلك، عدِّل الصفحة بدون انتقال. إذا كان الأمر كذلك، أنشئ transition() واطلب start() منه، مع إبلاغ واجهة برمجة التطبيقات عند اكتمال تغيير 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));
}

في الواقع، تستخدِم "عمليات النقل لعناصر مشترَكة" رسومات CSS المتحركة، لذا يمكنك التغيير من تأثير التمويه إلى التمرير أو أي تأثير آخر تريده.

لقد عرّفناك على الأساسيات فقط، لذا اطّلِع على فيديو "جاك" الذي يتناول استخدام انتقالات الصفحات على الويب، أو اطّلِع على الشرح.

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

  • عند ضبط ملفات تعريف الارتباط باستخدام سمة Expires أو Max-Age صريحة، سيتم الآن الحدّ من القيمة بما لا يزيد عن 400 يوم.
  • تم إجراء تحسينات على واجهة برمجة التطبيقات لموضع النافذة على شاشات متعددة.
  • وتحدِّد خاصية CSS‏ overflow-clip-margin مدى السماح برسم محتوى العنصر قبل اقتصاصه.

محتوى إضافي للقراءة

لا يتناول هذا التقرير سوى بعض أهم التفاصيل. يمكنك الاطّلاع على الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 104 من Chrome.

اشتراك

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة YouTube الخاصة بمطوّري Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

اسمي "بيت ليبيه"، وسأكون هنا لإطلاعك على الميزات الجديدة في Chrome فور طرح الإصدار 105.