الجديد في Chrome 104

Pete LePage

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

اسمي بيت ليب. لنتعمق أكثر ونتعرف على الميزات الجديدة للمطورين في Chrome 104.

تحديد منطقة اقتصاص مع التقاط أجزاء من المنطقة

يتيح لك 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 لإعادة كتابة البنية الجديدة إلى البنية القديمة، ما يضمن توافق المتصفّح.

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

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

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

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

إليك مثال تقريبي على كيفية عمل الانتقالات لتطبيق صفحة واحدة. في دالة التنقل، احصل على محتوى الصفحة الجديدة، ثم تحقق لمعرفة ما إذا كانت الانتقالات متاحة، وإذا لم تكن متاحة، يمكنك تحديث الصفحة بدون عناصر انتقال. في هذه الحالة، يمكنك إنشاء عنصر 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 يوم كحد أقصى.
  • هناك تحسينات على واجهة برمجة التطبيقات لمواضع النوافذ المتعددة الشاشات.
  • وتحدّد السمة overflow-clip-margin CSS مدى السماح بعرض محتوى العنصر قبل اقتصاصه.

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

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

اشتراك

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

اسمي بيت ليب، وبعد إطلاق Chrome 105، سأكون هنا لإخبارك بالجديد في Chrome!