‏Safe Area Insets در CSS: محتوا رو از پشت نوچ نجات بده

گوشی‌های امروزی دیگه یه صفحه‌ی مستطیلی ساده نیستن. نوچ، Dynamic Island، دوربین punch-hole، گوشه‌های گرد و نوار پایینی که هم home indicator هست هم gesture area — همه‌ی این‌ها می‌تونن بخش‌هایی از محتوای صفحه‌ی وبت رو بپوشونن. مرورگرها ابعاد همه‌ی این المان‌های سیستمی رو می‌دونن و از طریق متغیرهای محیطی CSS در اختیار توسعه‌دهنده می‌ذارن.

Safe Area اون بخشی از صفحه‌ست که تضمین می‌شه هیچ UI سیستمی جلوش رو نمی‌گیره. مقدار safe-area-inset نشون می‌ده که از هر لبه‌ی صفحه چقدر فضا توسط UI سیستم اشغال شده. با استفاده از این مقادیر در CSS می‌تونی مطمئن بشی که محتوا و کنترل‌های مهم هرگز پشت UI سیستم پنهان نمی‌شن — مثلاً دکمه‌ی چت شناور سایتت پشت نوار پایینی گوشی گم نشه.

برای خوندن این مقادیر از تابع env() استفاده می‌کنی:

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

این متغیرها baseline widely available هستن، یعنی می‌تونی همین الان توی پروداکشن ازشون استفاده کنی. اگه هم می‌خوای یه fallback داشته باشی برای مرورگرهایی که env() رو پشتیبانی نمی‌کنن، می‌تونی اینطوری بنویسی:

body {
  padding-top: 1rem; /* Fallback */
  padding-top: calc(env(safe-area-inset-top) + 1rem);
}

به‌صورت پیش‌فرض مرورگرها جلوی پوشیده‌شدن محتوا رو می‌گیرن، ولی در عوض یه viewport کوچیک‌تر بهت می‌دن. برای اینکه محتوا لبه‌به‌لبه باشه و پشت UI سیستم هم نره، یه فرآیند دو مرحله‌ای داری: اول باید viewport-fit=cover رو به meta viewport اضافه کنی تا مرورگر صفحه رو تمام‌عرض نشون بده، بعد خودت با env(safe-area-inset-*) المان‌های حساس رو جابجا کنی.

یه نکته‌ی مهم اینه که safe-area-inset هیچ margin اضافه‌ای نمی‌ده — محتوا دقیقاً کنار لبه‌ی safe area قرار می‌گیره. برای اینکه کمی فضای نفس‌کشیدن هم داشته باشی، باید با calc() یه padding اضافی هم بذاری:

body {
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

یه دردسر بزرگ اینه که مقادیر safe-area-inset-* فقط روی موبایل‌های واقعی غیر صفر هستن. روی دسکتاپ همیشه صفر برمی‌گردن. حتی Chrome responsive view هم این مقادیر رو شبیه‌سازی نمی‌کنه، پس این باگ‌ها خیلی راحت از تست توسعه جا می‌مونن و وقتی آخر پروژه می‌خوای تست واقعی روی دستگاه انجام بدی، درست‌کردنشون گرون‌تر شده.

Polypane اولین و تنها مرورگر دسکتاپیه که safe area insets رو شبیه‌سازی می‌کنه. هر دستگاهی توی Polypane مقادیر دقیق safe area inset رو برای حالت portrait و landscape داره و حتی یه overlay بصری نشون می‌ده که دقیقاً کجاها unsafe هستن.

چیزهایی که بعد از opt-in به full viewport باید بهشون فکر کنی:

• هدرها و نوارهای navigation ثابت باید فضای کافی برای نوچ/Dynamic Island داشته باشن
• دکمه‌های شناور (چت، کمک) باید داخل safe area بمونن
• دیالوگ‌ها و drawer های تمام‌صفحه نباید پشت نوار پایینی برن
• کنترل‌های نقشه یا ویدیو نزدیک گوشه‌های صفحه

نکات کلیدی:

• safe-area-inset-* متغیرهای محیطی CSS هستن که فضای اشغال‌شده توسط UI سیستم رو از هر لبه نشون می‌دن
• برای استفاده باید اول viewport-fit=cover رو به meta viewport اضافه کنی
• مقادیر با env(safe-area-inset-top/right/bottom/left) خونده می‌شن
• برای اضافه‌کردن padding اضافی از calc() استفاده کن
• این مقادیر فقط روی موبایل واقعی غیر صفرن، پس تست در Chrome responsive view کافی نیست
• Polypane تنها مرورگر دسکتاپیه که این مقادیر رو شبیه‌سازی می‌کنه