واجهة برمجة تطبيقات انتقال العرض CSS: الدليل الأمثل لتنفيذ تنقل سلس للصفحات

لعقود من الزمان، تم تعريف التنقل في الويب بواقع مزعج: الشاشة البيضاء الفارغة. كان النقر على رابط يعني إعادة تحميل الصفحة بالكامل، ووميض وجيز من اللاشيء، ثم الظهور المفاجئ لمحتوى جديد. على الرغم من أن هذه التجربة كانت وظيفية، إلا أنها تفتقر إلى المرونة والصقل الذي يتوقعه المستخدمون من التطبيقات الأصلية. ظهرت التطبيقات ذات الصفحة الواحدة (SPAs) كحل، باستخدام أطر عمل JavaScript معقدة لإنشاء انتقالات سلسة، ولكن غالبًا على حساب البساطة المعمارية وأداء التحميل الأولي.

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

سيأخذك هذا الدليل الشامل في غوص عميق في واجهة برمجة تطبيقات انتقال العرض. سوف نستكشف ما هي، ولماذا هي تحول هائل لتطوير الويب، وكيف يمكنك تنفيذها اليوم - لكل من SPAs، والأهم من ذلك، MPAs التقليدية. استعد لتقول وداعًا للوميض الأبيض ومرحبًا بعصر جديد من التنقل السلس في الويب.

ما هي واجهة برمجة تطبيقات انتقال العرض CSS؟

واجهة برمجة تطبيقات انتقال العرض CSS هي آلية مدمجة مباشرة في نظام الويب الأساسي تتيح للمطورين إنشاء انتقالات متحركة بين حالات DOM (نموذج كائن المستند) المختلفة. في جوهرها، توفر طريقة بسيطة لإدارة التغيير المرئي من عرض إلى آخر، سواء حدث هذا التغيير على نفس الصفحة (في SPA) أو بين مستندين مختلفين (في MPA).

العملية ذكية بشكل ملحوظ. عند تشغيل انتقال، يقوم المتصفح بما يلي:

1. يلتقط "لقطة شاشة" لحالة الصفحة الحالية (العرض القديم).
2. يسمح لك بتحديث DOM إلى الحالة الجديدة.
3. يلتقط "لقطة شاشة" لحالة الصفحة الجديدة (العرض الجديد).
4. يضع لقطة شاشة العرض القديم أعلى العرض الجديد المباشر.
5. يحرك الانتقال بين الاثنين، عادةً مع تلاشي تدريجي سلس بشكل افتراضي.

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

لماذا يعتبر هذا تغييرًا جذريًا لتطوير الويب

إن تقديم واجهة برمجة التطبيقات هذه ليس مجرد تحديث تدريجي آخر؛ بل يمثل تحسينًا جوهريًا لنظام الويب الأساسي. إليكم السبب في أنه مهم جدًا للمطورين والمستخدمين في جميع أنحاء العالم:

• تجربة مستخدم محسّنة بشكل كبير (UX): الانتقالات السلسة ليست مجرد تجميل. إنها توفر استمرارية مرئية، مما يساعد المستخدمين على فهم العلاقة بين وجهات النظر المختلفة. يوفر العنصر الذي ينمو بسلاسة من صورة مصغرة إلى صورة كاملة الحجم سياقًا ويوجه انتباه المستخدم، مما يجعل الواجهة تبدو أكثر سهولة واستجابة.
• تطوير مبسط للغاية: قبل واجهة برمجة التطبيقات هذه، كان تحقيق تأثيرات مماثلة يتطلب مكتبات JavaScript ثقيلة (مثل Framer Motion أو GSAP) أو حلول CSS-in-JS المعقدة. تحل واجهة برمجة تطبيقات انتقال العرض محل هذا التعقيد باستدعاء دالة بسيط وبضعة أسطر من CSS، مما يقلل من حاجز الدخول لإنشاء تجارب جميلة تشبه التطبيقات.
• أداء فائق: من خلال تفريغ منطق الرسوم المتحركة إلى محرك عرض المتصفح، يمكن أن تكون انتقالات العرض أكثر كفاءة في الأداء واستهلاك البطارية من نظيراتها التي تعتمد على JavaScript. يمكن للمتصفح تحسين العملية بطرق يصعب تكرارها يدويًا.
• سد الفجوة بين SPA-MPA: ربما يكون الجانب الأكثر إثارة هو دعمه للانتقالات عبر المستندات. يتيح ذلك لمواقع الويب التقليدية التي يتم عرضها من جانب الخادم (MPAs) اعتماد التنقل السلس الذي طالما اعتبر حصريًا لـ SPAs. يمكن للشركات الآن تحسين مواقع الويب الحالية الخاصة بها بأنماط UX الحديثة دون القيام بترحيل معماري معقد ومكلف إلى إطار عمل SPA كامل.

المفاهيم الأساسية: فهم السحر الكامن وراء انتقالات العرض

لإتقان واجهة برمجة التطبيقات، تحتاج أولاً إلى فهم مكونيها الرئيسيين: مشغل JavaScript وشجرة العناصر الزائفة CSS التي تتيح التخصيص.

نقطة دخول JavaScript: `document.startViewTransition()`

يبدأ كل شيء بدالة JavaScript واحدة: `document.startViewTransition()`. تأخذ هذه الدالة رد اتصال كوسيطة. داخل رد الاتصال هذا، تقوم بتنفيذ جميع عمليات معالجة DOM المطلوبة للانتقال من الحالة القديمة إلى الحالة الجديدة.

يبدو الاستدعاء النموذجي كما يلي:

// أولاً، تحقق مما إذا كان المتصفح يدعم واجهة برمجة التطبيقات
if (!document.startViewTransition) {
  // إذا لم يكن مدعومًا، فقم بتحديث DOM مباشرةً
  updateTheDOM();
} else {
  // إذا كان مدعومًا، فقم بتضمين تحديث DOM في دالة الانتقال
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

عندما تستدعي `startViewTransition`، يبدأ المتصفح في تسلسل الالتقاط والتحديث والتحريك الموصوف سابقًا. تُرجع الدالة كائن `ViewTransition`، الذي يحتوي على وعود تسمح لك بالاتصال بمراحل مختلفة من دورة حياة الانتقال للتحكم بشكل أكثر تقدمًا.

شجرة العناصر الزائفة CSS

تكمن القوة الحقيقية للتخصيص في مجموعة خاصة من العناصر الزائفة CSS التي ينشئها المتصفح أثناء الانتقال. تتيح لك هذه الشجرة المؤقتة تصميم العروض القديمة والجديدة بشكل مستقل.

• ::view-transition: جذر الشجرة، الذي يغطي إطار العرض بأكمله. يمكنك استخدامه لتعيين لون خلفية أو مدة للانتقال.
• ::view-transition-group(name): يمثل عنصر انتقال واحد. إنه مسؤول عن موضع العنصر وحجمه أثناء الرسوم المتحركة.
• ::view-transition-image-pair(name): حاوية للعروض القديمة والجديدة لعنصر ما. يتم تصميمه على أنه `mix-blend-mode` عازل.
• ::view-transition-old(name): لقطة شاشة للعنصر في حالته القديمة (على سبيل المثال، الصورة المصغرة).
• ::view-transition-new(name): التمثيل المباشر للعنصر في حالته الجديدة (على سبيل المثال، الصورة كاملة الحجم).

بشكل افتراضي، العنصر الوحيد في هذه الشجرة هو `root`، الذي يمثل الصفحة بأكملها. لتحريك عناصر معينة بين الحالات، يجب أن تمنحها `view-transition-name` متسقًا.

التنفيذ العملي: انتقال العرض الأول (مثال SPA)

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

الخطوة 1: هيكل HTML

نحن بحاجة إلى حاوية لقائمتنا وحاوية للعرض التفصيلي. سنقوم بتبديل فئة على عنصر رئيسي لإظهار واحد وإخفاء الآخر.

<div id="app-container">
  <div class="list-view">
    <!-- البطاقة 1 -->
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="Item 1">
      <h3>المنتج الأول</h3>
    </div>
    <!-- المزيد من البطاقات... -->
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="Item 1">
    <h1>المنتج الأول</h1>
    <p>وصف تفصيلي هنا...</p>
    <button id="back-button">رجوع</button>
  </div>
</div>

الخطوة 2: تعيين `view-transition-name`

لكي يفهم المتصفح أن الصورة المصغرة وصورة العرض التفصيلي هما *نفس العنصر المفاهيمي*، يجب أن نمنحهما نفس `view-transition-name` في CSS الخاص بنا. يجب أن يكون هذا الاسم فريدًا لكل عنصر انتقال على الصفحة في أي وقت محدد.

.card.active img {
  view-transition-name: product-image;
} .detail-view.active img {
  view-transition-name: product-image;
}

نحن نستخدم فئة `.active`، والتي سنضيفها باستخدام JavaScript، لضمان أن العناصر المرئية فقط هي التي يتم تعيين الاسم لها، وتجنب التعارضات.

الخطوة 3: منطق JavaScript

الآن، سنكتب الدالة التي تتعامل مع تحديث DOM ونقوم بتضمينها في `document.startViewTransition()`.

function showDetailView(itemId) {
  const updateDOM = () => {
    // إضافة فئة "active" إلى البطاقة الصحيحة والعرض التفصيلي
    // يقوم هذا أيضًا بتعيين view-transition-name عبر CSS
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // إخفاء القائمة وإظهار العرض التفصيلي
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

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

الحدود التالية: انتقالات العرض عبر المستندات لـ MPAs

هذا هو المكان الذي تصبح فيه واجهة برمجة التطبيقات تحويلية حقًا. كان تطبيق هذه الانتقالات السلسة على التطبيقات التقليدية متعددة الصفحات (MPAs) مستحيلاً في السابق دون تحويلها إلى SPAs. الآن، إنه اشتراك بسيط.

تمكين الانتقالات عبر المستندات

لتمكين الانتقالات لعمليات التنقل بين الصفحات المختلفة، يمكنك إضافة قاعدة CSS بسيطة إلى CSS الخاص بـ كل من الصفحات المصدر والوجهة:

@view-transition {
  navigation: auto;
}

هذا كل شيء. بمجرد وجود هذه القاعدة، سيستخدم المتصفح تلقائيًا انتقال العرض (التلاشي التدريجي الافتراضي) لجميع عمليات التنقل من نفس المصدر.

المفتاح: `view-transition-name` متسق

تمامًا كما في مثال SPA، يعتمد سحر ربط العناصر عبر صفحتين منفصلتين على `view-transition-name` مشترك وفريد. لنتخيل صفحة قائمة المنتجات (`/products`) وصفحة تفاصيل المنتج (`/products/item-1`).

في `products.html`:

<a href="/products/item-1">
  <img src="thumbnail-1.jpg" style="view-transition-name: product-image-1;">
</a>

في `product-detail.html`:

<div class="hero">
  <img src="large-1.jpg" style="view-transition-name: product-image-1;">
</div>

عندما ينقر المستخدم على الرابط في الصفحة الأولى، يرى المتصفح عنصرًا به `view-transition-name: product-image-1` يغادر الصفحة. ثم ينتظر تحميل الصفحة الجديدة. عندما يتم عرض الصفحة الثانية، فإنه يجد عنصرًا بنفس `view-transition-name` وينشئ تلقائيًا رسمًا متحركًا تحويليًا سلسًا بين الاثنين. يتم افتراضيًا أن بقية محتوى الصفحة تتلاشى تدريجيًا بشكل طفيف. يؤدي هذا إلى إنشاء تصور للسرعة والاستمرارية كان لا يمكن تصوره سابقًا لـ MPAs.

التقنيات والتخصيصات المتقدمة

التلاشي التدريجي الافتراضي أنيق، لكن واجهة برمجة التطبيقات توفر خطافات تخصيص عميقة من خلال رسوم CSS المتحركة.

تخصيص الرسوم المتحركة باستخدام CSS

يمكنك تجاوز الرسوم المتحركة الافتراضية عن طريق استهداف العناصر الزائفة بخصائص `@keyframes` و `animation` القياسية.

على سبيل المثال، لإنشاء تأثير "الانزلاق من اليمين" لمحتوى الصفحة الجديد:

@keyframes slide-from-right {
  from { transform: translateX(100%); }
} ::view-transition-new(root) {
  animation: slide-from-right 0.5s ease-out;
}

يمكنك تطبيق رسوم متحركة مميزة على `::view-transition-old` و `::view-transition-new` لعناصر مختلفة لإنشاء انتقالات مصممة بشكل احترافي ومتطورة للغاية.

التحكم في أنواع الانتقال باستخدام الفئات

المطلب الشائع هو الحصول على رسوم متحركة مختلفة لعمليات التنقل للأمام والخلف. على سبيل المثال، قد يؤدي التنقل للأمام إلى انزلاق الصفحة الجديدة من اليمين، بينما يؤدي التنقل للخلف إلى انزلاقها من اليسار. يمكن تحقيق ذلك عن طريق إضافة فئة إلى عنصر المستند (`<html>`) قبل تشغيل الانتقال مباشرةً.

JavaScript لزر "رجوع":

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // منطق للرجوع للخلف
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

CSS لتحديد الرسوم المتحركة المختلفة:

/* رسم متحرك افتراضي للأمام */
::view-transition-new(root) {
  animation: slide-from-right 0.5s;
} /* رسم متحرك للخلف */
.is-going-back::view-transition-new(root) {
  animation: slide-from-left 0.5s;
}

يوفر هذا النمط القوي تحكمًا دقيقًا في تجربة التنقل للمستخدم.

اعتبارات إمكانية الوصول

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

• احترام تفضيلات المستخدم: تحترم واجهة برمجة التطبيقات تلقائيًا استعلام الوسائط `prefers-reduced-motion`. إذا أشار المستخدم إلى أنه يفضل حركة أقل في إعدادات نظام التشغيل الخاص به، فسيتم تخطي الانتقال، ويحدث تحديث DOM على الفور. يحدث هذا افتراضيًا دون الحاجة إلى أي عمل إضافي من المطور.
• الحفاظ على التركيز: الانتقالات مرئية بحتة. أنها لا تتداخل مع إدارة التركيز القياسية. تظل مسؤولية المطور هي التأكد من أنه بعد الانتقال، يتم نقل تركيز لوحة المفاتيح إلى عنصر منطقي في العرض الجديد، مثل العنوان الرئيسي أو العنصر التفاعلي الأول.
• HTML الدلالي: واجهة برمجة التطبيقات هي طبقة تحسين. يجب أن يظل HTML الأساسي الخاص بك دلاليًا ويمكن الوصول إليه. سيختبر المستخدم الذي لديه قارئ شاشة أو متصفح غير مدعوم المحتوى بدون الانتقال، لذلك يجب أن يكون الهيكل منطقيًا في حد ذاته.

دعم المتصفح والتحسين التدريجي

اعتبارًا من أواخر عام 2023، يتم دعم واجهة برمجة تطبيقات انتقال العرض لـ SPAs في المتصفحات المستندة إلى Chromium (Chrome و Edge و Opera). تتوفر عمليات الانتقال عبر المستندات لـ MPAs خلف علامة الميزة ويجري تطويرها بنشاط.

تم تصميم واجهة برمجة التطبيقات من الألف إلى الياء من أجل التحسين التدريجي. نمط الحماية الذي استخدمناه سابقًا هو المفتاح:

if (!document.startViewTransition) { ... }

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

مستقبل التنقل في الويب

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

مع توسع دعم المتصفح، يمكننا أن نتوقع رؤية موجة جديدة من الإبداع في تصميم الويب، حيث تصبح الرحلة بين الصفحات مصممة بعناية مثل الصفحات نفسها. ستستمر الخطوط الفاصلة بين SPAs و MPAs في التلاشي، مما يسمح للفرق باختيار أفضل بنية لمشروعهم دون التضحية بتجربة المستخدم.

الخلاصة: ابدأ في بناء تجارب أكثر سلاسة اليوم

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

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

عصر الوميض الأبيض يقترب من نهايته. مستقبل التنقل في الويب سلس، ومع واجهة برمجة تطبيقات انتقال العرض، لديك كل ما تحتاجه للبدء في بنائه اليوم.