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

Adriana Jara

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

• يمكنك تعريف أنماط معيّنة داخل مكوِّن باستخدام قاعدة @scope css.
• تتوفّر ميزة وسائط جديدة: 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>

بدون نطاق، يكون النمط المطبق هو آخر نمط تم تعريفه.

بدون @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;
  }
}

لمزيد من المعلومات، يمكنك الاطّلاع على المقالة الحدّ من مدى وصول أدوات الاختيار باستخدام @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;
  }
}

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

لمزيد من المعلومات، يُرجى الاطّلاع على مستندات تفضيل-الشفافية المنخفضة.

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

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

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

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

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

ومقاييس أخرى

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

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

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

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

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

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

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

اشتراك

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

مرحبًا أدريانا جارا، وبمجرد إطلاق Chrome 119، سأكون هنا لإخبارك بالجديد في Chrome!