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

Adriana Jara

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

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

قاعدة @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; }

رابطان، الأول هو &quot; أنا وردي فاتح!&quot; نص الرابط الثاني هو &quot;وردي مختلف&quot;، كلا الرابطين باللون الوردي الفاتح، وتحت الروابط يقرأ نمط بيان ترتيب المصادر.

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

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

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

رابطان، الأول هو &quot;أنا زهري فاتح اللون!&quot; نص الرابط الثاني هو &quot;وردي مختلف&quot;، والرابط الثاني وردي أغمق، أسفل نص الروابط أقرب نمط أصل وبجواره علامة اختيار خضراء.

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

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

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

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

html أعلاه، مع الكلمات الموجودة في نطاق بجوار div الأول والثالث والكلمة المستثناة بجوار div الثاني والرابع.

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

ميزة واحدة (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.

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

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

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

قبل وبعد الطباعة الجميلة وتمييز بناء الجملة لنوع النص البرمجي لقواعد التوقُّع.

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

وغير ذلك

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

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

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

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

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

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

اشتراك

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

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