‏عنصری که نامرئیه ولی هنوز دسترس‌پذیر می‌مونه

نویسنده با یه مسئلهٔ آشنای فرانت‌اند شروع می‌کنه: گاهی می‌خوایم بعضی عنصرهای تعاملی رو تا وقتی کاربر باهاشون درگیر نشده قایم کنیم تا رابط کاربری شلوغ نشه، مثل دکمه‌های اشتراک‌گذاری رو کارت‌ها، skip link‌ها، دکمهٔ کپی، یا دکمهٔ پرش‌به‌بالا. چالش اینه که عنصر باید قایم بشه ولی همچنان دسترس‌پذیر بمونه.

راه‌حل اصلی، ویژگیِ hidden="until-found" هست. به گفتهٔ نویسنده این مقدار، به‌جای این‌که کل عنصر رو حذف کنه، فقط محتواش رو با content-visibility: hidden قایم می‌کنه. نتیجه اینه که محتوا هم با جست‌وجوی درون‌صفحه (find-in-page) پیدا می‌شه، هم اگه با هش/فرگمنت URL مطابقت داشته باشه خودش رو نشون می‌ده، و خودِ دکمه هم از همون اول قابل‌فوکوسه:

<button hidden="until-found">Hidden until found</button>

ولی یه مشکل می‌مونه: چون محتوا قایمه، عنصر جمع می‌شه و موقع تعامل، چیدمان صفحه می‌پره؛ ضمن این‌که چیزی که اون‌جا نیست رو نمی‌شه هاور کرد. نویسنده می‌گه راه‌حل اینه که فضای عنصر رو رزرو کنیم. برای این کار از contain-intrinsic-size: auto none استفاده می‌شه که آخرین اندازهٔ رندرشدهٔ عنصر رو به‌خاطر می‌سپاره.

برای این‌که این اندازه یه بار ثبت بشه، عنصر باید فقط یه لحظه رندر بشه. این کار با یه انیمیشن @keyframes انجام می‌شه که تو شروعش content-visibility: visible می‌ذاره و چون کی‌فریم to نداره، به مقدار پیش‌فرضِ hidden برمی‌گرده. یه animation: 1ms render این لحظهٔ کوتاه رو می‌سازه و opacity: 0 هم پرش‌ولرزش احتمالی رو پنهون می‌کنه.

قدم آخر اینه که دکمه به تعامل واکنش نشون بده. نویسنده با یه سلکتور تودرتو، موقع هاور، فوکوس یا وقتی ویژگی hidden برداشته می‌شه، دوباره عنصر رو نمایان می‌کنه:

button {
  animation: 1ms render;
  contain-intrinsic-size: auto none;
  opacity: 0;
  &:is(:hover, :focus, :not([hidden])) {
    opacity: 1;
    content-visibility: visible;
  }
}

به گفتهٔ نویسنده مزیت این روش نسبت به گزینه‌هایی مثل display: none یا visibility: hidden یا opacity: 0 تنها اینه که به همهٔ حالت‌های تعامل (هاور، فوکوس، جست‌وجوی صفحه و ناوبری با فرگمنت) واکنش می‌ده، در حالی که بقیهٔ روش‌ها یکی از این‌ها رو از دست می‌دن. نویسنده هم یادآوری می‌کنه که این ترفند بیشتر برای مرتب‌کردن و کم‌اهمیت‌تر نشون‌دادن اجزای فرعیه، و بهتره اون عنصرها رو دقیقاً همون‌جایی بذاری که کاربر انتظارشو داره، شاید با کمی padding اضافه تا راحت‌تر هاور بشه.

نکات کلیدی:

• hidden="until-found" محتوا رو قایم می‌کنه ولی با find-in-page و هش URL باز پیدا و باز می‌شه.
• contain-intrinsic-size: auto none اندازهٔ رندرشده رو نگه می‌داره تا چیدمان نپره.
• یه انیمیشن 1ms عنصر رو یه لحظه رندر می‌کنه تا اندازه‌ش ثبت شه؛ opacity: 0 لرزش رو می‌پوشونه.
• با سلکتور :is(:hover, :focus, :not([hidden])) عنصر موقع تعامل دوباره نمایان می‌شه.
• اگه CSS خارجی باشه ممکنه بازم چیدمان بپره، پس بهتره CSS رو همراه HTML سرو کنی.