متد navigator.sendBeacon() این امکان را فراهم می‌کند که حجم کمی از داده‌ها به‌صورت تضمینی به سرور ارسال شود، حتی در شرایطی که کاربر صفحه یا مرورگر را ببندد. برخلاف درخواست‌های سنتی AJAX که ممکن است هنگام بارگذاری یا بستن صفحه ناتمام بمانند، sendBeacon در چنین سناریوهایی ارسال داده را تضمین می‌کند.

مرورگر به درخواست sendBeacon اولویت اجرای بالا نسبت به فرآیند بسته شدن صفحه می‌دهد، که این ویژگی، این متد را برای ارسال داده‌های حیاتی، ابزاری ایده‌آل می‌سازد.

### کاربردهای عملی

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

const data = JSON.stringify({event: 'page_close', time: Date.now()});
navigator.sendBeacon("/analytics", data);

### محدودیت‌ها

* حداکثر اندازه بار داده محدود است (معمولاً تا شصت و چهار کیلوبایت)
* فقط از درخواست‌های POST پشتیبانی می‌کند
* از هدرهای سفارشی پشتیبانی نمی‌کند
* پاسخ سرور قابل پردازش نیست

این ویژگی‌ها sendBeacon را برای ارسال داده‌های ساده، سریع و قابل اعتماد، به‌ویژه هنگام بستن صفحه، به ابزاری کاربردی تبدیل کرده‌اند.



#tip
@IQ_Sourcecode

چرا <button> و <button type="button"> یکسان نیستند؟

به‌طور پیش‌فرض، هر دکمه‌ای که با تگ <button> درون یک فرم قرار می‌گیرد، به‌صورت خودکار نوع submit دریافت می‌کند. این یعنی با کلیک روی آن، فرم ارسال می‌شود—حتی اگر هدف شما صرفاً اجرای یک اسکریپت ساده باشد.

برای نمونه:

<form onsubmit="alert('فرم ارسال شد!')">
  <button onclick="alert('کلیک!')">کلیک کن</button>
</form>

در این مثال، پس از کلیک ابتدا پیام «کلیک!» نمایش داده می‌شود، اما بلافاصله بعد از آن، فرم به‌صورت خودکار ارسال خواهد شد.

علاوه بر این، اگر تنها یک دکمه با نوع submit (چه به‌صورت صریح یا ضمنی) در فرم وجود داشته باشد، فشردن کلید Enter در یک فیلد متنی ممکن است باعث شود مرورگر این دکمه را به‌صورت خودکار کلیک کند — حتی بدون دخالت مستقیم کاربر.

برای جلوگیری از این رفتار و اجرای دقیق منطق دلخواه خودتان، لازم است نوع دکمه را به‌صراحت button تعیین کنید:

<button type="button" onclick="alert('کلیک!')">کلیک کن</button>

### مقادیر مجاز برای ویژگی type در تگ <button>:

* submit (پیش‌فرض): فرم را ارسال می‌کند.
* reset: تمامی فیلدهای فرم را به حالت اولیه بازمی‌گرداند.
* button: بدون JavaScript کاری انجام نمی‌دهد و صرفاً به‌عنوان ماشه‌ی اسکریپت استفاده می‌شود.

### نتیجه‌گیری:

اگر دکمه‌ی شما در فرم قرار دارد ولی وظیفه‌اش ارسال یا بازنشانی فرم نیست، همیشه به‌صورت صریح type="button" را تعیین کنید. این کار از ارسال‌های ناخواسته‌ی فرم جلوگیری کرده و منطق شما را کاملاً تحت کنترل نگه می‌دارد.


#tip
@IQ_Sourcecode

کوئری‌های کانتینری (Container Queries) ابزاری در CSS هستند که این امکان را فراهم می‌کنند تا عناصر بر اساس ابعاد کانتینر والد خود استایل‌دهی شوند، نه صرفاً بر اساس اندازه‌ی کل پنجره‌ی مرورگر.

در نسخه‌ی کروم صد و سی و سه، قابلیت جدیدی با عنوان وضعیت‌های اسکرول (Scroll States) برای کوئری‌های کانتینری معرفی شده است که کنترل بیشتری بر رفتار عناصر در هنگام اسکرول فراهم می‌کند.

---

### وضعیت‌های اسکرول (Scroll States) چیست؟

سه وضعیت جدید برای ویژگی scroll-state تعریف شده‌اند:
scrollable، stuck و snapped
این وضعیت‌ها می‌توانند در داخل قانون @container مورد استفاده قرار گیرند تا بسته به وضعیت اسکرول کانتینر، استایل‌های خاصی اعمال شوند.

---

### نمونه‌ کد:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

---

### موارد کاربرد:

- نمایش وضعیت اسکرول
به‌صورت بصری به کاربر نشان دهید که هنوز محتوای بیشتری در پایین وجود دارد.

- تیترهای چسبنده (Sticky Headers)
به‌طور خودکار، تیترها هنگام اسکرول در جای خود ثابت شوند.

- تغییر رفتار ناوبری
مثلاً نمایش دکمه‌ی «بازگشت به بالا» تنها در صورتی که کاربر اسکرول کرده باشد.

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

---

برای اطلاعات بیشتر، به مستندات رسمی CSS Container Queries مراجعه کنید.
این قابلیت جدید، گامی مهم به‌سوی طراحی رابط‌های کاربری هوشمندتر و پاسخ‌گوتر به شرایط واقعی نمایش است.

#tip
@IQ_Sourcecode