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

تعرَّف على بعض الميزات التي تشكّل جزءًا من Baseline.

تاريخ النشر: 10 أيار (مايو) 2023

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

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

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

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

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

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

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

لاستخدامها، حدِّد عنصر وضع النافذة المنبثقة، ثم افتح مربّع الحوار من خلال استدعاء طريقة 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;
}

للحصول على شرح مفصّل لهذا التغيير، يُرجى الاطّلاع على المقالة تحكّم أكثر دقة في عمليات التحويل في CSS باستخدام سمات التحويل الفردية.

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

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

النسخ العميق في 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);

راجِع مقالة النسخ العميق في JavaScript باستخدام دالة structuredClone للحصول على مزيد من التفاصيل.

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

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

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

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

اطّلِع على قسم "التركيز" في Learn CSS للحصول على مزيد من المعلومات.

واجهة TransformStream

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

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

الخاتمة

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

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

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