الميزات الجديدة في الويب

Rachel Andrew

تاريخ النشر: 20 مايو 2025

في مؤتمر Google I/O لعام 2025، تم الإعلان عن جميع الميزات الجديدة في Baseline خلال الجلسة الرئيسية، بالإضافة إلى إلقاء نظرة على بعض الميزات التي أصبحت جزءًا من Baseline هذا العام. لقد كان هذا العام رائعًا بالنسبة إلى الويب، وبالنسبة إلى Baseline، هذه المشاركة هي ملخّص لكل ما تم ذكره، مع جميع الروابط لمعرفة المزيد.

لوحة بيانات "منصّة الويب" وميزات الويب

في عام 2024، أعلنّا عن إطلاق لوحة بيانات منصّة الويب، التي تستخدم مجموعة بيانات ميزات الويب، ما يتيح لك استكشاف جميع الميزات التي تشكّل جزءًا من Baseline.

أصبحت بيانات ميزات الويب الآن مكتملة، وتم ربط جميع ميزات المنصة. مع إضافة ميزات جديدة إلى Baseline كل شهر، يتم تعديل البيانات، ويتم عرض كل ذلك في لوحة البيانات.

أدوات لمساعدتك في تحديد هدف "الأداء الأساسي" الخاص بك

على الرغم من أنّ سياسة توافق المتصفّحات قد تستند إلى معيار Baseline Widely available المتغيّر باستمرار، مثل وكالة Clearleft في المملكة المتحدة، يمكنك أيضًا اعتماد معيار ثابت استنادًا إلى سنة الإصدار من Baseline. يمكنك الآن استخدام بيانات المستخدمين الخاصة بك، بالإضافة إلى بيانات ميزات الويب، من أجل تحديد أفضل استهداف لك.

أعلنّا في مؤتمر I/O العام الماضي أنّ RUMvision ستدمج Baseline في منتجها، وقد أصبح هذا الدمج متاحًا الآن.

وبما أنّها تستخدم بيانات مراقبة تجربة المستخدم الحقيقية، تساعدك في تحديد سنة الأساس التي يجب اعتمادها استنادًا إلى تلك البيانات بدلاً من المتوسط العالمي. يمكن أن يساعدك أيضًا في معرفة ما إذا كان Baseline Widely available مناسبًا لك.

يمكنك أيضًا استخدام بياناتك على "إحصاءات Google" لمعرفة النسبة المئوية للمستخدمين الذين يستوفون كل هدف من أهداف Baseline بوضوح باستخدام أداة التحقّق من Baseline في "إحصاءات Google" الجديدة.

هاتان مجرد أداتين من مجموعة متزايدة من الأدوات التي تساعدك في ربط بيانات المستخدمين الفعليين بـ Baseline.

أطلق فريق Web DX Community Group مؤخرًا إضافة لـ Netlify تتيح استخدام مختلف إصدارات Baseline المتوافقة على نطاق واسع على مواقعك الإلكترونية لمساعدتك في تحديد ما يجب استهدافه في أدوات الإنشاء. ستتوفّر قريبًا عمليات دمج مع منتج Observatory RUM من Cloudflare وContentsquare.

دمج البيانات مع أدواتك الخاصة

بيانات ميزات الويب مفتوحة المصدر ومتاحة لعمليات الدمج الخاصة بك. ونحن نعمل على تسهيل هذه العملية.

يمكنك استخدام Web Platform Dashboard API أو استهلاك بيانات ميزات الويب مباشرةً من حزمة npm.

يمكنك الآن ربط إصدارات المتصفّح باستهداف Baseline باستخدام وحدة baseline-browser-mapping من مجموعة WebDX Community Group التابعة لاتحاد شبكة الويب العالمية (W3C). يمكن استخدام هذه الوحدة في بيئة JavaScript من جهة الخادم، أو عن طريق تنزيل ملفات JSON أو CSV يتم تعديلها يوميًا من المستودع.

وتشمل هذه البيانات عمليات الربط ليس فقط لمجموعة متصفحات Baseline الأساسية، ولكن أيضًا للمتصفحات الثانوية، مثل Samsung Internet وOpera وUC Browser وAndroid Webview.

معرفة ما إذا كانت الميزات متوافقة مع استهداف "خط الأساس"

تتوفّر معلومات حول خط الأساس الآن على معظم صفحات MDN وCan I Use، ويمكن العثور عليها أيضًا في "لوحة بيانات المنصّة الإلكترونية"، وفي المقالات على web.dev وCSS Tricks. ومع ذلك، يتطلّب كل ذلك البحث عن الدعم. سيكون من المفيد أكثر عرض معلومات Baseline في بيئة التطوير المتكاملة (IDE) أثناء كتابة الرمز البرمجي، وكجزء من جميع الأدوات الأخرى التي تستخدمها.

يسرّنا إعلامك بأنّ العديد من الأدوات الرئيسية تتضمّن الآن ميزة Baseline أو يمكن دمجها بسهولة.

browserslist-config-baseline

تستخدم العديد من الأدوات، مثل Babel وPostCSS، أداة browserslist لتحديد المتصفحات التي يجب أن تتوافق معها.

بالتعاون مع مجموعة WebDX CG وأعضاء المنتدى، ساعد فريق Chrome في إطلاق أداة جديدة باسم browserslist-config-baseline. يتيح لك ذلك ضبط استهدافات browserslist في بنود Baseline، مثل المتاحة على نطاق واسع أو سنوات Baseline.

وبذلك، يمكن الآن التعبير عن أي أداة تستخدم هدف browserslist من خلال Baseline.

يمكنك الاطّلاع على مزيد من المعلومات في مقالة استخدام Baseline مع browserslist.

الخط الأساسي في أدوات التدقيق اللغوي، مثل ESLint وStylelint

أصبح من الممكن مؤخرًا استخدام Baseline مع أدوات التدقيق اللغوي بفضل بعض الأدوات الجديدة في مساحة أدوات التدقيق اللغوي، بدءًا من ESLint لملفات CSS.

تتضمّن قاعدة ESLint الأساسية قاعدة use-baseline. يمكنك ضبط هذا الخيار على الإصدار الأساسي المفضّل لديك، وسيتم تنبيهك عند استخدام أي ميزات أحدث من الإصدار الأساسي الذي اخترته. يمكنك اختيار طريقة حلّ هذه التحذيرات، إما عن طريق استبدال هذه الميزة بعناصر أساسية أو عن طريق تجاهل تحذير أداة التدقيق، وهو حلّ صالح تمامًا عندما تعرف أنّك تستخدم ميزة متطورة بأمان، على سبيل المثال إذا كانت تحسينًا تدريجيًا.

بشكلٍ تلقائي، لن تحذّر ESLint إذا تم استخدام ميزات أحدث ضمن كتل @supports ، لأنّ المتصفحات غير المتوافقة لن تقيّمها على أي حال.

لتلبية احتياجاتك في تدقيق HTML، يتوفّر أيضًا مكوّن إضافي تابع للمنتدى يُسمى html-eslint.

يتوافق Stylelint رسميًا مع مكوّن إضافي اسمه stylelint-plugin-use-baseline. يتشابه سلوك هذه القاعدة مع قاعدة ESLint الخاصة بملفات CSS، ولكن يتم تنفيذها على Stylelint بدلاً من ذلك.

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

الجمهور الأساسي في VS Code وJetBrains WebStorm

تتيح العديد من بيئات التطوير المتكاملة (IDE) منذ فترة طويلة إمكانية تمرير مؤشر الماوس فوق إحدى الميزات في المحرّر وعرض قائمة بإصدارات المتصفّح المتوافقة.

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

لحلّ هذه المشكلة، تعاونّا مع VS Code، وهو بيئة التطوير المتكاملة الأكثر استخدامًا من قِبل ملايين مطوّري الويب، لدمج بيانات Baseline مباشرةً في بطاقات المعاينة هذه.

يمكنك الآن تمرير مؤشر الماوس فوق إحدى الميزات، وسيتم إخبارك ما إذا كانت الميزة تُعدّ من ميزات Baseline ومدة توفّرها، أو ما إذا كانت هناك أي متصفحات رئيسية لم تنفّذها بالكامل بعد.

تشمل الميزات المتوافقة خصائص CSS وعناصر HTML وسمات HTML. يمكنك الاطّلاع على مزيد من المعلومات في Visual Studio Code يتيح الآن استخدام Baseline.

يعني هذا الدمج أنّ أي بيئات تطوير متكاملة (IDE) مستندة إلى VS Code ستستفيد أيضًا من بطاقات المعلومات المنبثقة هذه.

يسرّنا أيضًا الإعلان عن أنّ JetBrains ستدمج البطاقات المنبثقة في بيئة التطوير المتكاملة WebStorm JavaScript وTypeScript.

الويب يتحسّن بوتيرة أسرع من أي وقت مضى

نأمل أن يساعدك Baseline في الاستفادة من حقيقة أنّ الويب المتوافق يتحسّن بشكل أسرع من أي وقت مضى.

يمكنك استخدام "لوحة بيانات النظام الأساسي على الويب" للاطّلاع على جميع الميزات التي أصبحت متاحة حديثًا في Baseline خلال آخر اثني عشر شهرًا، أي منذ مؤتمر Google I/O 2024.

هناك أيضًا عدد من الميزات التي يمكنك التأكّد من أنّها ستتوفّر قريبًا جدًا في Baseline Newly، لأنّها مضمّنة في مشروع Interop 2025. يمكنك الاطّلاع على جميع الميزات المضمّنة في Interop2025: عام آخر من التحسينات على منصة الويب.

أوضاع الكتابة بشكل جانبي

لقد رأينا إحدى الميزات تصبح متاحة حديثًا في Baseline، وهي القيمتان sideways-rl وsideways-lr للخاصية writing-mode في CSS. إذا كنت تستخدم وضع الكتابة العمودي لأغراض التنسيق فقط، من المرجّح أن تكون قيم الكتابة الجانبية هي الأنسب لك.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

موضع التثبيت

تم طرح ميزة تحديد موضع العنصر الثابت في الإصدار 125 من Chrome. تتيح لك هذه السمة ربط موضع عنصر بموضع عنصر آخر، مثلاً عند فتح تلميح باستخدام زر.

تمت إضافة هذه الميزة إلى Interop 2025، لذا من المفترض أن تنضم إلى Baseline هذا العام.

مؤشرات Core Web Vitals: سرعة عرض أكبر محتوى مرئي (LCP) ومدى استجابة الصفحة لتفاعلات المستخدم (INP)

LCP API

واجهة برمجة التطبيقات Event Timing API (لمقياس INP)

يمكن أن تساعدك مؤشرات Web Vitals في قياس تجربة موقعك الإلكتروني وتحديد فرص التحسين. تهدف مبادرة Web Vitals إلى تبسيط المشهد ومساعدة المواقع الإلكترونية في التركيز على المقاييس الأكثر أهمية، أي Core Web Vitals.

يتضمّن مشروع Interop 2025 مقياسَي سرعة عرض أكبر محتوى مرئي (LCP) ومدة عرض الاستجابة لتفاعل المستخدم (INP) من خلال تنفيذ واجهة برمجة التطبيقات LargestContentfulPaint وواجهة برمجة التطبيقات Event Timing على جميع المتصفّحات.

تحسينات على العنصر <details>

يتوفّر العنصر <details> نفسه على نطاق واسع في Baseline. تم تضمينها في Interop 2025 لأنّ هناك عددًا من الميزات التي تجعل أدوات الإفصاح مع <details> أكثر فائدة.

يحتوي عنصر <details> على عنصر <summary> وهو الجزء المرئي على الصفحة عندما يكون عنصر <details> مضغوطًا. خارج العنصر <summary>، يظهر محتوى العنصر <details>، ويكون هذا المحتوى مخفيًا إلى أن ينقر المستخدم على الملخّص.

من بين الميزات التي سيتم توفير إمكانية التشغيل التفاعلي لها خلال Interop 2025، ميزة إخفاء المحتوى باستخدام content-visibility بدلاً من display، ما يعني أنّه إذا لم يتم توسيع المحتوى، لن يتم عرضه على الإطلاق.

يتضمّن عمل Interop 2025 أيضًا العنصر الزائف ::marker. يتيح لك العنصر الزائف ::marker تنسيق مثلث الإفصاح الخاص بالعنصر <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

بعد ذلك، عنصر زائف آخر، وهو ::details-content.

يمثّل ::details-content المحتوى، أي الجزء من عنصر التفاصيل الذي يمكن توسيعه وتصغيره، كما يتيح لك تنسيقه.

[open]::details-content {
  border: 5px dashed hotpink;
}

أضفنا أيضًا بعض التحسينات الرائعة، مثل التوسيع التلقائي للعنصر <details> عند العثور على تطابقات في الصفحة، ونقل قيمة until-found الخاصة بالسمة hidden في HTML إلى Baseline Newly available. يؤدي ذلك إلى إخفاء عنصر إلى أن يتم العثور عليه باستخدام ميزة البحث في الصفحة في المتصفّح أو الانتقال إليه مباشرةً من خلال اتّباع جزء من عنوان URL.

CSS @scope

تتيح لك قاعدة @scope في CSS حصر مدى وصول أدوات الاختيار. من خلال ضبط جذر النطاق باستخدام @scope، لا تنطبق أي قواعد نمط مضمّنة داخل قاعدة at-rule إلا على شجرة DOM هذه.

على سبيل المثال، إذا كنت تريد استهداف عناصر <img> فقط داخل عنصر يحمل الفئة .card، سيصبح .card هو جذر النطاق.

@scope (.card) {
    img {
        border-color: green;
    }
}

يمكنك الاطّلاع على مزيد من المعلومات في المقالة الحدّ من مدى وصول أدوات الاختيار باستخدام قاعدة ‎ @scope في CSS.

scrollend

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

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

باستخدام حدث scrollend، يتولّى المتصفّح إجراء كل عمليات التقييم الصعبة هذه نيابةً عنك.

document.onscrollend = event => {…}

يمكنك الاطّلاع على المزيد من الأمثلة في Scrollend، وهو حدث JavaScript جديد.

انتقالات العرض في المستند نفسه

أخيرًا وليس آخرًا، تُعدّ عمليات الانتقال بين طرق العرض جزءًا من Interop 2025. يتضمّن العمل انتقالات العرض داخل المستند نفسه، لذا يتضمّن أيضًا انتقالات العرض لفئة تطبيقات الصفحة الواحدة.

يمكنك متابعة لوحة بيانات Interop 2025 لمعرفة مدى تقدّم المشروع خلال العام.

لن تكون الميزات المضمّنة في Interop 2025 هي الميزات الوحيدة التي ستصبح جزءًا من Baseline هذا العام، ولكن تضمينها في المشاريع يشير إلى أنّها من الأولويات وسيتم طرحها قريبًا.

ما هذه سوى البداية

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

ننصحك بمتابعة web.dev لأنّنا سنواصل نشر إشعارات حول الأدوات الجديدة بالإضافة إلى برامج تعليمية لمساعدتك في الاستفادة من كل ما يقدّمه الويب.