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

Pete LePage

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

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

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

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

ميزة النصوص البرمجية لوحدة CSS الجديدة رائعة للعناصر المخصّصة. وعلى عكس الطرق الأخرى لتطبيق 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 لاستيراد أوراق الأنماط على web.dev للحصول على تفاصيل كاملة.

واجهة برمجة التطبيقات لمواضع النوافذ المتعددة الشاشات

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

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

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

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

راجع مقالة توم إدارة شاشات متعددة باستخدام واجهة برمجة تطبيقات نافذة متعدد الشاشات على web.dev للحصول على مزيد من التفاصيل.

دورة إصدار مختصرة

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

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

ميزات تطبيق الويب التقدّمي (PWA) الجديدة

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

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

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

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

مثال على 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/*"]
      }
    }
  ]
}

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

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

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

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

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

لمزيد من المعلومات عن مرحلة التجربة والتقييم، اطّلِع على المقالة تخصيص عناصر التحكّم في النوافذ على شريط العناوين في تطبيق الويب التقدّمي (PWA).

قمة PWA

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

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

ومقاييس أخرى

بالطبع هناك المزيد.

  • أتاحت عناصر Flexbox وflexbox توافق الكلمات الرئيسية التالية: start وend وself-start وself-end وleft وright.
  • تتيح واجهة برمجة التطبيقات للحافظة غير المتزامنة الآن استخدام ملفات 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 على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني كلّما أطلقنا فيديو جديدًا.

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