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

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

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

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

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

يتعاون فريق 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 باستخدام سمات التحويل الفردية.

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

على الأجهزة الجوّالة، يتأثر حجم إطار العرض بوجود أشرطة الأدوات الديناميكية أو عدم توفّرها.
في بعض الأحيان، يظهر شريط عناوين URL وشريط أدوات التنقّل، ولكن في بعض الأحيان يتم سحب شريطَي الأدوات هذاَين بالكامل.
سيختلف الحجم الفعلي لإطار العرض حسب ما إذا كانت أشرطة الأدوات مرئية أم لا.
تمنح وحدات إطار العرض الجديدة، مثل 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 باستخدام JavaScript باستخدام البيانات المستنسخة.

الفئة الزائفة :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 لتوضيح المزيد من المعلومات حول مجموعات الميزات الأساسية هذه. يُرجى الانتقال إلى web.dev/baseline للاطّلاع على التفاصيل المستمرة.

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

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