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

Adriana Jara

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

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

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

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

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

قاعدة @scope في CSS

تسمح قاعدة @scope في القاعدة للمطوّرين بتحديد نطاق قواعد النمط لجذر نطاق محدد وعناصر النمط وفقًا لقُرب جذر النطاق المحدد.

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

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

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

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

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

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

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

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

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

<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.

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

وغير ذلك

بالطبع هناك الكثير.

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

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

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

مراجع إضافية

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

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

اشتراك

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

مرحبًا أدريانا جارا، وفور طرح Chrome 119، سأكون على أتمّ استعداد لإخبارك بالميزات الجديدة في Chrome.