مارس 2025 الأساس الشهرية دايجست | بلوق | web.dev

تم النشر: 31 مارس 2025

لقد مر شهر آخر ومنذ آخر خط أساسي لخط الأساس الشهري ، حدث الكثير! في هذه الطبعة ، سنلخص بعض المنشورات التي نشرناها هنا على الويب.

تم إصدار eslint 0.6.0

في الآونة الأخيرة ، نشرنا حول دعم ESLINT لدعم CSS. تضمن جزء من هذا الإطلاق قاعدة ESLINT جديدة –require-baseline– لتصوير ميزات CSS التي تستخدمها في مشروعك ، وما إذا كانت تصل إلى حد أساسي محدد.

في الآونة الأخيرة ، أطلقت ESLINT الإصدار 0.6.0 من @eslint/css الحزمة ، والتي تتضمن تحديثًا جديدًا مهمًا يعيد تسمية require-baseline حكم ل use-baseline. على الرغم من أن هذا التحديث يبدو صغيراً ، إلا أنه يتحسن من قابلية قراءة القاعدة. هناك أيضًا بعض الميزات المهمة الأخرى وإصلاحات الأخطاء في هذا الإصدار ، مثل القدرة الإضافية لـ use-baseline حكم على LINT متداخل كتل CSS. إذا كنت تستخدم نسخة مسبقة من @eslint/css، تحقق من هذا التحديث!

كيفية الاستعلام عن لوحة معلومات Web Platform

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

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

كيف تفكر في خط الأساس والبوليفيل

تتمثل مهمة Baseline في جلب الوضوح إلى الميزات التي يمكنك استخدامها بأمان – ولكن حتى مع هذا الوضوح المضافة ، لا يزال يتعين عليك التفكير في كيفية تبني الميزات بطريقة منطقية لتطبيقات الويب الخاصة بك. Polyfills هي جزء كبير من هذه العملية. لا ينظر خط الأساس في ما إذا كانت الميزات متوفرة حديثًا أو على نطاق واسع ، ولا تحاول إخبارك ما إذا كنت تريد استخدامها. هذا القرار خاص بتطبيقك ، لكنه اعتبار مهم!

في الآونة الأخيرة ، نشرنا منشورًا حول كيفية التفكير في خط الأساس والملفيات ، ونعتقد أنه يوفر إطارًا مفيدًا لكيفية التفكير في استخدامها. الأمل مع الميزات التي تصبح خط الأساس متاحًا حديثًا أو على نطاق واسع هو أن البوليفيات تصبح أقل ضرورة. ليس هناك شك في أن عمليات التعليقات هي أدوات مفيدة في صندوق أدوات التطوير الخاص بك ، ولكن لديها عيوب – يمكن أن يكون لها تأثير سلبي على أداء موقع الويب الخاص بك ، وفي بعض الحالات ، يمكن أن يكون هناك مخاوف من إمكانية الوصول. نأمل أن يساعدك هذا الدليل على التنقل في هذا السؤال الصعب!

contenteditable="plaintext-only" هو الآن خط الأساس متاح حديثا

ال contenteditable تتيح السمة على عنصر HTML للمستخدم تغيير محتوياته كما لو كان حقل نص. هذا يعني ، على سبيل المثال ، أن تضع السمة على أ <p> العنصر والمستخدم يمكن أن يتفاعل معه مثل أ <textarea>. في بعض حالات الاستخدام ، باستخدام contenteditable يوفر مزايا على عناصر النماذج النموذجية.

ومع ذلك ، فإن المستخدمين يلصقون الأشياء في عناصر قابلة للتحرير ، ويمكن أن تحتوي الأشياء التي لصقها على تنسيق نص غني ، والتي يمكن أن توفر تجربة محبطة للمستخدمين الذين يرغبون فقط في لصق النص غير المطوّل في حقل. ال contenteditable="plaintext-only" تمنع مجموعة السمة/القيمة من الحدوث ، وأصبحت مؤخرًا خط الأساس متاحًا حديثًا. لمعرفة المزيد ، اقرأ منشور الإعلان ، وتعلم كيف يمكنك توفير تجربة تحرير أفضل للمستخدمين الذين يرغبون فقط في لصق النص في أشياء دون كل الزغب.

Intl.DurationFormat هو الآن خط الأساس متاح حديثا

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

يدخل Intl.DurationFormat، ميزة التدويل التي أصبحت مؤخرا خط الأساس متاح حديثا. مع 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وتعلم كيف يمكنك الاستفادة من هذه الميزة الجديدة المفيدة!

خط الأساس في يوم W3C Hopouts Day 2025

في الآونة الأخيرة ، عقدت W3C طبعة 2025 من يوم هروبها ، حيث تم تقديم الأعضاء في مواضيع مختلفة ، وتم تقديم جلسة مفيدة حول خط الأساس في 26 مارس.

إذا كنت جديدًا على خط الأساس ، فإن هذه الجلسة تقوم بعمل رائع في تقديم نظرة عامة سريعة. ويغطي أساسيات خط الأساس مثل المفاهيم المتوفرة حديثًا وعلى نطاق واسع ، ولكنها تدور أيضًا في كيفية تحديد هذه التعريفات حسب البيانات ، بدءًا من browser-compat-data، العمل حتى web-features البيانات التي تساعدنا على معرفة الميزات التي هي في عتبة خط الأساس.

إذا فاتتك هذه الجلسة ، لا تقلق! الشرائح من الجلسة متوفرة بالفعل ، لذا امنحهم نظرة إذا كان فضولك أفضل منك.

هذا غلاف!

هذه الطبعة من The Monthly Digest لا تميز نهاية الشهر فحسب ، بل أيضًا الربع. إذا فاتتك الإصدارات السابقة من The Digest ، تحقق من إصدارات يناير وفبراير للوصول إلى السرعة على كل ما حدث مع خط الأساس في الربع الأول من هذا العام. كالمعتاد ، أخبرنا إذا فاتنا أي شيء مرتبط بخط الأساس ، وسنقوم بالتأكد من أنه يتم التقاطه في إصدار مستقبلي. نراكم في شهر!