الميزات الجديدة في Chrome خلال الربع الأول من عام 2025: مربّع نص CSS وإمكانية الوصول إلى نظام الملفات على Android وتعديلات على Baseline وغير ذلك

Mariko Kosaka
X

لقد مرّ وقت طويل على آخر تواصل بيننا. لقد عدّنا بفيديو "الميزات الجديدة في Chrome" الذي يقدّم معلومات عن:

اسمي "ماريكو". لنلقِ نظرة على الميزات الجديدة في الإصدارات الثلاثة الأخيرة من Chrome.

مربّع نص CSS

تتيح لك سمة CSS text-box التحكّم في المسافة العمودية بدقة باستخدام مقاييس الخط.

يُنشئ كل خط مقدارًا مختلفًا من المساحة فوق الأحرف وتحتها، ما يحدّد حجم العنصر.

وكان من المستحيل التحكّم في حجم هذه المساحات حتى الآن.

يظهر عنوان مع مساحة زائدة فوقه يبدو أنّه تمّ قطعه بالمقص وإزالته.

تحدّد السمة الجديدة text-box-trim الجوانب التي يجب اقتصاصها، سواء من الأعلى أو الأسفل، بينما تحدّد السمة text-box-edge كيفية اقتصاصها. على سبيل المثال، يمكنك الاقتصاص عند ارتفاع الأحرف الكبيرة، وهو أعلى الأحرف الكبيرة.

يمكنك أيضًا كتابة ذلك باستخدام السمة المختصرة text-box.

اطّلِع على مزيد من المعلومات حول كيفية استخدام هذه السمات الجديدة في مقالة CSS text-box-trim.

واجهة برمجة التطبيقات File system access API

تمّت إضافة عنصر DOM الأوّلي Node.prototype.moveBefore في الإصدار 133 من Chrome، ويتيح لك هذا العنصر نقل العناصر في شجرة DOM بدون إعادة ضبط حالة العنصر.

عند إزالة عنصر ثم إعادة إدخاله لنقل عنصر DOM، ستتم إعادة ضبط حالة هذا العنصر. باستخدام هذا العنصر الأساسي الجديد، يتم الحفاظ على حالة عقدة.

وبالتالي، تظلّ إطارات iframe محملة، وتظلّ العناصر النشطة في المقدّمة، وتظلّ عناصر مثل النوافذ المنبثقة ومربّعات الحوار مفتوحة، وتستمرّ عمليات النقل أو الرسوم المتحرّكة في CSS.

طريقة الحفاظ على الحالة لنقل عنصر DOM

كانت واجهة برمجة التطبيقات File System Access API متاحة على إصدار Chrome Desktop منذ بعض الوقت. تتيح واجهة برمجة التطبيقات هذه لتطبيقات الويب التفاعل مع الملفات في نظام الملفات المحلي للمستخدم. اعتبارًا من الإصدار 132 من Chrome، أصبح واجهة برمجة التطبيقات متاحة على Android وفي WebViews أيضًا.

لقراءة ملف، اتصل على showOpenFilePicker(). تعرِض هذه الطريقة أداة اختيار ملفات، ثم تعرِض معرّف ملف يمكنك استخدامه لقراءة الملف.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

لحفظ ملف على القرص، يمكنك استخدام معرّف الملف نفسه الذي حصلت عليه سابقًا، أو يمكنك الاتصال showSaveFilePicker() للحصول على معرّف ملف جديد.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

ظهور رمز الإغلاق البسيط في عنصر <dialog>

إذا كنت قد استخدمت Popover API لإنشاء نافذة منبثقة، أنت تعلم أنّ إحدى الميزات الرائعة لواجهة برمجة التطبيقات Popover API هي سلوك الإغلاق الخفيف. يمكن للمستخدمين النقر على الخلفية وإغلاق عنصر النافذة المنبثقة بدون الضغط على زر الإغلاق تحديدًا.

تتوفّر الآن إمكانية إغلاق الإضاءة في عنصر <dialog> أيضًا.

عند ضبط سمة closedby على any، يمكن إغلاق مربّع الحوار بالنقر خارج مربّع الحوار أو الضغط على مفاتيح Escape.


<dialog closedby="any">...</dialog>

وهذا هو السلوك نفسه عند ضبط النافذة المنبثقة على "تلقائي".

التعديلات في "الجمهور الأساسي"

في ما يلي أخبار عن Baseline

بيانات مرجعية جديدة متاحة

أولاً، Baseline: وهي ميزات تم طرحها مؤخرًا في جميع المتصفحات الأربعة الرئيسية.

scrollbar-gutter وscrollbar-width

باستخدام خاصية CSS scrollbar-gutter، يمكنك حجز مساحة للشريط التمرير لتجنُّب تغييرات التنسيق غير المرغوب فيها عند ظهور شريط التمرير أو اختفائه. باستخدام scrollbar-width، يمكنك إنشاء شريط تمرير أضيق، أو حتى إخفاء شريط التمرير بالكامل بدون التأثير في إمكانية التمرير.

ruby-align

باستخدام سمة CSS ruby-align، يمكنك تحديد محاذاة النص الأساسي للغة Ruby ونص التعليق التوضيحي للغة Ruby.

Promise.try

Promise.try هي طريقة مناسبة لإجراء معالجة الأخطاء للطلبات المتزامنة. باستخدام هذا الإجراء، يمكنك التخلص من دوالّ ردّ الاتصال عند محاولة إجراء طلب باستخدام Promise.resolve.

تحسينات جمع القمامة وطلبات الاستدعاء النهائية في Wasm

يتيح WebAssembly الآن تحسينات جمع القمامة وطلبات الاستدعاء النهائية.

القاعدة الأساسية: متاحة على نطاق واسع

الصفيفان findLast() وfindLastIndex()

إنّ دالتَي الصفيف findLast() وfindLastIndex() هما طريقتان مناسبتان جدًا للحصول على العناصر من نهاية الصفيف. كانت هذه الميزة متاحة في جميع المتصفّحات الرئيسية لمدة 30 شهرًا، ما يعني أنّها متاحة الآن على نطاق واسع في Baseline.

سمات التحويل الفردية

أصبحت خصائص التحويل الفردية التي تمنحك إمكانية التحكّم بشكل أدق في عمليات التحويل في CSS متاحة الآن على نطاق واسع في الإصدار الأساسي أيضًا .

مزيد من المعلومات عن Baseline

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

يمكنك أيضًا الاطّلاع على مزيد من المعلومات حول الحالة الأساسية لأي ميزة في لوحة بيانات حالة منصّة الويب.

عودة مشروع إمكانية التشغيل التفاعلي لعام 2025

وأخيرًا، سيعود مشروع Interop في عام 2025 بقائمة بمجالات التركيز، بما في ذلك عمليات انتقال العرض وتحديد موضع عنصر الربط في CSS وNavigation API. يُرجى الاطّلاع على إعلان المشروع.

اشتراك

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

اسمي "ماريكو كوساك"، وسأعود إليك بعد ثلاثة أشهر لإطلاعك على مزيد من المعلومات حول الميزات الجديدة في Chrome.