تاريخ النشر: 31 آذار (مارس) 2025
لقد مرّ شهر آخر، وحدثت الكثير من التغييرات منذ الملخّص الشهري الأخير لبرنامج Baseline. في هذا العدد، سنلخّص بعض المشاركات التي نشرناها هنا على web.dev، وبعض الميزات الجديدة التي تم طرحها في Baseline، وبعض التعديلات على الأدوات في المنتدى.
تم طرح الإصدار 0.6.0 من ESLint
لقد نشرنا مؤخرًا أخبارًا حول إطلاق ESLint لدعم فحص CSS. كان جزء من هذا الإطلاق قاعدة ESLint جديدة، وهي require-baseline، لفحص أخطاء ميزات CSS التي تستخدمها في مشروعك، وما إذا كانت تصل إلى حدّ مرجعي محدّد.
أطلقت ESLint مؤخرًا الإصدار 0.6.0 من حزمة @eslint/css، الذي يتضمّن تحديثًا جديدًا مهمًا يعيد تسمية قاعدة require-baseline إلى use-baseline. على الرغم من أنّ هذا التعديل يبدو بسيطًا، إلا أنّه يحسّن من سهولة قراءة القاعدة. يتضمّن هذا الإصدار أيضًا بعض الميزات المهمة الأخرى وإصلاحات الأخطاء، مثل الميزة المضافة لقاعدة use-baseline لفحص أخطاء ملفات CSS المتداخلة. إذا كنت تستخدم إصدارًا سابقًا من @eslint/css، ننصحك بالاطّلاع على هذا التعديل.
كيفية طلب بيانات من لوحة بيانات منصة الويب
في وقت سابق من هذا الشهر، نشرنا مشاركة عن طلب بيانات لوحة بيانات منصة الويب. يمكن إجراء طلب بحث في لوحة البيانات هذه من خلال واجهتها الأمامية، بالإضافة إلى استخدام واجهة برمجة تطبيقات HTTP. يمكن أن يكون ذلك مفيدًا لأدوات Baseline، لأنّه يمكنك طلب البحث من واجهة برمجة التطبيقات للعثور على الميزات التي بلغت حدًا معيّنًا من Baseline.
يمكن أن تكون واجهة برمجة التطبيقات هذه مفيدة للأدوات التي تحتاج فيها إلى الحصول بسرعة على معلومات عن ميزات معيّنة. على سبيل المثال، يمكنك استخدام هذا النوع من الأدوات لكتابة نص برمجي يُعلمك في فترات زمنية معيّنة بالميزات التي أصبحت مؤخرًا متوفّرة بشكل أساسي أو متوفّرة على نطاق واسع. إذا كان هذا الإجراء مفيدًا لك، ننصحك بقراءة المقالة.
كيفية التفكير في Baseline وpolyfills
تتمثل مهمة Baseline في توضيح الميزات التي يمكنك استخدامها بأمان، ولكن حتى مع هذا التوضيح الإضافي، لا يزال عليك التفكير في كيفية استخدام الميزات بطريقة منطقية لتطبيقات الويب. وتعدّ تطبيقات Polyfill جزءًا كبيرًا من هذه العملية. لا يأخذ مقياس الأداء الأساسي في الاعتبار وحدات polyfill في ما إذا كانت الميزات متاحة حديثًا أو على نطاق واسع، ولا يحاول إخبارك بما إذا كان عليك استخدامها. يرتبط هذا القرار بتطبيقك، ولكنه يُعدّ عاملاً مهمًا يجب أخذه في الاعتبار.
لقد نشرنا مؤخرًا مقالة عن كيفية التفكير في Baseline وpolyfills، ونعتقد أنّها توفّر إطار عمل مفيدًا للتفكير في كيفية استخدامها. نأمل أن تصبح مكونات polyfill أقل ضرورةً مع توفّر الميزات بشكل أساسي أو على نطاق واسع. لا شكّ في أنّ أدوات الملء اللاحق هي أدوات مفيدة في مجموعة أدوات التطوير، ولكنّ لها عيوبًا، إذ يمكن أن يكون لها تأثير سلبي في أداء موقعك الإلكتروني، وقد تؤدي في بعض الحالات إلى مشاكل في تسهيل الاستخدام. نأمل أن يساعدك هذا الدليل في الإجابة عن هذا السؤال الصعب.
contenteditable="plaintext-only" متاحة الآن كخط أساس
تسمح سمة contenteditable في عنصر HTML للمستخدم بتغيير محتواه كما لو كان حقل نص. وهذا يعني، على سبيل المثال، أنّه يمكنك وضع السمة على عنصر <p> ويمكن للمستخدم التفاعل معه مثل <textarea>. في بعض حالات الاستخدام، يقدّم استخدام contenteditable مزايا مقارنةً بعناصر النماذج العادية.
ومع ذلك، يلصق المستخدمون محتوًى في العناصر القابلة للتعديل، ويمكن أن يحتوي هذا المحتوى على تنسيق نص منسق، ما قد يتسبب في تجربة محبطة للمستخدمين الذين يريدون فقط لصق نص غير منسق في حقل. تمنع تركيبة السمة/القيمة contenteditable="plaintext-only" حدوث ذلك، وأصبحت مؤخرًا متاحة للاستخدام في "البيانات الأساسية". لمعرفة المزيد من المعلومات، يمكنك قراءة المشاركة التي تتضمن الإشعار والتعرّف على كيفية توفير تجربة تعديل أفضل للمستخدمين الذين يريدون ببساطة لصق نص في تطبيقات معيّنة بدون أي ميزات إضافية.
Intl.DurationFormat متاحة الآن كخيار أساسي
من المرجّح أنّك زرت موقعًا إلكترونيًا في مرحلة ما من حياتك ورأيت بعض النصوص التي تشير إلى المدة الزمنية التي تفصلك عن حدث معيّن أو التي تلي هذا الحدث، وغالبًا ما تكون هذه المدة معروضة في سلسلة مثل "يومان و6 ساعات و3 دقائق". هذه البيانات مفيدة لتوصيل أي عدد من المعلومات في الوقت المناسب، ولكن غالبًا ما تقدّمها مكتبة. بالإضافة إلى ذلك، قد تحتاج إلى عرض هذه المعلومات بلغات متعدّدة.
أدخِل Intl.DurationFormat، وهي ميزة لتكييف المحتوى مع معايير لغوية مختلفة أصبحت متوفّرة مؤخرًا في Baseline. باستخدام فئة Intl.DurationFormat، يمكنك تمرير عنصر إلى عنصر الإنشاء الخاص به يحتوي على وحدات الوقت التي تريد تنسيقها في سلسلة، وبأي لغة تريدها تقريبًا:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
والميزة المثيرة في ذلك هي أنّه إذا كان تطبيقك يعتمد على مكتبة لتنسيق سلاسل مثل هذه، ستتمكّن قريبًا من إجراء ذلك بدون مكتبة، ما يوفر كيلوبايت للمستخدمين. لمزيد من المعلومات، يمكنك قراءة مشاركة الإعلان عن Intl.DurationFormat والتعرّف على كيفية الاستفادة من هذه الميزة الجديدة المفيدة.
Baseline في W3C Breakouts Day 2025
في الآونة الأخيرة، عقدت W3C إصدار 2025 من Breakouts Day، حيث قدّم الأعضاء مواضيع مختلفة، وتم تقديم جلسة مفيدة حول Baseline في 26 آذار (مارس).
إذا كنت مستخدِمًا جديدًا لخدمة Baseline، ستوفّر لك هذه الجلسة نظرة عامة سريعة. ويتناول هذا الدليل أساسيات Baseline، مثل المفاهيم المتوفّرة حديثًا وعلى نطاق واسع، ولكنه يتناول أيضًا كيفية تحديد هذه التعريفات بالاستناد إلى البيانات، بدءًا من browser-compat-data ووصولاً إلى بيانات web-features التي تساعدنا في تحديد الميزات التي تبلغ الحدّ الأدنى لبرنامج Baseline.
إذا لم تتمكن من حضور هذه الجلسة، لا داعي للقلق. تتوفر شرائح من الجلسة، لذا يمكنك الاطّلاع عليها إذا أردت.
لقد انتهينا.
لا يصادف هذا العدد من الملخّص الشهري نهاية الشهر فحسب، بل يصادف نهاية الربع أيضًا. إذا فاتتك النُسخ السابقة من الملخّص، يمكنك الاطّلاع على إصدارَي كانون الثاني (يناير) وشباط (فبراير) للتعرّف على كل ما حدث في Baseline خلال الربع الأول من هذا العام. كالعادة، يُرجى إعلامنا إذا فاتتنا أي معلومات ذات صلة بـ "القاعدة الأساسية"، وسنحرص على تضمينها في إصدار لاحق. إلى اللقاء في غضون شهر.