آینده CSS: Popover API

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

Popover API چیست؟

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

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

ویژگی های HTML

• پاپاور
  • خودکار (پیش‌فرض) – این بدان معناست که هنگام کلیک کردن در خارج یا فشار دادن esc می‌توان پاپاور را رد کرد، همچنین پاپ‌اورهای دیگر برای این پاپ‌اور جدید بسته می‌شوند.
  • کتابچه راهنمای – زمانی که پاپاور دستی را فقط می توان به صورت دستی رد کرد (با JS یا یک عمل بسته HTML).
• popovertarget
  • [id] – این ویژگی را می توان روی a قرار داد button برای اینکه بتواند پاپاور را کنترل کند، مقدار مشخصه باید برابر باشد id از هدف
• popovertargetaction
  • تغییر وضعیت (پیش فرض) – فشار دادن a button با یک popovertarget این عمل را روی پاپاور انجام خواهد داد. در این مثال popover در صورت مخفی بودن نشان داده می شود و اگر نشان داده شود پنهان می شود.
  • پنهان شدن – تنظیم popovertarget برای نمایش هیچ کدام
  • نشان می دهد – تنظیم popovertarget برای نمایش بلوک

<button popovertarget="menu" popovertargetaction="toggle">Menu</button>
<nav id="menu" popover="auto">
  <ul>
    <li><a href="/items/1">Item 1</a></li>
    <li><a href="/items/1">Item 2</a></li>
    <li><a href="/items/1">Item 3</a></li>
  </ul>
</nav>

عناصر و کلاس های شبه CSS

• :: پس زمینه – این یک عنصر شبه است، کل صفحه را در پشت پاپاور پر می کند، یک ظاهر طراحی شده می تواند به شما امکان تغییر رنگ یا حتی اضافه کردن تاری را بدهد.
• :popover-open – این یک کلاس شبه است، هنگامی که عنصر popover باز می شود اعمال می شود، می توانیم از آن برای اضافه کردن انیمیشن های باز استفاده کنیم.

#menu {
  border: 0;
  margin-right: 0;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  max-width: 100vw;
  width: 200px;
  height: 100%;
}

#menu ul {
  list-style: none;
  padding: 0;
}

#menu ul li {
  padding: 1ch;
}

#menu::backdrop {
  background-color: rgba(200, 200, 200, 0.5);
  backdrop-filter: blur(2px);
}

#menu:popover-open {
  animation: slideIn 150ms ease-in-out;
}

@keyframes slideIn {
  0% {
    translate: 100% 0 0;
  }
  100% {
    translate: 0 0 0;
  }
}

کنترل ها و رویدادهای جاوا اسکریپت

می دانم که این مقاله عمدتاً در مورد چیزهای جدید و هیجان انگیزی است که به CSS می آیند، اما شرم آور است که در مورد JS نیز صحبت نکنیم.

کنترل ها

• PopoverElement.hidePopover() – عنصر popover را به روز کنید و آن را به حالت مخفی خود منتقل کنید.
• PopoverElement.showPopover() – عنصر popover را به روز کنید و آن را به حالت نشان داده شده خود منتقل کنید.
• PopoverElement.togglePopover() – عنصر popover را به روز کنید و بین حالت های پنهان و نشان داده شده آن جابجا شوید.

مناسبت ها

• قبل از تغییر – رویداد قبل از تغییر حالت بصری رخ می دهد.
• تغییر وضعیت – رویداد پس از تغییر حالت بصری رخ می دهد.

const popover = document.querySelector('#menu[popover]');

popover.addEventListener('beforetoggle', () => {
  // I triggered first before anything visually happened.
});

popover.addEventListener('toggle', () => {
  // I triggered after the toggle had happened visually.
});

نسخه ی نمایشی

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

در اینجا یک گیف بازگشتی وجود دارد که مرورگر شما از آن پشتیبانی نمی کند popover هنوز.

موقعیت یابی لنگر چیست؟

Anchor Positioning هنوز در MDN نیست، بنابراین این واقعاً چیزهای آزمایشی است. تمام تلاشم را می کنم تا توضیح دهم که چه کار می کند و چگونه از آن استفاده کنم.

در حال حاضر اگر می‌خواهید یک عنصر به صورت فیزیکی بعد از عنصر دیگر رندر شود، ساده‌ترین راه برای انجام این کار این است که مشخص کنید عنصر هدف در کجا از جاوا اسکریپت استفاده می‌کند تا اینکه عنصر لنگر را در موقعیت مطلق قرار دهید و ویژگی‌های بالا، راست، پایین یا چپ را تنظیم کنید. این روش کار می کند اما ‘جاوا اسکریپت کمتر بهتر است’™، بنابراین Anchor به شما امکان می دهد موقعیت یک عنصر را در یک متغیر CSS ذخیره کنید.

#anchor {
  anchor-name: --test-anchor;
}

.anchored-element {
  position: absolute;
  right: anchor(--test-anchor left);
  top: anchor(--test-anchor center);
  transform: translateY(-50%);
}

شما متوجه این جدید خواهید شد anchor تابع CSS. یک متغیر CSS و یک موقعیت می گیرد و سپس موقعیت را برمی گرداند، حتی می توانید از مقدار a استفاده کنید calc برای انجام موقعیت های پیچیده تر

نسخه ی نمایشی

در اینجا یک نسخه ی نمایشی کوچک نشان می دهد که ایجاد یک راهنمای ابزار را نشان می دهد که هدف این بود که ساده باشد و فقط یک پیاده سازی آسان را نشان دهد.

و دوباره، در اینجا یک گیف بازگشتی وجود دارد، زیرا مطمئن هستم که انکر هنوز کمی دور است.

چگونه می توانیم از اینها با هم استفاده کنیم؟

وب برای مدت طولانی وجود داشته است و کاملاً با عقب سازگار است، که عالی است، اما منجر به مشکلاتی مانند ناتوانی در شخصی سازی select جزء ترکیبی من مطمئن هستم که بسیاری از شما این دوراهی بین نوشتن یک جعبه ترکیبی جدید از ابتدا برای مطابقت با یک طرح خاص یا یافتن طرحی که شخص دیگری قبلاً ساخته است اما بخشی از توانایی سفارشی‌سازی را از دست داده‌اید، با مشکل مواجه شده‌اید.

کنار هم گذاشتن Popover و Anchor Position من فکر می‌کنم ممکن است بتوانیم یک جعبه ترکیبی زیبا بسازیم که بتوانیم آن‌طور که دوست داریم بدون نگرانی در مورد مسائل دسترسی و موقعیت‌یابی بسازیم. بیایید ببینیم آیا می توانیم آن را انجام دهیم.

در مورد دسترسی چه می کنیم؟

وب سایتی وجود دارد که توسط افراد دوست داشتنی در W3C ساخته شده است که تمام الگوهای آریا را برای موارد استفاده مختلف از جمله جعبه ترکیبی بررسی می کند. من از طریق این و همچنین به آنچه بومی نگاه می کنم select عنصر انجام می دهد.

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

نسخه ی نمایشی

بنابراین ما در نهایت به نسخه ی نمایشی رسیدیم. من Poover API و Anchor positioning را برای ایجاد یک جعبه ترکیبی که می‌توانیم به محتوای دلخواهمان استایل بسازیم، گردآوری کرده‌ام.

من مجبور شدم از چند JS استفاده کنم تا مطمئن شوم که صفحه کلید آن مناسب است و مطمئن شوم که متن موجود در دکمه به روز می شود، اگر هر یک از شما ایده هایی در مورد روش هایی دارید که بتوانیم از JS کمتری برای انجام این کارها استفاده کنیم، من دوست دارم آنها را بشنوم.

آخرین گیف بازگشتی، امیدوارم روزی همه ما بتوانیم به این پست نگاه کنیم و ببینیم همه چیز درست کار می کند.

فین

و این یک نتیجه است، Popover API باید نسبتاً به زودی در مرورگرهای پایدار شروع به فرود کند، اما موقعیت یابی Anchor ممکن است کمی بیشتر طول بکشد. همانطور که گفته شد، واقعاً زمان هیجان انگیزی برای توسعه دهنده وب است. بسیاری از کارهایی که قبلاً به راه‌حل‌های هک نیاز داشتند، اکنون در حال بررسی هستند و ما را آزاد می‌کنند تا فرصت‌های خلاقانه‌تری را کشف کنیم!

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