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

Pete LePage

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

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

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

وهي أيضًا طريقة فعالة لتعويض ميزات CSS التي لا يتم دعمها في متصفّح حتى الآن

لدى سورما مشاركة رائعة مع العديد عروض توضيحية في الشرح الذي يقدّمه

واجهة برمجة تطبيقات وقت الخادم

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

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

يمكنك تتبع أي عدد تريده من المقاييس: أوقات قراءة قاعدة البيانات، ومدة بدء التشغيل، أو أي محتوى يهمّك، من خلال إضافة عنوان 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 لخاصية اللون الآن مطابقة مواصفات اللون 4 في CSS:
• أصبحت هناك سياسة ميزة جديدة تسمح التحكم في طلبات XHR المتزامنة من خلال عنوان HTTP أو سمة iframe allow

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

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