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

Adriana Jara

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

• يمكنك تحديد أنماط معيّنة داخل مكوّن باستخدام قاعدة css‏ @scope.
• تتوفّر ميزة وسائط جديدة: prefers-reduced-transparency.

• تتضمّن "أدوات مطوّري البرامج" تحسينات في لوحة المصادر.

• وهناك الكثير من الميزات الأخرى.

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

قاعدة @scope في CSS

تسمح قاعدة at-rule‏ @scope للمطوّرين بتحديد نطاق قواعد الأنماط لعنصر جذر تحديد نطاق معيّن، وتنسيق العناصر وفقًا لاقتراب هذا العنصر الجذر لتحديد النطاق.

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

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

بدون نطاق، يكون النمط المُطبَّق هو النمط الأخير الذي تمّ الإعلان عنه.

بدون @scope

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

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

مع @scope

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

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

بدون @scope

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

مع @scope

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

باستخدام النطاق، يمكنك أيضًا تصميم مكوّن بدون تصميم عناصر معيّنة مضمّنة فيه. وبطريقة ما، يمكن أن يكون لديك "ثغرات" لا ينطبق فيها النمط على مستوى التطبيق.

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

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

اطّلِع على المقالة حصر مدى وصول أدوات الاختيار باستخدام قاعدة CSS @scope للحصول على مزيد من المعلومات.

ميزة prefers-reduced-transparency في الوسائط

نستخدم طلبات البحث عن الوسائط لتقديم تجارب للمستخدمين تتكيّف مع إعداداتهم المفضّلة وظروف أجهزتهم. يضيف إصدار Chrome هذا قيمة جديدة يمكن استخدامها لتكييف تجربة المستخدم: prefers-reduced-transparency.

من القيم الجديدة التي يمكنك اختبارها باستخدام طلبات البحث عن الوسائط هي prefers-reduced-transparency التي تتيح للمطوّرين تكييف محتوى الويب مع الإعدادات المفضّلة التي يختارها المستخدم لتقليل الشفافية في نظام التشغيل، مثل إعداد "تقليل الشفافية" على نظام التشغيل macOS. الخياران الصالحان هما reduce أو no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

يمكنك التحقّق من شكلها باستخدام "أدوات مطوّري البرامج":

لمزيد من المعلومات، يُرجى الاطّلاع على مستندات prefers-reduced-transparency.

تصحيح: أشار إصدار سابق من هذه المقالة إلى ميزة وسائط جديدة scripting في هذا الإصدار. ستتوفّر في الإصدار 120.

تحسينات على لوحة "المصادر" في "أدوات مطوّري البرامج"

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

يمكنك أيضًا الآن إعادة ترتيب الأقسام على الجانب الأيسر من لوحة المصادر عن طريق السحب والإفلات، ويمكن الآن للوحة المصادر طباعة JavaScript المضمّنة بشكل جميل ضمن أنواع النصوص البرمجية التالية: module وimportmap وspeculationrules، كما يمكنها تمييز بنية نوعَي النصوص البرمجية importmap وspeculationrules، وكلاهما يحتوي على JSON.

يمكنك الاطّلاع على الميزات الجديدة في "أدوات مطوّري البرامج" لمعرفة المزيد من المعلومات عن تحديثات "أدوات مطوّري البرامج" في الإصدار 118 من Chrome.

وغير ذلك

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

• أصبحت WebUSB API متاحة الآن لعمال الخدمة المسجّلين من خلال إضافات المتصفّح، ما يتيح للمطوّرين استخدام واجهة برمجة التطبيقات عند الاستجابة لأحداث الإضافات.

• لمساعدة المطوّرين على تقليل الصعوبات في عمليات طلب الدفعات، سنزيل شرط تفعيل المستخدم في Payment Request وSecure Payment Confirmation.

• أصبحت دورة إصدار Chrome أقصر، وسيتم إصدار الإصدارات الثابتة كل ثلاثة أسابيع، بدءًا من الإصدار 119 من Chrome الذي سيتم طرحه بعد ثلاثة أسابيع.

مراجع إضافية

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

• الميزات الجديدة في الإصدار 118 من "أدوات مطوّري البرامج في Chrome"
• الميزات التي سيتم إيقافها نهائيًا أو إزالتها في الإصدار 118 من Chrome
• تعديلات ChromeStatus.com على الإصدار 118 من Chrome
• قائمة التغييرات في مستودع مصدر Chromium
• تقويم إصدارات Chrome

اشتراك

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

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