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

Rachel Andrew

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

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

لوحة بيانات "قاعدة الويب" وميزات الويب

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك الآن ربط إصدارات المتصفّح باستهداف Baseline باستخدام وحدة baseline-browser-mapping من مجموعة W3C WebDX Community Group. يمكن استخدام هذه الوحدة في بيئة 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 أثناء الترميز من خلال خطوط متعرّجة تحت الكلمات.

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 (لمقياس INP)

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

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

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