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

Pete LePage

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

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

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

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

تتيح لك 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 API الجديدة لخادمك بتمرير معلومات التوقيت إلى المتصفّح، ما يمنحك صورةً أفضل عن أدائك الإجمالي.

يمكنك تتبُّع أيّ عدد تريده من المقاييس: أوقات قراءة قاعدة البيانات أو مدة بدء التشغيل أو أيّ بيانات مهمّة بالنسبة إليك، من خلال إضافة عنوان 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 على وحدة فرعية، تصبح عناصرها الثانوية عناصر مرنة، ويتم وضعها باستخدام القواعد نفسها التي كان من الممكن تطبيقها على العناصر الرئيسية.

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

وغير ذلك

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

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

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

اسمي بيت ليبيج، وفور طرح Chrome 66، سأكون في انتظارك لأخبرك عن كل ما هو جديد في Chrome.