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

بيت ليبيج

  • تتيح لك CSS Paint API إنشاء صورة بطريقة آلية.
  • تسمح واجهة برمجة تطبيقات Server Timing لخوادم الويب بتقديم معلومات توقيت الأداء عبر عناوين HTTP.
  • يمكن أن تؤدي السمة display: contents في CSS الجديدة إلى اختفاء المربعات!

وهناك الكثير غيرها.

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

هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ راجِع قائمة تغييرات مستودع مصدر Chromium.

واجهة برمجة تطبيقات CSS Paint

تتيح لك CSS Paint API إنشاء صورة آليًا لسمات CSS مثل background-image أو border-image.

بدلاً من الإشارة إلى صورة، يمكنك استخدام دالة الطلاء الجديدة لرسم الصورة - مثل عنصر لوحة الرسم إلى حد كبير.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

على سبيل المثال، بدلاً من إضافة عناصر DOM الإضافية لإنشاء تأثير تمويج على زر بتصميم متعدد الأبعاد، يمكنك استخدام Paint API.

كما أنها طريقة فعالة لتعويض ميزات CSS غير المتاحة في المتصفح بعد.

نشر "سورما" مشاركة رائعة تتضمّن العديد من العروض التوضيحية في الشرح الخاص به.

واجهة برمجة تطبيقات Server Timing

نأمل أنك تستخدم واجهات برمجة التطبيقات الخاصة بالتنقل وتوقيت الموارد في تتبّع أداء موقعك الإلكتروني للمستخدمين. حتى الآن، لم تكن هناك طريقة سهلة للخادم للإبلاغ عن توقيت أدائه.

تتيح واجهة برمجة تطبيقات توقيت الخادم الجديدة لخادمك تمرير معلومات التوقيت إلى المتصفح، ما يمنحك صورة أفضل عن أدائك الإجمالي.

يمكنك تتبّع أي عدد تريده من المقاييس، مثل أوقات قراءة قاعدة البيانات أو وقت بدء التشغيل أو أي مقياس مهم بالنسبة إليك، عن طريق إضافة عنوان Server-Timing إلى ردك:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

ويتم عرضها في "أدوات مطوري البرامج في Chrome"، أو يمكنك سحبها من عنوان الردّ وحفظها في إحصاءات الأداء الأخرى.


display: contents

ميزة display: contents في CSS الجديدة رائعة جدًا.

وعند إضافته إلى عنصر حاوية، يأخذ أي عنصر ثانوي مكانه في DOM، ويختفي بشكل أساسي. لنفترض أن لدي اثنين من div، أحدهما داخل الآخر. يحتوي div الخارجي على حد أحمر وخلفية رمادية وقد ضبطت العرض 200 بكسل. يتميّز div الداخلي بحدود زرقاء وخلفية زرقاء فاتحة.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

بشكلٍ تلقائي، يتم تضمين div الداخلي في div الخارجي.

أنا قلبي <div>

من خلال إضافة display: contents إلى عنصر div الخارجي، يختفي div الخارجي ولا يتم تطبيق قيوده على عنصر div الداخلي. أصبح جزء div الداخلي الآن عرضًا بنسبة 100%.

يمكنك استخدام أدوات مطوّري البرامج لفحص نموذج العناصر في المستند (DOM) وملاحظة أنّ عنصر div الخارجي لا يزال متوفرًا.

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

ولكن بعد تطبيق display: contents على طفل، تصبح عناصره الثانوية عناصر مرنة ويتم وضعها باستخدام القواعد نفسها التي كان سيتم تطبيقها على والدَيه.

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

ومقاييس أخرى

هذه ليست سوى عدد قليل من التغييرات التي طرأت على الإصدار 65 من Chrome للمطوّرين، وبالطبع هناك الكثير من التغييرات الأخرى.

  • أصبحت بنية تحديد HSL وHSLA وإحداثيات RGB وRGBA لخاصية اللون تتطابق الآن مع مواصفات CSS Color 4.
  • تتوفّر سياسة ميزات جديدة تسمح لك بالتحكّم في طلبات XHR المتزامنة من خلال عنوان HTTP أو سمة allow إطار iframe.

احرص على الاطّلاع على الجديد في "أدوات مطوري البرامج في Chrome"، لمعرفة الميزات الجديدة في "أدوات مطوري البرامج" في الإصدار 65 من Chrome. وإذا كنت مهتمًا بتطبيقات الويب التقدّمية، يمكنك الاطّلاع على سلسلة فيديوهات ترويجية حول PWA. بعد ذلك، انقر على الزر اشتراك في قناتنا على YouTube وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

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