۸ شهریور ۱۴۰۴فارسی

راهنمای جامعی برای توسعه‌دهندگان در مورد استفاده از API انتقال نمای CSS برای ایجاد ناوبری یکپارچه و شبیه به برنامه، هم برای SPAs و هم برای MPAs. مفاهیم اصلی و تکنیک‌های پیشرفته را بیاموزید.

API انتقال نمای CSS: راهنمای نهایی برای پیاده‌سازی ناوبری روان صفحه

برای دهه‌ها، ناوبری وب با یک واقعیت آزاردهنده تعریف شده است: صفحه سفید خالی. کلیک کردن روی یک لینک به معنای بارگیری مجدد کل صفحه، یک چشمک کوتاه از هیچ، و سپس ظاهر ناگهانی محتوای جدید بود. در حالی که عملکردی بود، این تجربه فاقد سیالیت و ظرافتی است که کاربران از برنامه‌های بومی انتظار دارند. برنامه‌های تک صفحه‌ای (SPAs) به عنوان یک راه‌حل ظهور کردند، که از فریم‌ورک‌های جاوا اسکریپت پیچیده برای ایجاد انتقال‌های یکپارچه استفاده می‌کردند، اما اغلب به قیمت سادگی معماری و عملکرد بارگیری اولیه.

اگر می‌توانستیم بهترین‌های هر دو جهان را داشته باشیم چه؟ معماری ساده، رندر شده از سرور یک برنامه چند صفحه‌ای (MPA) همراه با انتقال‌های زیبا و معنادار یک SPA. این وعده API انتقال نمای CSS است، یک ویژگی مرورگر پیشگام که آماده است تا نحوه تفکر و ساختن تجربیات کاربری را در وب متحول کند.

این راهنمای جامع شما را به یک بررسی عمیق از API انتقال نما می‌برد. ما بررسی خواهیم کرد که این چیست، چرا یک تغییر بزرگ برای توسعه وب است، و چگونه می‌توانید آن را امروز - هم برای SPAs و هم، هیجان‌انگیزتر، MPAs سنتی - پیاده‌سازی کنید. آماده شوید تا با چشمک سفید خداحافظی کنید و به عصر جدیدی از ناوبری یکپارچه وب سلام کنید.

API انتقال نمای CSS چیست؟

API انتقال نمای CSS یک مکانیزم است که مستقیماً در پلتفرم وب ساخته شده است که به توسعه‌دهندگان اجازه می‌دهد تا انتقال‌های متحرک را بین حالت‌های مختلف DOM (مدل شیء سند) ایجاد کنند. در هسته خود، یک راه ساده برای مدیریت تغییر بصری از یک نما به نمای دیگر ارائه می‌دهد، چه این تغییر در همان صفحه (در یک SPA) یا بین دو سند مختلف (در یک MPA) رخ دهد.

این فرآیند به طرز قابل توجهی هوشمندانه است. هنگامی که یک انتقال فعال می‌شود، مرورگر:

از وضعیت فعلی صفحه (نمای قدیمی) یک «عکس فوری» می‌گیرد.
به شما اجازه می‌دهد تا DOM را به حالت جدید به‌روزرسانی کنید.
از وضعیت صفحه جدید (نمای جدید) یک «عکس فوری» می‌گیرد.
عکس فوری نمای قدیمی را بالای نمای زنده جدید قرار می‌دهد.
انتقال را بین این دو متحرک می‌کند، معمولاً با یک محو شدن متقابل صاف به طور پیش‌فرض.

کل این فرآیند توسط مرورگر هماهنگ می‌شود و آن را بسیار کارآمد می‌کند. مهمتر از همه، به توسعه‌دهندگان کنترل کامل بر انیمیشن با استفاده از CSS استاندارد می‌دهد و چیزی را که زمانی یک کار پیچیده جاوا اسکریپت بود به یک چالش استایل‌دهی اعلامی و در دسترس تبدیل می‌کند.

چرا این یک تغییر بازی برای توسعه وب است

معرفی این API فقط یک به‌روزرسانی افزایشی دیگر نیست. این نشان‌دهنده یک پیشرفت اساسی در پلتفرم وب است. در اینجا دلیل اهمیت آن برای توسعه‌دهندگان و کاربران در سراسر جهان آمده است:

تجربه کاربری (UX) به‌طور چشمگیر بهبود یافته: انتقال‌های روان صرفاً آرایشی نیستند. آنها پیوستگی بصری را فراهم می‌کنند، به کاربران کمک می‌کنند تا رابطه بین نماهای مختلف را درک کنند. یک عنصر که به طور یکپارچه از یک تصویر بندانگشتی به یک تصویر با اندازه کامل رشد می‌کند، زمینه را فراهم می‌کند و توجه کاربر را هدایت می‌کند و باعث می‌شود رابط بصری‌تر و پاسخگوتر شود.
توسعه بسیار ساده شده: قبل از این API، دستیابی به جلوه‌های مشابه نیازمند کتابخانه‌های جاوا اسکریپت سنگین (مانند Framer Motion یا GSAP) یا راه‌حل‌های پیچیده CSS-in-JS بود. API انتقال نما این پیچیدگی را با یک فراخوانی ساده از تابع و چند خط CSS جایگزین می‌کند و مانع ورود برای ایجاد تجربیات زیبا و شبیه به برنامه را کاهش می‌دهد.
عملکرد برتر: با واگذاری منطق انیمیشن به موتور رندر مرورگر، انتقال‌های نما می‌توانند نسبت به همتایان خود که توسط جاوا اسکریپت هدایت می‌شوند، عملکرد بیشتری داشته باشند و از نظر باتری کارآمدتر باشند. مرورگر می‌تواند این فرآیند را به روش‌هایی بهینه کند که تکرار دستی آن دشوار است.
پل زدن شکاف SPA-MPA: شاید هیجان‌انگیزترین جنبه، پشتیبانی آن از انتقال‌های بین اسنادی باشد. این به وب‌سایت‌های سنتی با رندر سرور (MPAs) اجازه می‌دهد تا ناوبری سیال را که مدت‌هاست منحصراً برای SPAs در نظر گرفته شده است، اتخاذ کنند. مشاغل اکنون می‌توانند وب‌سایت‌های موجود خود را با الگوهای UX مدرن، بدون انجام یک مهاجرت معماری گران‌قیمت و پیچیده به یک فریم‌ورک SPA کامل، بهبود بخشند.

مفاهیم اصلی: درک جادوی پشت انتقال‌های نما

برای تسلط بر API، ابتدا باید دو مؤلفه اصلی آن را درک کنید: محرک جاوا اسکریپت و درخت شبه-عناصر CSS که امکان سفارشی‌سازی را فراهم می‌کند.

نقطه ورود جاوا اسکریپت: `document.startViewTransition()`

همه چیز با یک تابع جاوا اسکریپت واحد شروع می‌شود: `document.startViewTransition()`. این تابع یک بازخوانی را به عنوان آرگومان می‌گیرد. در داخل این بازخوانی، شما تمام دستکاری‌های DOM مورد نیاز برای رسیدن از حالت قدیمی به حالت جدید را انجام می‌دهید.

یک فراخوانی معمولی به این صورت است:

// First, check if the browser supports the API
if (!document.startViewTransition) {
  // If not supported, update the DOM directly
  updateTheDOM();
}
else {
  // If supported, wrap the DOM update in the transition function
  document.startViewTransition(() => {
    updateTheDOM();
  });
}

هنگامی که `startViewTransition` را فراخوانی می‌کنید، مرورگر توالی گرفتن-به‌روزرسانی-انیمیشن را که قبلاً توضیح داده شد، آغاز می‌کند. این تابع یک شیء `ViewTransition` را برمی‌گرداند، که شامل وعده‌هایی است که به شما امکان می‌دهد تا برای کنترل بیشتر پیشرفته در مراحل مختلف چرخه عمر انتقال وارد شوید.

درخت شبه-عناصر CSS

قدرت واقعی سفارشی‌سازی در مجموعه‌ای خاص از شبه-عناصر CSS نهفته است که مرورگر در طول یک انتقال ایجاد می‌کند. این درخت موقت به شما امکان می‌دهد نماهای قدیمی و جدید را به طور مستقل استایل‌دهی کنید.

::view-transition: ریشه درخت، کل viewport را پوشش می‌دهد. می‌توانید از آن برای تنظیم رنگ پس‌زمینه یا مدت زمان انتقال استفاده کنید.
::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)

بیایید یک الگوی UI رایج بسازیم: فهرستی از کارت‌ها که با کلیک کردن، به یک نمای دقیق در همان صفحه منتقل می‌شوند. نکته کلیدی این است که یک عنصر مشترک، مانند یک تصویر، داشته باشید که به آرامی بین دو حالت تغییر شکل می‌دهد.

مرحله 1: ساختار HTML

ما به یک کانتینر برای فهرست خود و یک کانتینر برای نمای جزئیات نیاز داریم. ما یک کلاس را روی یک عنصر والد تغییر می‌دهیم تا یکی را نشان دهیم و دیگری را پنهان کنیم.

<div id="app-container">
  <div class="list-view">
    
    <div class="card" data-id="item-1">
      <img src="thumbnail-1.jpg" alt="Item 1">
      <h3>Product One</h3>
    </div>
    
  </div>   <div class="detail-view" hidden>
    <img src="large-1.jpg" alt="Item 1">
    <h1>Product One</h1>
    <p>Detailed description here...</p>
    <button id="back-button">Back</button>
  </div>
</div>

مرحله 2: یک `view-transition-name` اختصاص دهید

برای اینکه مرورگر درک کند که تصویر بندانگشتی و تصویر نمای جزئیات *همان عنصر مفهومی* هستند، باید در CSS خود به آنها همان `view-transition-name` را بدهیم. این نام باید برای هر عنصر در حال انتقال در صفحه در هر زمان معین منحصربه‌فرد باشد.

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

ما از یک کلاس `.active` استفاده می‌کنیم که آن را با جاوا اسکریپت اضافه می‌کنیم، تا اطمینان حاصل شود که فقط عناصر قابل مشاهده نام‌گذاری شده‌اند و از تداخل جلوگیری می‌شود.

مرحله 3: منطق جاوا اسکریپت

اکنون، ما تابعی را می‌نویسیم که به‌روزرسانی DOM را مدیریت می‌کند و آن را در `document.startViewTransition()` قرار می‌دهیم.

function showDetailView(itemId) {
  const updateDOM = () => {
    // Add 'active' class to the correct card and the detail view
    // This also assigns the view-transition-name via CSS
    document.querySelector(`.card[data-id='${itemId}']`).classList.add('active');
    document.querySelector('.detail-view').classList.add('active');     // Hide the list and show the detail view
    document.querySelector('.list-view').hidden = true;
    document.querySelector('.detail-view').hidden = false;
  };   if (!document.startViewTransition) {
    updateDOM();
    return;
  }   document.startViewTransition(() => updateDOM());
}

فقط با این کار، کلیک کردن روی یک کارت، یک انیمیشن تغییر شکل روان برای تصویر و یک محو شدن متقابل برای بقیه صفحه را فعال می‌کند. هیچ جدول زمانی یا کتابخانه انیمیشن پیچیده‌ای مورد نیاز نیست.

مرز بعدی: انتقال‌های بین اسنادی برای MPAs

اینجاست که API واقعاً متحول می‌شود. اعمال این انتقال‌های روان بر روی برنامه‌های چند صفحه‌ای سنتی (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 غیرقابل تصور بود.

تکنیک‌های پیشرفته و سفارشی‌سازی

محو شدن متقابل پیش‌فرض زیبا است، اما API قلاب‌های سفارشی‌سازی عمیقی را از طریق انیمیشن‌های CSS فراهم می‌کند.

سفارشی‌سازی انیمیشن‌ها با 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>`) درست قبل از راه‌اندازی انتقال به دست آورد.

جاوا اسکریپت برای یک دکمه 'back':

backButton.addEventListener('click', (event) => {
  event.preventDefault();
  document.documentElement.classList.add('is-going-back');
  document.startViewTransition(() => {
    // Logic to navigate back
    Promise.resolve().then(() => {
      document.documentElement.classList.remove('is-going-back');
    });
  });
});

CSS برای تعریف انیمیشن‌های مختلف:

/* Default forward animation */
::view-transition-new(root) {
animation: slide-from-right 0.5s;
} /* Back animation */
.is-going-back::view-transition-new(root) {
animation: slide-from-left 0.5s;
}

این الگوی قدرتمند کنترل دقیقی بر تجربه ناوبری کاربر ارائه می‌دهد.

ملاحظات مربوط به دسترسی

یک API وب مدرن بدون دسترسی قوی داخلی، ناقص خواهد بود، و API انتقال نما ارائه می‌دهد.

احترام به ترجیحات کاربر: API به طور خودکار به پرس و جو رسانه `prefers-reduced-motion` احترام می‌گذارد. اگر کاربر در تنظیمات سیستم عامل خود نشان داده است که ترجیح می‌دهد حرکت کمتری داشته باشد، انتقال نادیده گرفته می‌شود و به‌روزرسانی DOM فوراً انجام می‌شود. این به طور پیش‌فرض بدون هیچ کار اضافی از توسعه‌دهنده اتفاق می‌افتد.
حفظ فوکوس: انتقال‌ها صرفاً بصری هستند. آنها با مدیریت فوکوس استاندارد تداخل ندارند. این مسئولیت توسعه‌دهنده است که اطمینان حاصل کند که پس از یک انتقال، فوکوس صفحه کلید به یک عنصر منطقی در نمای جدید، مانند سرفصل اصلی یا اولین عنصر تعاملی منتقل می‌شود.
HTML معنایی: API یک لایه پیشرفت است. HTML زیربنایی شما باید معنایی و قابل دسترس باقی بماند. یک کاربر با یک صفحه خوان یا یک مرورگر غیرپشتیبان، محتوا را بدون انتقال تجربه می‌کند، بنابراین ساختار باید به خودی خود منطقی باشد.

پشتیبانی از مرورگر و بهبود تدریجی

از اواخر سال 2023، API انتقال نما برای SPAs در مرورگرهای مبتنی بر کرومیوم (Chrome، Edge، Opera) پشتیبانی می‌شود. انتقال‌های بین اسنادی برای MPAs در پشت یک پرچم ویژگی موجود است و به طور فعال در حال توسعه است.

API از ابتدا برای بهبود تدریجی طراحی شده است. الگوی محافظی که قبلاً استفاده کردیم، کلید است:

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

این بررسی ساده تضمین می‌کند که کد شما فقط تلاش می‌کند تا یک انتقال را در مرورگرهایی که از آن پشتیبانی می‌کنند ایجاد کند. در مرورگرهای قدیمی‌تر، به‌روزرسانی DOM فوراً اتفاق می‌افتد، همانطور که همیشه بوده است. این بدان معناست که شما می‌توانید امروز از API برای بهبود تجربه کاربران در مرورگرهای مدرن استفاده کنید، بدون هیچ تأثیر منفی بر روی کسانی که مرورگرهای قدیمی‌تری دارند. این یک سناریوی برد-برد است.

آینده ناوبری وب

API انتقال نما چیزی بیش از یک ابزار برای انیمیشن‌های چشم‌نواز است. این یک تغییر اساسی است که به توسعه‌دهندگان این امکان را می‌دهد تا سفرهای کاربری بصری‌تر، منسجم‌تر و جذاب‌تری را ایجاد کنند. با استانداردسازی انتقال‌های صفحه، پلتفرم وب در حال نزدیک کردن شکاف با برنامه‌های بومی است و امکان سطح جدیدی از کیفیت و ظرافت را برای انواع وب‌سایت‌ها فراهم می‌کند.

با گسترش پشتیبانی مرورگر، می‌توانیم انتظار موج جدیدی از خلاقیت در طراحی وب را داشته باشیم، جایی که سفر بین صفحات به اندازه خود صفحات با دقت طراحی می‌شود. خطوط بین SPAs و MPAs همچنان محو خواهند شد و به تیم‌ها اجازه می‌دهد تا بهترین معماری را برای پروژه خود بدون قربانی کردن تجربه کاربری انتخاب کنند.

نتیجه‌گیری: شروع به ساختن تجربیات روان‌تر امروز

API انتقال نمای CSS یک ترکیب نادر از قابلیت‌های قدرتمند و سادگی قابل توجه را ارائه می‌دهد. این یک روش کارآمد، در دسترس و به طور فزاینده‌ای بهبود یافته برای ارتقای تجربه کاربری سایت شما از عملکردی به لذت‌بخش ارائه می‌دهد.

چه در حال ساختن یک SPA پیچیده باشید و چه یک وب‌سایت سنتی با رندر سرور، ابزارها اکنون در دسترس هستند تا بارگیری‌های آزاردهنده صفحه را از بین ببرید و کاربران خود را از طریق رابط خود با انیمیشن‌های سیال و معنادار راهنمایی کنید. بهترین راه برای درک قدرت آن این است که آن را امتحان کنید. بخشی کوچک از برنامه خود - یک گالری، یک صفحه تنظیمات یا یک جریان محصول - را بردارید و آزمایش کنید. از اینکه چگونه چند خط کد می‌تواند اساساً احساس وب‌سایت شما را تغییر دهد، شگفت‌زده خواهید شد.

عصر چشمک سفید در حال پایان است. آینده ناوبری وب یکپارچه است و با API انتقال نما، شما همه چیز را دارید که برای شروع ساختن آن از امروز نیاز دارید.