الميزات الأساسية التي يمكنك استخدامها اليوم

تعرّف على بعض الميزات التي تشكّل جزءًا من الخطة الأساسية.

Mariko Kosaka

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

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

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

يتعاون فريق Chrome مع محرّكات المتصفِّح الأخرى ومنتدى الويب لتوفير مزيد من الوضوح. ويشمل ذلك عملنا على مشاريع، مثل Interop 2023، الذي يساعد في تحسين إمكانية التشغيل التفاعلي لمجموعة من الميزات الأساسية. ولكن ماذا عن الميزات التي تم تحقيقها في السنوات القليلة الماضية؟ هل الميزات التجريبية التي تعلمناها قبل عامين جاهزة للاستخدام؟

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

عنصر مربع الحوار

العنصر <dialog> هو عنصر HTML جديد لإنشاء طلبات لمربّعات حوار، مثل النوافذ المنبثقة والأشكال المشروطة

التوافق مع المتصفح

• 37
• 79
• 98
• 15.4

المصدر

لاستخدامه، حدِّد العنصر المشروط، ثم افتح مربّع الحوار من خلال استدعاء طريقة showModal() في عنصر مربّع الحوار.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

بما أنّ هذه الإعلانات هي عنصر HTML أصلي، تتضمّن ميزات مثل إدارة التركيز وتتبُّع علامات التبويب والحفاظ على سياق التكديس. لمزيد من المعلومات، راجِع إنشاء مكوِّن حوار.

خصائص تحويل CSS الفردية

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

التوافق مع المتصفح

• 104
• 104
• 72
• 14.1

المصدر

للحصول على شرح تفصيلي لهذا التغيير، اقرأ التحكم الدقيق في عمليات تحويل CSS مع خصائص تحويل فردية.

وحدات إطار عرض جديدة

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

التوافق مع المتصفح

• 108
• 108
• 101
• 15.4

النسخة المحددة في JavaScript

في السابق، كان يتم دمج JSON.stringify وJSON.parse معًا لإنشاء نسخة عميقة من عنصر بدون الإشارة إلى العنصر الأصلي. كان هذا اختراقًا شائعًا لدرجة أن V8 (محرك JavaScript في Chrome) أدى إلى تحسين أداء هذه الحيلة بشكل كبير. مع "structuredClone"، لن تحتاج إلى تنفيذ هذا التحدي بعد الآن.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

التوافق مع المتصفح

• 98
• 98
• 94
• 15.4

المصدر

للحصول على مزيد من التفاصيل، يُرجى الرجوع إلى مقالة النسخ النصي التلقائي في JavaScript باستخدام سيكلوني.

الفئة الزائفة في :focus-visible

بصفتنا مطوّري برامج على الويب، كلنا على دراية بـ "حلقة التركيز" التي تظهر عند التنقّل في صفحة باستخدام لوحة مفاتيح أو النقر على عناصر الإدخال. إنها ميزة ضرورية لإمكانية الوصول ولكنها في بعض الأحيان تعيق التصميم المرئي للمستخدمين المختلفين. تتحقّق الفئة الزائفة في CSS :focus-visible مما إذا كان المتصفّح يعتقد أنّ التركيز يجب أن يكون مرئيًا. يمكنك الآن تحديد أنماط عندما يكون التركيز مرئيًا فقط.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

التوافق مع المتصفح

• 86
• 86
• 85
• 15.4

المصدر

يمكنك الاطّلاع على قسم التركيز على تعلُّم لغة CSS للحصول على مزيد من المعلومات.

واجهة TransformStream

تتيح واجهة TransformStream من واجهة برمجة التطبيقات Streams API إمكانية توجيه عمليات البث إلى بعضها.

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

التوافق مع المتصفح

• 67
• 79
• 102
• 14.1

المصدر

الخاتمة

وهناك العديد من الميزات الأخرى التي أصبحت مؤخرًا قابلة للتشغيل التفاعلي ومستقرة للاستخدام على النظام الأساسي للويب. من الآن فصاعدًا، سنعمل مع مجموعة منتدى WebDX لتوضيح مجموعات الميزات الأساسية هذه. يُرجى الانتقال إلى web.dev/baseline للحصول على مزيد من التفاصيل.

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

تهمّنا دائمًا معرفة ما إذا كان ما نفعله مفيدًا لك أو إذا كنت بحاجة إلى أنواع مختلفة من الدعم، لذا يُرجى التواصل معنا من خلال مجموعة منتدى WebDX.