الميزات الجديدة في Chrome 93

Pete LePage

في ما يلي المعلومات التي يجب معرفتها:

اسمي بيت ليباج، أعمل وأصوّر من المنزل، لنتعرّف على الميزات الجديدة للمطوّرين في Chrome 93.

نصوص برمجية لوحدات CSS

يمكنك الآن تحميل أوراق أنماط CSS باستخدام عبارات import، تمامًا مثل وحدات JavaScript. ويمكن بعد ذلك تطبيق أوراق الأنماط على المستند أو جذور الظل بالطريقة نفسها التي يتم بها إنشاء أوراق الأنماط.

تُعدّ ميزة CSS Module Scripts الجديدة رائعة للعناصر المخصّصة. وعلى عكس الطرق الأخرى لتطبيق CSS من JavaScript، لا حاجة إلى إنشاء عناصر أو العبث بسلاسل JavaScript لنص CSS.

لاستخدامها، استورِد ورقة الأنماط باستخدام assert {type: 'css'}، ثم طبِّقها على document أو shadowRoot من خلال استدعاء adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

ولكن احذر، إذا تركت assert - فسيتم التعامل مع الملف على أنه JavaScript، ولن يعمل!

يمكنك الاطّلاع على مقالة استخدام نصوص CSS Module Scripts لاستيراد أوراق الأنماط على موقع web.dev للحصول على التفاصيل الكاملة.

Multi-Screen Window Placement API

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

تتيح واجهة Multi-Screen Window Placement API إمكانية تعداد الشاشات المتصلة بجهاز المستخدم ووضع النوافذ على شاشات معيّنة. هذه هي مرحلة التجربة والتقييم الثانية، وقد أجرينا عددًا من التغييرات استنادًا إلى ملاحظاتك.

يمكنك التحقّق بسرعة مما إذا كان هناك أكثر من شاشة متصلة بالجهاز:

const isExtended = window.screen.isExtended;
// returns true/false

ومع ذلك، تكمن الوظيفة الرئيسية في window.getScreens()، الذي يوفّر جميع التفاصيل حول الشاشات المرفقة.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

على سبيل المثال، يمكنك تحديد الشاشة الأساسية، ثم استخدام requestFullscreen() لعرض عنصر على تلك الشاشة.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

وتوفّر طريقة للاستماع إلى التغييرات، على سبيل المثال، إذا تم توصيل شاشة جديدة أو إزالتها.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

يمكنك الاطّلاع على مقالة "توم" إدارة شاشات متعددة باستخدام واجهة برمجة التطبيقات Multi-Screen Window Placement API على موقع web.dev الإلكتروني للحصول على نظرة متعمّقة.

دورة إصدار أقصر

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

وقد حان الوقت الآن، وسنطرح الإصدار Chrome 94 في 21 سبتمبر. يمكنك العثور على تواريخ الإصدارات المخطط لها لكل إصدار في تقويم Chrome.

ميزات جديدة في تطبيقات الويب التقدّمية

إذا كنت بصدد إنشاء تطبيق ويب تقدّمي، هناك مرحلتا تجربة وتقييم جديدتان يجب الاطّلاع عليهما.

معالِجات عناوين URL لتطبيقات الويب التقدّمية (PWA)

إذا كان لديك تطبيق ويب تقدّمي مثبَّت، ونقرت على رابط يؤدي إليه، من المحتمل أنّك تريد فتحه في التطبيق، وليس في علامة تبويب متصفّح.

من خلال تحديد url_handlers في بيان تطبيق الويب، وإضافة ملف web-app-origin-association إلى دليل .well-known/، يمكنك إعلام المتصفّح بأنّه إذا نقر المستخدم على رابط يؤدي إلى تطبيق الويب التقدّمي، يجب أن يفتح الرابط ضمن تطبيق الويب التقدّمي المثبّت.

مثال على url_handlers في ملف manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

مثال على ملف web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

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

تتوفّر جميع التفاصيل حول مرحلة التجربة والتقييم في مقالة تطبيقات الويب التقدّمية كمعالِجات لعناوين URL‏ على موقع web.dev الإلكتروني.

تراكب عناصر التحكّم في النوافذ

تؤدي ميزة "عرض عناصر التحكم في النوافذ" إلى توسيع مساحة العميل لتغطية النافذة بأكملها، بما في ذلك شريط العناوين وأزرار التحكّم في النافذة، مثل أزرار الإغلاق والتكبير والتصغير.

يمكنك استخدام هذه الميزة لجعل تطبيق الويب التقدّمي المثبَّت يبدو أكثر شبهًا بالتطبيقات المثبَّتة الأخرى.

لمزيد من المعلومات حول مرحلة التجربة والتقييم، يُرجى الاطّلاع على مقالة تخصيص شريط العناوين لواجهة Window Controls Overlay في تطبيق الويب التقدّمي (PWA).

مؤتمر PWA Summit

سيتم عقد مؤتمر PWA في أكتوبر. وهو مؤتمر مجاني على الإنترنت يركّز على مساعدة الجميع في تحقيق النجاح باستخدام "تطبيقات الويب التقدّمية". مؤتمر PWA Summit هو ثمرة تعاون بين مجموعة من الأشخاص من شركات مختلفة تشارك في إنشاء تكنولوجيات تطبيقات الويب التقدّمية (PWA)، وهي Google وIntel وMicrosoft وSamsung.

هناك الكثير من المحادثات والمحتوى الرائع. يمكنك الاطّلاع على مزيد من المعلومات والتسجيل على PWASummit.org.

وغير ذلك

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

  • تمت إضافة دعم للكلمات الرئيسية الخاصة بالمحاذاة في نموذج flexbox وعناصر flexbox: start وend وself-start وself-end وleft وright.
  • تتيح واجهة برمجة التطبيقات Async Clipboard API الآن استخدام ملفات SVG.
  • وسيتم استخدام السمة media عند ضبط meta theme-color، ما يتيح لك تحديد ألوان مظهر مختلفة للوضعَين الفاتح والداكن.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

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

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

اشتراك

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

أنا "بيت ليباج"، وسأكون هنا فور إصدار Chrome 94 لأخبرك بالميزات الجديدة في Chrome.