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

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

Mariko Kosaka
X

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

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

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

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

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

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

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

دعم المتصفح

  • Chrome: 37.
  • الحافة: 79.
  • Firefox: 98.
  • Safari: الإصدار 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;
}

دعم المتصفح

  • Chrome: 104.
  • الحافة: 104.
  • Firefox: 72.
  • Safari: الإصدار 14.1.

المصدر

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

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

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

دعم المتصفح

  • Chrome: 108.
  • الحافة: 108.
  • Firefox: 101.
  • Safari: الإصدار 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);

دعم المتصفح

  • Chrome: 98.
  • الحافة: 98.
  • Firefox: 94
  • Safari: الإصدار 15.4.

المصدر

للحصول على مزيد من التفاصيل، يُرجى الرجوع إلى مقالة النسخ المتعمق في JavaScript باستخدام 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 من متصفّح Chrome
  • الحافة: 86.
  • Firefox: 85.
  • Safari: الإصدار 15.4.

المصدر

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

واجهة TransformStream

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

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

دعم المتصفح

  • Chrome: 67.
  • الحافة: 79.
  • Firefox: 102.
  • Safari: الإصدار 14.1.

المصدر

الخاتمة

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

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

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